I am using a jQuery datepicker on .datepickerTime
and .datePickerDate
classes.
$('.datepickerTime').datetimepicker({
'timepicker': false,
'mask': false,
'format': 'M d,Y',
'minDate': 0,
'scrollMonth': false,
'scrollInput': false,
'allowTimes': [ '00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30' ]
});
When the page is loaded all datepickers work on the basis of classes. But when I added new field to my form having the datepicker class, then date picker does not work on it.
I have got the solution that I have to initialize the jquery again with ajax success .
I am confused why we need to initialize datepicker on AJAX success as we already have that jQuery on our page?
I am new to jquery and want to correct my basic concepts :-) , Thanks in advance.
You need to re-initialize
your datepicker
on ajax-success
because the element
will be added to DOM
after you have initialized the plugin
. You will have 2 options here.
ajax-success
or document
or body
or any element
which will be parent of your datepicker
element and which will be there on initial DOM
load. For your 2nd method, below is the
$('body').on('focus',".datepickerTime", function(){
$(this).datetimepicker({
'timepicker': false,
'mask': false,
'format': 'M d,Y',
'minDate': 0,
'scrollMonth': false,
'scrollInput': false,
'allowTimes': [ '00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30' ]
});
});
您应该为新元素添加新的类或ID,并为新元素调用datetimepicker进行初始化
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.