Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Basically, you need to modify this part from <a href="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html" rel="nofollow">http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html</a></p> <p>Change this part, the initialization of the datePicker,</p> <pre><code>$(function() { // initialise the "Select date" link $('#date-pick') .datePicker( // associate the link with a date picker { createButton:false, startDate:'01/01/2005', endDate:'31/12/2010' } </code></pre> <p>to this, by adding the months array and updating the endDate.</p> <pre><code>$(function() { var months = ["January","February","March","April","May","June","July","August","September","October","November","December"]; // initialise the "Select date" link $('#date-pick') .datePicker( // associate the link with a date picker { createButton:false, startDate:'01/01/2005', endDate:'31/12/2015' } </code></pre> <p><br><br> Then, change the function that updates the 3 selects (d,m,y)</p> <pre><code>var updateSelects = function (selectedDate) { var selectedDate = new Date(selectedDate); $('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected'); $('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected'); $('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected'); } </code></pre> <p>to just (d,m) with the month specified in this format "August 2011".</p> <pre><code>var updateSelects = function (selectedDate) { var selectedDate = new Date(selectedDate); $('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected'); $('#m option[value=' + (months[selectedDate.getMonth()]) + ' ' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected'); } </code></pre> <p><br><br> Then change the function that updates the picker when changing the selects from this</p> <pre><code>// listen for when the selects are changed and update the picker $('#d, #m, #y') .bind( 'change', function() { var d = new Date( $('#y').val(), $('#m').val()-1, $('#d').val() ); $('#date-pick').dpSetSelected(d.asString()); } ); </code></pre> <p>Into this, (EDIT: I mistakenly swapped the year value and day value in my previous answer.)</p> <pre><code>// listen for when the selects are changed and update the picker $('#d, #m') .bind( 'change', function() { var d = new Date( $('#m').val().split(" ")[1], months.indexOf($('#m').val().split(" ")[0]), $('#d').val() ); $('#date-pick').dpSetSelected(d.asString()); } ); </code></pre> <p>This is the <a href="http://jsfiddle.net/2Nedr/1/" rel="nofollow">http://jsfiddle.net/2Nedr/1/</a> that does just that. Hope that solves your problem.</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. 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