Using bootstrap-datepicker.js, very nice plugin. Everything works as expected, minus this one case, which could be me missing something within the documentation. Whenever a user enters a date and the textbox looses focus (user goes on to complete the rest of the form), if the user goes back to the textbox and attempts to remove the date, today's date is automatically populated. If you remove today's date, it automatically populates again...repeatedly. Is there an option I have missed that would rectify this situation? If the field was required, it wouldn't be a big deal, however the user has the option of submitting the form without a date. Code below:
$('#start_date').datepicker({
orientation: "bottom auto",
autoclose: true,
todayHighlight: true,
useCurrent: false
}).mask("99/99/9999");
$('#end_date').datepicker({
orientation: "bottom auto",
autoclose: true,
todayHighlight: true,
useCurrent: false
}).mask("99/99/9999");
This is a working fiddle demonstrating the issue: https://jsfiddle.net/f8v5vLmt/3/
There must be a problem with the mask plugin you are using. It is setting a value in the field that datetime picker is trying to parse, and it is obviously not a date, so it must be defaulting to current date.
Try adding forceParse: false to the options.
You can check the behaviour is whatyou want in the first field here:
https://jsfiddle.net/f8v5vLmt/5/
Ref: https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#forceparse
Related
I have a element I'm using as a datepicker:
I set it up using the following script:
$('#fltProdFromQuo').datepicker({
format: "dd M yyyy",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
And set the value to 1st June 2020:
$('#fltProdFromQuo').val('2020-06-01') ;
WHich seems to work until I click the field, and the calander shows todays date:
Does anyone have any idea what I've missed to make the calendar show the correct date?
Thank you in advance of any help given.
Found the answer. I didn't know that once I set the date I had to "Update" it to change the calender, never had to do this before:
$('#fltProdFromQuo').val('2020-06-01') ;
$('#fltProdFromQuo').datepicker('update');
Working tickety boo now!
I have tried to implement angular2-datetimepicker control in my application. But it is showing todays date as default. But I need to have this with no default date selected.
This is the code piece
In HTML page
<angular2-date-pickerformControlName="dateTimeElement" [settings]="{
bigBanner: true, format: 'dd-MMM-yyyy hh:mm a',defaultOpen: false,
timePicker: true,
closeOnSelect: true}"></angular2-date-picker>
Can someone tell how to avoid the default binding of this control?
As far as the documentation goes you can set NgModel to a date you want, which you can try setting null in the component.
See: https://github.com/CuppaLabs/angular2-datetimepicker/issues/5
I suppose you can set NgModel as said in the readme:
See: https://github.com/CuppaLabs/angular2-datetimepicker/blob/master/README.md
I have this DateTimePicker:
I need edit only the time , so I need only show this :
code:
setDateTime: function(index){
$('#date_time_'+index+'_id').datetimepicker({
showClose:true,
format: 'DD/MM/YYYY HH:mm',
ignoreReadonly: true
});
},
So the input showing the date and time is fine, but I need edit only the time
Im using this :
bootstrap-datetimepicker
but I don't know what option use.
Sorry my english.
unfortunately I think that without updating of bootstrap datetimepicker lib you would have to use alternative. As this library is not prepared for just time picker.
Please use something like this instead. Same format, but more options for you:
http://tarruda.github.io/bootstrap-datetimepicker/
Then you can set what you want just with this
$('#date_time_'+index+'_id').datetimepicker({
pickDate: false
});
Just specify only time in the format like this:
https://jsfiddle.net/9jkxL4su/
$('#datetimepicker1').datetimepicker({
format: 'LT'
});
EDIT:
To show calendar (toggle) icon, you'll need to fire a toggle-click when the picker is shown:
https://jsfiddle.net/pv8Lhy9t/
$('#datetimepicker1').datetimepicker({
allowInputToggle: true,
showClose: true
});
$('#datetimepicker1').on("dp.show", function(){
var toggle = $(this).find('a[data-action="togglePicker"]');
if(toggle.length > 0) toggle.click();
// To hide the toggle back to calendar button, uncomment line below
// $(this).find('a[data-action="togglePicker"]').hide();
});
NOTE:
You can remove the ability for the user to toggle back to edit the date. Just uncomment the last line as shown in the code above.
READONLY: To restrict ability to edit date manually, just give the input field a readonly attribute and also set the ignoreReadonly property to true in the picker: https://jsfiddle.net/xgm99t5o/
What is the name of the component ?
Perhaps you can use something like:
pickDate: false;
or only
format: 'HH:mm',
In this component it looks like: https://tarruda.github.io/bootstrap-datetimepicker/
i am using jqueryDate picker.i want to customize this Datepicker.In this Datepicker Month and year is showing.Like August2014.Here if i click next it will go to next month like previous.
But I want to customize,mean i want to show months in dropdown and Year also i have to show in Dropdown,amd Next and previous function should be work.Can You Please suggest Me.
What plugin are you trying to use. If it is this plugin found in this site. then all you need to do is set the change month and changeyear to true.
$(function() {
$("YOURSELECTOR" ).datepicker({
changeMonth: true,
changeYear: true
});
});
the documentation for the api can be found here.
$('#date_arrow_from, #date_from').click(function() {
$('#date_from').attachDatepicker({
rangeSelect: false,
yearRange: "2011:2012",
firstDay: 1
});
$('#date_from').showDatepicker();
});
http://jqueryui.com/demos/datepicker/ - I am using something like this, but the problem is that when I click on the input I can't write anything, the keypress event is blocked, how can I unlock the input to be enabled?
Looks like you need to set constrainInput option to false
http://jqueryui.com/demos/datepicker/#option-constrainInput
When true entry in the input field is constrained to those characters
allowed by the current dateFormat.
Code examples initialize a datepicker with the constrainInput option specified.
$(".selector" ).datepicker({ constrainInput: false });
Edit
While the above was marked as accepted I agree with #Edd Morgan that you should try and take advantage of the built in input validation (I always do when I'm using it). To specifically allow dates in the ISO 8601 format you can change the datepickers dateFormat string very easily and the demo below has a good list of examples.
http://jqueryui.com/demos/datepicker/#date-formats
$(".selector" ).datepicker({ dateFormat: "yy-mm-dd" });