jQuery UI DatePicker to show month year only
Here's a hack (updated with entire .html file):
<!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) { $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 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>EDITjsfiddle for the above example:http://jsfiddle.net/DBpJe/7755/
EDIT 2Adds the month year value to input box only on clicking of Done button.Also allows to delete input box values, which isn't possible in above fieldhttp://jsfiddle.net/DBpJe/5103/
EDIT 3updated Better Solution based on rexwolf's solution down.
http://jsfiddle.net/DBpJe/5106
This code is working flawlessly to me:
<script type="text/javascript">$(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('MM yy', new Date(year, month, 1))); } }); $(".monthPicker").focus(function () { $(".ui-datepicker-calendar").hide(); $("#ui-datepicker-div").position({ my: "center top", at: "center bottom", of: $(this) }); });});</script><label for="month">Month: </label><input type="text" id="month" name="month" class="monthPicker" />Output is:
@Ben Koehler, that's prefect! I made a minor modification so that using a single instance of the date picker more than once works as expected. Without this modification the date is parsed incorrectly and the previously selected date is not highlighted.
<!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)); }, beforeShow : function(input, inst) { var datestr; if ((datestr = $(this).val()).length > 0) { year = datestr.substring(datestr.length-4, datestr.length); month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort')); $(this).datepicker('option', 'defaultDate', new Date(year, month, 1)); $(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>