In this article, you going to see various tips and tricks regarding jQuery UI DatePicker. We going to checks this in a details.
Let’s start with topic jQuery UI DatePicker step by step:
You going to learn about DatePicker widget in a details.
DatePicker is the widget which is mainly used in many website to add date or you can say to set date into to form during creating account.
It is built with large number of configuration and many more function.
DatePicker can use to change or customize the widget as per your requirement on you website.
The important point is to add or set date on your website.
Datepicker is very simple to use.
It is actually tied with the input type text which is get populate on a focused or by using the tab key allowing to select date.
When you chose the date from the DatePicker, it get inserted to text field.
Below is the example of DatePicker in which it is explained about how to write a HTML code and call the datepicker method.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepic" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepic"></p>
</body>
</html>OUTPUT:
In the above example you will see input element with attribute id ‘datepic’ which binds the DatePicker into the input type text element when user click on input field element.
The important point regarding DatePicker not to use HTML5 attribute ‘date’ when using jQuery UI Datepicker.
Conflict occurs, if you use HTML5 attribute ‘date’ when use DatePicker.
In DatePicker, there is a large set of option and method. For the full details you can with link : DatePicker Method and Option
Now moving towards next step regarding some tips and tricks regarding DatePicker.
Let us see with some important example.
Topic 1: Disable the Selection of Weekends
In this topic, we going to see how to disable the selection of weekends.
We can disable the weekend days using beforeShowDay option by passing $.datepicker.noWeekends which automatically disabled what is the requirement called ‘Disable the Selection of Weekends’ without any other requirement of code.
Below is the example of DatePicker to disable the selection of weekends.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Disable the Selection of Weekends</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#datepic").datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepic"></p>
</body>
</html>OUTPUT:
Topic 2: Display a Month-Year picker
In this topic, you can see how to display only month and year picker.
To achieve only display of month and year, for that add css to hide the calendar.
.ui-datepicker-calendar { display: none; }
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Display a Month-Year picker</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
.ui-datepicker-calendar {
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('#datepic').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>
</head>
<body>
<p>Date: <input type="text" id="datepic"></p>
</body>
</html>OUTPUT :
To achieve this we have to set configuration of DatePicker.
| Configuration Options | Description |
| changeMonth | Set to true so that it can show the month change dropdown |
| changeYear | Set to true so that it can show the year change dropdown |
| showButtonPanel | Set to true so that it can show a panel of buttons |
| dateFormat | Set to true so that it can parse & display date in the ‘MM yy’ format |
Topic 3: Display a Hidden jQuery UI DatePicker
In this topic we going to see how to display hidden date picker.
This scenarios is mainly useful when a user does not require the datepicker every time.
It is require only at a specific requirement or you can say at a particular condition.
To achieve this we going to do step by step using the below example in which you come to understand completely.
In the below example we have used radio buttons as a condition.
Hidden Date Picker display only when you click on specific radio button.
We can only set the date onSelect event of datapicker.
From the below code you can understand completely.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Display a Hidden jQuery UI DatePicker</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
#customDatePic {
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$("#customDatePic").datepicker({
onSelect: function () {
$("label[for='startDate']").text($(this).val());
}
});
$("#startDate").on('click', function () {
$("#customDatePic").datepicker("show");
});
});
</script>
</head>
<body>
<span>
<input type="radio" id="radio1" name="radios" value="" />
<label for="radio1">Today</label>
</span>
<span>
<input type="radio" id="radio2" name="radios" value="" />
<label for="radio2">1 July</label>
</span>
<span>
<input type="text" id="customDatePic" />
<input type="radio" id="startDate" name="radios" value="" />
<label for="startDate">Other</label>
</span>
</body>
</html>After the page load get finish you will see on three radio button.
When you click on the other option of the radio button a datepicker appear and you can select the date as per your requirement.
After selecting date the output will look like this.
In this topic you going to see how to navigate between months using external buttons.
To achieves this we going to do in a detail step by step so that you can understand easily.
Many time user do not in a need of default datepicker with next and a previous button.
User many time need using the external button they can change month.
From the below example of code you can understand completely.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigation between Months using external buttons</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
.ui-datepicker-next, .ui-datepicker-prev {
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('#datepic').datepicker();
$('#next, #prev').on('click', function (e) {
$('.ui-datepicker-' + e.target.id).trigger("click");
});
});
</script>
</head>
<body>
<div id="datepic"></div>
<br />
<button id="prev">Previous Month</button>
<button id="next">Next month</button>
</body>
</html>OUTPUT :
Topic 5: Custom date format
In this topic you going to see how to set custom date format to datepicker.
To achieve this we going to do in simple way to complete task.
Date format in jQuery Date Picker by default is US format mm/dd/yy.
To change the default we set custom date format.
Below is the syntax to set custom date format in jQuery.
$.datepicker.formatDate( format, date, settings )
From the below example you come to understand about how to set custom date format.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom date format</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('#datepic').datepicker({ dateFormat: 'dd-mm-yy' });
});
</script>
</head>
<body>
Date Format : <input type='text' id='datepic' />
</body>
</html>OUTPUT:
Topic 6: Localizing the DatePicker
In this topic, we going see how to customize and localize the datepicker using different lanluages and different date format.
There are two ways to achieves this topic in completely simple and easy way.
Let start with this in a detail to do step by step.
The first and the most important thing is using of $.datepicker.regional attribute for custom localization.
Secondly we can do by use the translation file under the i18n folder.
But we going to check with only first method.
Now we going to see how to use this regional attribute.
This attribute holds complete array of localization and also it is completely indexed by language code.
In this topic we going to display the datepicker control in Italian.
From below example you come to understand completely regarding customize and localize the datepicker.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Localizing the DatePicker</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$.datepicker.regional['it'] = {
closeText: 'Chiudi',
prevText: '<Prec',
nextText: 'Succ>',
currentText: 'Oggi',
monthNames: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno',
'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
monthNamesShort: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu',
'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
dayNames: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì',
'Giovedì', 'Venerdì', 'Sabato'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
dayNamesMin: ['Do', 'Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['it']);
$('#datepic').datepicker();
});
</script>
</head>
<body>
Localizing the DatePicker : <input type='text' id='datepic' />
</body>
</html>After executing the above code you can see the output below from which you can understand how to customize the datepicker and also you can understand point regarding localization.
I hope you liked my this article. If you have any queries or any question regarding this, Feel free to comment on Me.
