putting datepicker() on dynamically created elements - JQuery/JQueryUI
JavascriptJqueryJquery UiDatepickerJavascript Problem Overview
I have dynamically created textboxes, and I want each of them to be able to display a calendar on click. The code I am using is:
$(".datepicker_recurring_start" ).datepicker();
Which will only work on the first textbox, even though all my textboxes have a class called datepicker_recurring_start.
Your help is much appreciated!
Javascript Solutions
Solution 1 - Javascript
here is the trick:
$('body').on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});ā
The $('...selector..').on('..event..', '...another-selector...', ...callback...);
syntax means:
Add a listener to ...selector..
(the body
in our example) for the event ..event..
('focus' in our example). For all the descendants of the matching nodes that matches the selector ...another-selector...
(.datepicker_recurring_start
in our example) , apply the event handler ...callback...
(the inline function in our example)
See http://api.jquery.com/on/ and especially the section about "delegated events"
Solution 2 - Javascript
For me below jquery worked:
changing "body" to document
$(document).on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
Thanks to https://stackoverflow.com/users/1308134/skafandri">skafandri
Note: make sure your id is different for each field
Solution 3 - Javascript
Excellent answer by skafandri +1
This is just updated to check for hasDatepicker class.
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker();
}
});
Solution 4 - Javascript
Make sure your element with the .date-picker
class does NOT already have a hasDatepicker
class. If it does, even an attempt to re-initialize with $myDatepicker.datepicker();
will fail! Instead you need to do...
$myDatepicker.removeClass('hasDatepicker').datepicker();
Solution 5 - Javascript
You need to run the .datepicker();
again after you've dynamically created the other textbox elements.
I would recommend doing so in the callback method of the call that is adding the elements to the DOM.
So lets say you're using the JQuery Load method to pull the elements from a source and load them into the DOM, you would do something like this:
$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
$(".datepicker_recurring_start" ).datepicker();
});
Solution 6 - Javascript
The new method for dynamic elements is MutationsObserver .. The following example uses underscore.js to use ( _.each ) function.
MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {
_.each(repeaterWrapper, function (repeaterItem, index) {
var jq_nodes = $(repeaterItem.addedNodes);
jq_nodes.each(function () {
// Date Picker
$(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
dateFormat: "dd MM, yy",
showAnim: "slideDown",
changeMonth: true,
numberOfMonths: 1
});
});
});
});
observerjQueryPlugins.observe(document, {
childList: true,
subtree: true,
attributes: false,
characterData: false
});
Solution 7 - Javascript
This was what worked for me (using jquery datepicker):
$('body').on('focus', '.datepicker', function() {
$(this).removeClass('hasDatepicker').datepicker();
});
Solution 8 - Javascript
$('body').on('focus',".my_date_picker", function(){
$(this).datepicker({
minDate: new Date(),
});
});
Solution 9 - Javascript
None of the other solutions worked for me. In my app, I'm adding the date range elements to the document using jquery and then applying datepicker to them. So none of the event solutions worked for some reason.
This is what finally worked:
$(document).on('changeDate',"#elementid", function(){
alert('event fired');
});
Hope this helps someone because this set me back a bit.
Solution 10 - Javascript
you can add the class .datepicker in a javascript function, to be able to dynamically change the input type
$("#ddlDefault").addClass("datepicker");
$(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });
Solution 11 - Javascript
I have modified @skafandri answer to avoid re-apply the datepicker
constructor to all inputs with .datepicker_recurring_start
class.
Here's the HTML:
<div id="content"></div>
<button id="cmd">add a datepicker</button>
Here's the JS:
$('#cmd').click(function() {
var new_datepicker = $('<input type="text">').datepicker();
$('#content').append('<br>a datepicker ').append(new_datepicker);
});
here's a working demo
Solution 12 - Javascript
This is what worked for me on JQuery 1.3 and is showing on the first click/focus
function vincularDatePickers() {
$('.mostrar_calendario').live('click', function () {
$(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
});
}
this needs that your input have the class 'mostrar_calendario'
Live is for JQuery 1.3+ for newer versions you need to adapt this to "on"
See more about the difference here http://api.jquery.com/live/
Solution 13 - Javascript
$( ".datepicker_recurring_start" ).each(function(){
$(this).datepicker({
dateFormat:"dd/mm/yy",
yearRange: '2000:2012',
changeYear: true,
changeMonth: true
});
});