Skip to content

Instantly share code, notes, and snippets.

@thiamteck
Created March 19, 2011 06:17
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save thiamteck/877276 to your computer and use it in GitHub Desktop.
Save thiamteck/877276 to your computer and use it in GitHub Desktop.
JQuery Datepicker with Month and Year only
$(document).ready(function(){
$(".monthPicker").datepicker({
dateFormat: 'mm-yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
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).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
}
});
$(".monthPicker").focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
});
<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />
@MidnightLightning
Copy link

The inst variable passed to the onClose() function already has the month and year parsed out into it as selectedYear and selectedMonth, so you can do:

$(this).val($.datepicker.formatDate('yy-mm', new Date(inst.selectedYear, inst.selectedMonth, 1)));

rather than finding month and year from more jQuery DOM-diving.

@eakerma
Copy link

eakerma commented May 29, 2018

This seems to have a bug. When you use older dates:
yearRange: "1900:2020",
minDate: "-80Y",
maxDate: "+2Y",

And then type the date in, it seems to default back to 2008 for me.

@sgaydonohl
Copy link

<3 thiamteck <3
thanks a loooot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment