Search jQuery

jQuery Forum

How to use datetimepicker on input that was created on the fly using .append()?

in Using jQuery • 7 years ago

Hi
I have a code that appends input fields. Now what I am trying to do is when a user click on any of the field that are generated on the fly then I need a datetimepicker to be displayed.

I have did this code but it is not working for me

$('.triggerOnPicker').on('focus', datetimepicker({
timeFormat: "hh:mm TT",
changeMonth: true,
changeYear: true,
stepMinute: 5,
beforeShowDay: $.datepicker.noWeekends,
HourMin: 5, HourMax: 17, minDate: 0
});

How can I get this code to work? note all of the inputs have the same class which is triggerOnPicker

Replies(4)

jakecigar

Re: How to use datetimepicker on input that was created on the fly using .append()?

7 years ago

There is no magic to make future elements into datepickers.

Assuming it works for existing triggerOnPicker elements, I would put similar code in a function and call it after every ajax that adds it.

$(document).ajaxComplete(pickers) // magically calls pickers after EVERY ajax.

function pickers() {
$('.triggerOnPicker:not(.picked)').addClass('picked').on('focus', datetimepicker({
timeFormat: "hh:mm TT",
changeMonth: true,
changeYear: true,
stepMinute: 5,
beforeShowDay: $.datepicker.noWeekends,
HourMin: 5,
HourMax: 17,
minDate: 0
}));
}

JΛ̊KE

PS I wrote assuming it works, because the datepicker call does look strange to me.

malhayek

Re: How to use datetimepicker on input that was created on the fly using .append()?

7 years ago

Thank you sir :)

The following code works

$('#test77').datetimepicker({

timeFormat: "hh:mm TT",

changeMonth: true,

changeYear: true,

stepMinute: 5,

beforeShowDay: $.datepicker.noWeekends,

HourMin: 5,

HourMax: 17,

minDate: 0

});

However when I add the .on('focus',....... I get the following error.

Uncaught ReferenceError: datetimepicker is not defined

I am not sure how to fix it.

jakecigar

Re: How to use datetimepicker on input that was created on the fly using .append()?

7 years ago

This version assumes datetimepicker is a normally behaving plugin.

function pickers() {
$('.triggerOnPicker:not(".picked")').addClass('picked')
.datetimepicker({
timeFormat: "hh:mm TT",
changeMonth: true,
changeYear: true,
stepMinute: 5,
beforeShowDay: $.datepicker.noWeekends,
HourMin: 5,
HourMax: 17,
minDate: 0
})
}

JΛ̊KE

malhayek

Re: How to use datetimepicker on input that was created on the fly using .append()?

7 years ago

I got it now :)

so what i did is that I added to my $getJSON a .done method.

Here is how it looks like now.

$.getJAON(Blah Blah).done(function(){

$('.triggerOnPicker').datetimepicker({

timeFormat: "hh:mm TT",

changeMonth: true,

changeYear: true,

stepMinute: 5,

beforeShowDay: $.datepicker.noWeekends,

HourMin: 5,

HourMax: 17,

minDate: 0

});

Thank you JAKE :) your code gave me the hint :)

Top Reply

Response title

Attachments

jQuery Forum

How to use datetimepicker on input that was created on the fly using .append()?

Replies(4)

Re: How to use datetimepicker on input that was created on the fly using .append()?

Re: How to use datetimepicker on input that was created on the fly using .append()?

Re: How to use datetimepicker on input that was created on the fly using .append()?

Re: How to use datetimepicker on input that was created on the fly using .append()?

Statistics

Tags

Actions