Menu
I went through this post jQuery UI DatePicker to show month year only which is very helpful to me in order to hack the datetime picker UI to suit my situation.
But as I have several datetime picker on the same form, this happens. The css display:none is aim to 'hide' the days not to be shown. But if I have several datetime picker on the same form but only one I wish to make one of it monthpicker, how can I achieve that? With thw css, it makes all the days on the all datetime calender UI disappear since the css will change the attribute of .ui-datepicker-calendar. Any suggestions are welcome.
563
datepicker( { format: "mm-yyyy", startView: "months", minViewMode: "months" }); As you can see in the above jQuery code, we have added property "format: "mm-yyyy"", which makes us to show month and year format to user and using " startView:"months" ", we are showing months-years only.
datepicker({ dateFormat: 'yy-m-d', inline: true, onSelect: function(dateText, inst) { var month = dateText. getUTCMonth(); var day = dateText. getUTCDate(); var year = dateText. getUTCFullYear(); alert(day+month+year); } }); });
As you can see in the above code, we have provided ' format:"yyyy" ' (ex: 2022) and " viewMode:'years '", which will allow datepicker to show/select only year part and it will hide Months or date part, plus we have made 'autoclose:true', which will close datepicker as soon as we select year.
In the Data type Format dialog box, do one of the following: To format the control to show the date only, select the display style that you want in the Display the date like this list. To format the control to show the time only, select the display style that you want in the Display the time like this list.
Currently, datepicker creates only 1 element per page that all 'datepicker' inputs share, hence why the answer to the linked question does not work. The beforeShow event does not allow editing the datepicker element with .addClass() or .css() (as the element structure is refreshed from the datepicker script when it shows.)
To get around this, I found that the focus event for the input element appears to run code after the datepicker is shown. It is a simple workaround to a frustrating problem.
Here is my code:
<!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/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.month-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) {
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', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
$('.date-picker').datepicker();
$('.month-picker').focus(function () {
$('.ui-datepicker-calendar').addClass('hideDates');
});
});
</script>
<style>
.hideDates {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date:</label>
<input name="startDate" id="startDate" class="date-picker" />
<label for="endMonth">End Month:</label>
<input name="endMonth" id="endMonth" class="month-picker" />
</body>
</html>
I used a slightly different version of the code that Ben posted. Instead of relying on the focus event I added
inst.dpDiv.addClass('monthonly');
into the beforeShow method and
inst.dpDiv.removeClass('monthonly');
into the onClose. This adds and removes a class on the common div used by the all the datepicker widgets. The date calendar div can then be targeted in css using
.monthonly#ui-datepicker-div .ui-datepicker-calendar
{
display: none;
}
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
