In this tutorial you will learn how to use basic javascript and jQuery(along with jQuery UI) in order to show a calendar on your web page and keep the selected value.
This will be really useful, if you are creating forms that require an appointment date.
In order to achieve our goal we will need to include 3 files to our page:
- jQuery
- jQuery UI
- jQuery UI style sheet
Sounds easy. Doesn’t it?
Ok, let’s get started and prepare our files. You will need to download jQuery and jQuery UI from the official websites. Once you have downloaded the files, create anew folder in your project’s root directory.
Let’s name it “js” – now put your javascript files inside of this folder. It is time to create a second folder – let’s name it “css” and guess what… put your css files inside of it.
Now we are ready to create our HTML index page and place a simple input element inside of it.
Please mind that you need to include jQuery, jQueryUI and the css files in the HEAD of your document!
index.html
[code language=”html”]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<title>Page title goes here</title>
</head>
<body>
<input type="text" id="calendar">
</body>
</html>
[/code]
If you run the above code, you will see a beautiful white window containing an input box.
Ok. But where is the calendar?!
Here is where the magic starts. jQuery is combining a lot of functionalities that can be achieved with just few lines of code and in our case it is the following:
[code language=”js”]
<script>
actualDatePicker = (function() {
$("#calendar").datepicker({ // the id of your input element
yearRange: "-20:+100", // years range
changeMonth: true, // allow the user to change months
changeYear: true, // allow the user to change the years
dateFormat: "dd.mm.yy", // input string format
onSelect: function ()
{
this.focus(); // Keep in mind that on select the input is losing the focus! This way we can fix this issue.
}
});
});
</script>
[/js]
Yes, it is that easy! Don’t forget to place your code just before the closing BODY tag and use the document.ready function – also you need to add ‘onclick="actualDatePicker()"’ to your input element.
Here is how your code should be looking like:
[code language="html"]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<title>Page title goes here</title>
</head>
<body>
<input type="text" id="calendar" onclick="actualDatePicker()"> <!– Handle the click event–>
<script>
actualDatePicker = (function() {
$("#calendar").datepicker({ // the id of your input element
yearRange: "-20:+100", // years range
changeMonth: true, // allow the user to change months
changeYear: true, // allow the user to change teh years
dateFormat: "dd.mm.yy", // input string format
onSelect: function ()
{
this.focus(); // Keep in mind that on select the input is losing the focus! This way we can fix this issue.
}
});
});
</script>
</body>
</html>
[/code]
Now you can access the date by the following code:
var date = $(‘#calendar’).val();
Also, if you don’t like plain javascript you can replace this onclick event
‘onclick=”actualDatePicker()”‘ by the following jQuery style code:
$(“#calendar”).click(function(){
actualDatePicker()
});
Congratulations! Now you know how to implement jQuery UI datepicker to an input element!
