jQuery UI is one of the most popular widgets and interaction libraries built on top of the jQuery JavaScript Library. It is widely used by users all over the world. It has a large number of setting options and a range of utility functions. It allows you to customize the widget the way you want. Meanwhile, you can use it to build highly interactive web applications.
jQuery UI widgets have a slightly different usage pattern than typical jQuery plugins. All the widgets use the same patterns. It is easy for you to learn it because if you learn how to use one, then you know all others.
Among all widgets, the DatePicker is commonly used which has an easy-to-use interface for selecting dates. It is tied to a simple text field which when focused on by clicking or by using the tab key. DatePicker presents an interactive calendar that allows a date to be chosen. If a date is selected, the date is then inserted into the text field.
How to Display a Month or Year Picker
You can use the following code to display only the month/year selection.
<style type="text/css">
.ui-datepicker-calendar {
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('#datepicker').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>
How to Disable the Selection of Weekends
In this section, you will know how to disable the weekend days using the beforeShowDay option.
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
</script>
How to Disable the Selection of Some Days
Besides disabling the selection of weekends, you can also disable the selection of some days. Certainly, achieve this in the date picker. To be specific, we can use the beforeShowDay.
<style type="text/css">
td.redday, table.ui-datepicker-calendar tbody td.redday a {
background: none !important;
background-color : red !important;
background-image : none !important;
color: White !important;
font-weight: bold !important;
font-size: 12pt;
}
</style>