Menu
I am using jQuery date picker to display the calendar all over my app. I want to know if I can use it to display the month and year (May 2010) and not the calendar?
936
Set changeMonth and changeYear to true so that Month and Year appear as Dropdown. Set date format to "MM yy". jQuery DatePicker has "onClose" event, which is called when Datepicker gets closed. So using this event, fetch the selected Month and Year and setDate of Datepicker.
Let's consider we have the below HTML code, in which we will be showing bootstrap datepicker without date part, and show only year part. $("#datepicker"). datepicker({ format: "yyyy", viewMode: "years", minViewMode: "years", autoclose:true //to close picker once year is selected });
monthpicker('option', 'defaultDate', date); $(this). monthpicker('setDate', date); }, beforeShow: function (input, inst) { if ($(this). monthpicker("getDate") !== null) { // Making sure that the date set is the first of the month.
The <input type="month"> defines a month and year control. The format is "YYYY-MM". Tip: Always add the <label> tag for best accessibility practices!
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> EDIT jsfiddle for the above example: http://jsfiddle.net/DBpJe/7755/
EDIT 2 Adds 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 field http://jsfiddle.net/DBpJe/5103/
EDIT 3 updated Better Solution based on rexwolf's solution down.
http://jsfiddle.net/DBpJe/5106
79
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:
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
