Question

I have experimented with the datepicker in the jQuery UI and can get it working with select boxes but only when there is a day, month and year select box (http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html).

What I need is to have a day and a month-year box like the one that can be seen here…(http://www.bookassist.com/hotels/index.jsp?source=org)

Anyone out there know if this can be done? Totally hit a brick wall.

Answer 1

Basically, you need to modify this part from http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html

Change this part, the initialization of the datePicker,

$(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'
            }

to this, by adding the months array and updating the endDate.

$(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'
            }

Then, change the function that updates the 3 selects (d,m,y)

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');
}

to just (d,m) with the month specified in this format “August 2011”.

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');
}

Then change the function that updates the picker when changing the selects from this

// 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());
        }
    );

Into this, (EDIT: I mistakenly swapped the year value and day value in my previous answer.)

// 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());
        }
    );

This is the http://jsfiddle.net/2Nedr/1/ that does just that.
Hope that solves your problem.