im using this datetimepicker / in my edit form. Im not able to set up default value in this datetimepicker from my variable date. If I use $('#edit_cost_date').val(json[0]['date']); on input element, the value in input is right but if i open datetimepicker i see that marked is not the date in input but actual date.
var date = json[0]['date'];
$(function () {
$('#datetimepicker-edit-cost').datetimepicker({
locale: 'cs',
format:'DD.MM.YYYY'
});
});
im using this datetimepicker http://eonasdan.github.io/bootstrap-datetimepicker/ in my edit form. Im not able to set up default value in this datetimepicker from my variable date. If I use $('#edit_cost_date').val(json[0]['date']); on input element, the value in input is right but if i open datetimepicker i see that marked is not the date in input but actual date.
var date = json[0]['date'];
$(function () {
$('#datetimepicker-edit-cost').datetimepicker({
locale: 'cs',
format:'DD.MM.YYYY'
});
});
- use this one defaultDate :date – sakir Commented Mar 1, 2015 at 15:12
4 Answers
Reset to default 4Are you sure your date variable is a Date object? If it is not, you will need to set the default date like this:
var date = json[0]['date'];
$(function () {
$('#datetimepicker-edit-cost').datetimepicker({
locale: 'cs',
format:'DD.MM.YYYY',
defaultDate: new Date(date)
});
});
More information about the date property for that plugin:
http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#date
date([newDate])
Takes newDate string, Date, moment, null parameter and sets the ponents model current moment to it. Passing a null value unsets the ponents model current moment. Parsing of the newDate parameter is made using moment library with the options.format and options.useStrict ponents configuration.
Throws
TypeError - in case the newDate cannot be parsed
Emits
change.dp - In case newDate is different from current moment
As also mentioned in the answer by John Washam, the documentation clearly says that the date function accepts a moment object, among others.
I was in the same situation, trying various things, but nothing seemed to work, except for this idea:
Why not feed a moment object to the date function?
var date = json[0]['date'];
$(function () {
$('#datetimepicker-edit-cost').datetimepicker({
locale: 'cs',
format:'DD.MM.YYYY'
});
$('#datetimepicker-edit-cost').data("DateTimePicker").date(moment(date));
});
Since the moment.js library is required for the datepicker to work, you can use it to parse any string, and directly feed the date function with its result.
this works for me
var date = new Date('11/1/2013');
or var date2 = '11/1/2013';
$('#datetimepicker1').datetimepicker({
locale: 'cs',
format:'DD.MM.YYYY',
defaultDate: date
});
Its documentation defaultDate value Accepts: date, moment, string
There are some real bugaboos in setting up this tempermental little control. First, remove any ngModal binding expressions on the input controls. These will blow up your attempts to set and show the default value. Instead, use @ViewChild to get at the value when you need it. Second, if your control is going to be in a modal popup ponent that's not visible during the initial load, you may run into more issues. I could never get the element.data("DateTimePicker") / element.data("datetimepicker") to ever initialize or bee available prior to displaying the control. It's simply not there. Third, set the locale. This seems to help a ton with the initial display regardless of the format. (Maybe I'm just superstitious. Getting this to work seemed like voodoo :)
In the end, I set up a proper TypeScript import with my own datepicker.d.ts and datepicker.js files that contained functions for initializing a control. My function is as follows in my datepicker.js:
export function datepickerinit(t,d){
if(!d)
d=new Date();
var m=moment(d).format('MM/DD/YYYY');
var j=$('#'+t);
if(j.data('DateTimePicker')){
j.data('DateTimePicker').date(m); //this seems to never be true
}
else {
j.datetimepicker({
date:m,
defaultDate:m,
format: 'MM/DD/YYYY',
locale:'en-US',
viewDate:m
});
}
}
I end up with a the date picker displaying my default value before the user clicks. (When it wasn't working, I'd end up with a fully expanded GMT datetime string before the user clicked the picker.)
When my users click a button to do an action, I get the value from my ViewChild's nativeElement.value property.