CODEWITHSUNDEEP
javascriptjqueryhtmldatepicker
bombai
bombai

Reputation: 967

jQuery UI DatePicker to show month year only in one calendar

I have found this code in this page..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
 <script type="text/javascript">
 $(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));
    }
});
});
</script>
 <style>
  .ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

And works if you have only one calendar at the same page, but if I have two calendars, hides the days in both, and i want that only be applied in one calendar.. Someone can tell me how can i do it?

Thanks.

Upvotes: 3

Views: 7084

Answers (2)

Val
Val

Reputation: 539

You need to remove 

.ui-datepicker-calendar {
   display: none;
}

Try this one jsfiddle

Upvotes: 0

shiftoff
shiftoff

Reputation: 143

By using $('.date-picker').datepicker({ you init all your calendars with the same settings, specifically date format, so you need to init them separately. E.g. if your calendars have ids "firstCalendar" and "secondCalendar", init first one as above:

$('#firstCalendar').datepicker( {
    dateFormat: 'MM yy'
});

And the second one with default dateFormat:

$('#secondCalendar').datepicker( {
    dateFormat: 'mm/dd/yy'
});

Upvotes: 2

Related Questions