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
Related
I use the jquery datepicker in an Angular Application and I noticed a behavior that I would like to prevent.
The application consists of an input field for the date and a select box for a month selection.
If the months in the select box are changed, the minDate of the jquery date picker should be adjusted.
I tried the following example:
I set the date in the input field to the 24.04.2018
I chose October
The date of the input field is automatically set to 24.10.2018
I do not want the content of the Inputs field to be automatically adjusted.
Here is my git-hub project: https://github.com/annalen/jquery-datepicker
Many thanks for the help
Solution
I use the beforeShow and onClose date-picker functions
jQuery(yourElement).datepicker('option', 'beforeShow', function (date) {
return {
'minDate': yourMinDate,
'maxDate': yourMaxDate
};
});
jQuery(yourElement).datepicker('option', 'onClose', function (date) {
jQuery(this).datepicker('option', {
'minDate': null,
'maxDate': null
});
});
The datepicker updates the date only if the selected one is out of the range.
For example, if the current selected date is 24.04.2018 and you set the minDate to 20.04.2018, nothing will happen.
But if you set it to any date after 24.04.2018, it will get updated. I believe it's normal since its the purpose of setting a minDate.
You can always set yourself manually the input's value: $('#datepicker').val('20.04.2018') but I don't think it's a good idea to have something displayed different than the internal datepicker component state (the calendar that will popup will show a different date than the one in the input)
Regards,
Vincent
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
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 would like to know if it is possible to change the default date of an already rendered inline datepicker? I have set up a fiddle to play around with: http://jsfiddle.net/xf0qc41k/
I currently destroy the datepicker and re-render it with a new default date if I want the default date to change. This works fine but I wondered if it is possible to change the current inline datepicker's default date on the fly.
HTML:
<div class="inline_datepicker"></div>
JS:
$('.inline_datepicker').datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "2014-10-21",
});
Just call setDate:
$('.inline_datepicker').datepicker('setDate', "2014-12-25");
$('#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" });