Datepicker in jQuery

by

calendarUIjqueryPIDatepickers in jQuery has the ability to allow users to enter dates with ease and accuracy.  It is convenient to users where they can customize the format of the date and language. You can also restrict the selectable date ranges and even add buttons and other functionality easily.

 

jQuery contains datepicker() method that generates a datepicker and modifies the look of HTML elements on a web page when you add new CSS classes

 

Syntax:

You can use datepicker() method in two forms:

  • $(selector).datepicker (options)
  • $(selector).datepicker (“action”, [params])

 Description:

selector – can be use with an id, class and name of an HTML elements.

options – It specifies the appearance and behavior of the datepicker elements.

 

Example of  $(selector).datepicker (options):

  • Default functionality
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
   $(function() {
      $(".datepicker" ).datepicker();
   });
 </script>
 <style type="text/css">
 input {
  height: 30px;
  font-size: 16px;
 }
 p {
  font-size: 16px;
  text-align: center;
 }
 h1{
  text-align: center;
 }
 </style>
<title>jQuery UI Datepicker - Default functionality</title>
</head>
<body>
 <h1>Date Picker</h1>
 <p>Date: <input id="datepicker" type="text"></p>
</body>
</html>

  • Alternate Date function

<!DOCTYPE html>
<html>
<head>
 <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
    $( "#datepicker1" ).datepicker({
        dateFormat:"yy-mm-dd",
        altField: "#datepicker2",
        altFormat: "DD, d MM, yy"
    });
 });
 </script> 
 <style type="text/css">
 input {
  height: 30px;
  font-size: 16px;
 }
 p {
  font-size: 16px;
  text-align: center;
 }
 h1{
  text-align: center;
 }
 </style>
<title>jQuery UI Datepicker - Alternate functionality</title>
</head>
<body>
 <h1>Date Picker</h1>
   <p>Enter Date: <input type="text" id="datepicker1"></p>
   <p>Alternate Date: <input type="text" id="datepicker2"></p>
</body>
</html>

  • beforeShowDay function:

<!DOCTYPE html>
<html>
<head>
 <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
 $(function() {
   $( "#datepicker3" ).datepicker({
     beforeShowDay : function (date)
     {
      var dayOfWeek = date.getDay ();
        //disable sunday and satuday ...
        // 0 : Sunday, 1 : Monday, ...
      if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
       else return [true];
     }
    });
 });
 </script>
<title>jQuery UI Datepicker - Alternate functionality</title>
 </head>
 <body> 
 <p>Enter Date: <input type="text" id="datepicker3"></p>
 </body>
</html>

  •  buttonImage,  buttonImageOnly and showOn

<!DOCTYPE html>
<html>
<head>
 <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
 $(function() {
 $( "#datepicker4" ).datepicker({
 showOn:"button",
 buttonImage: "/jqueryui/images/calendar.ico",
 buttonImageOnly: true
 });
 });
 </script> 
 <title>jQuery UI Datepicker -buttonImage,  buttonImageOnly and showOn functionality</title>
</head>
<body>
 <p>Enter Date: <input id="datepicker4" type="text"></p>
</body>
</html>

  • defaultDate, dayNamesMin, and duration

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>jQuery UI Datepicker defaultDate, dayNamesMin, and duration functionality</title>
 <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <!-- Javascript -->
 <script>
 $(function() {
 $( "#datepicker5" ).datepicker({
 defaultDate:+9,
 dayNamesMin: [ "Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat" ],
 duration: "slow"
 });
 });
 </script>
 </head>
 <body>
 <!-- HTML --> 
 <p>Enter Date: <input type="text" id="datepicker5"></p>
 </body>
</html>

  • showWeek and showAnim

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>jQuery UI Datepicker showWeek and showAnim functionality</title>
 <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <!-- Javascript -->
 <script>
 $(function() {
   $( "#datepicker6" ).datepicker({
     showWeek:true,
     showAnim: "slide"
    });
 });
 </script>
 </head>
 <body>
 <!-- HTML --> 
 <p>Enter Date: <input type="text" id="datepicker6"></p>
 </body>
</html>

Example of $(selector).datepicker (“action”, [params])

  • setDate() action

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>jQuery UI Datepicker setDate functionality</title>
 <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <!-- Javascript -->
 <script>
 $(function() {
   $( "#datepicker7" ).datepicker();
   $( "#datepicker7" ).datepicker("setDate", "6w+2");
 });
 </script>
 </head>
 <body>
 <!-- HTML --> 
 <p>Enter Date: <input type="text" id="datepicker7"></p>
 </body>
</html>

 

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :
Email – [email protected]
Mobile No. – 09305235027 – tnt

Leave a Comment