putting datepicker on dynamically created elements - JQuery JQueryUI

Question

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

User · Answer

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

User · Answer

here is the trick      body   on  focus    datepicker recurring start   function          this  datepicker           DEMO  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

User · Answer

For me below jquery worked   changing  body  to document    document  on  focus    datepicker recurring start   function          this  datepicker          Thanks to skafandri   Note  make sure your id is different for each field

User · Answer

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

User · Answer

datepicker recurring start    each function          this  datepicker           dateFormat  dd mm yy           yearRange   2000 2012           changeYear  true          changeMonth  true

User · Answer

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

User · Answer

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

User · Answer

I have modified  skafandri answer to avoid re-apply the datepicker constructor to all inputs with  datepicker recurring start class   Here s the HTML    lt div id  content  gt  lt  div gt   lt button id  cmd  gt add a datepicker lt  button gt    Here s the JS       cmd   click function       var new datepicker       lt input type  text  gt    datepicker          content   append   lt br gt a datepicker    append new datepicker         here s a working demo

User · Answer

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

User · Answer

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

User · Answer

This was what worked for me  using jquery datepicker       body   on  focus     datepicker   function        this  removeClass  hasDatepicker   datepicker

User · Answer

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

[javascript] putting datepicker() on dynamically created elements - JQuery/JQueryUI

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to datepicker