Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I think a possible reason you are seeing the problem is, when you use focus to attach to the input, you are then destroying your datepicker and remaking one. However, when you click on your input, it runs, so destroys the datepicker, and shows one. However when you click next or previous, you will initially loose focus on the input, but the datepicker script will 'refocus' it and hence fires off the destroy and re-create a datepicker.</p> <p>I assume you are using live to attach a datepicker to a dynamic input - you could always use <a href="https://stackoverflow.com/questions/1059107/why-does-jquery-uis-datepicker-break-with-a-dynamic-dom"><code>$('.datepicker').not('.hasDatePicker').datepicker();</code></a> call in your <code>success:......</code> callback of your ajax call, where I will assume, you are creating your new input. This will have the affect of adding a <code>.datepicker()</code> to any input item with the class <code>datepicker</code> which hasn't already had a <code>.datepicker()</code> added. <em>(An input which has had a <code>.datepicker()</code> added to it, will also have the class <code>hasDatePicker</code> added to it)</em></p> <hr> <p>An alternative method - keeping with the live call - which has pro's and con's </p> <ul> <li><strong>PRO</strong>: you only need it once in your code - instead of placing it several times if you have several ajax calls which may add several dynamic inputs.</li> <li><strong>CON</strong>: You are creating a much more resource hungry bit of code as it will run every time an input receives focus, instead of just applying the <code>.datepicker()</code> once.</li> </ul> <p>So to keep with the live, you could do the following:</p> <pre><code>$('.datepicker').live('focus', function () { $(this).not('.hasDatePicker').datepicker(); }); </code></pre> <p><em>See it in action <a href="http://jsfiddle.net/Scoobler/qXFpz/2/" rel="nofollow noreferrer">here</a></em></p> <p>This will attach a <code>.datepicker()</code> to any input with the class <code>datepicker</code> which <strong>hasn't</strong> already got a <code>.datepicker()</code> attached <em>(class <code>hasDatePicker</code>)</em>, this should save you destroying and recreating all datepickers.</p> <p><em>This will do the same as @Andrew Whitaker's solution</em></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload