CODEWITHSUNDEEP
jquerydatepicker
user3442612
user3442612

Reputation: 1822

Display two datepicker calendars with different functionality

I've set up a jQuery-UI DatePicker calendar that accepts just the month and year input, but I also need another regular (unmodified) date calendar on the same page.

How can I set the datepicker month/year calendar instance to be unique from other calendars on the page?

Here is my Fiddle: http://jsfiddle.net/n2fole00/b4vm1pap/

Required code...

HTML

<h3>Two different calendars demo:</h3>
<div id="datepicker-without-days" class="bg-box">
    <label for="startDate">Date (months/year only) :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</div>

<div class="bg-box">
    <label for="startDate2">Date (normal calendar) :</label>
    <input name="startDate2" id="startDate2" class="date-picker" />
</div>

CSS

.ui-datepicker-calendar {
    /* Hide the days */
    display: none;
    }

button.ui-datepicker-current { 
    /* Hide the Today button */
    display: none; 
}

.bg-box { padding:15px; margin:15px; background-color: lightgreen; }

JS

$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});

Thanks

Upvotes: 1

Views: 3360

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074038

Just target them specifically:

$(function() {
    $('#startDate').datepicker( {
        // ...relevant options...
    });
    $('#startDate2').datepicker( {
        // ...relevant options...
    });
});

Upvotes: 1

Related Questions