jQuery : Datepickers

Submitted by janobe on Thursday, July 7, 2016 - 16:34.

In jQuery, datepickers() allow the user to customize the date format and language. It also has the ability to easily restrict the selectable date ranges which users may find it very convenient. Datepicker is an interactive calendar on a small overlay and on the input, it's either you click or use the tab key when choosing a date. The jQuery contains methods that generates a date picker that changes the looks of HTML elements on a web page. Syntax: You can use datepicker() method in two ways:

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

Description: selector – can be used with an class, id, and name of HTML elements. options – It specifies the looks and behaviors of the date picker elements.

$(selector).datepicker (options) examples:

Defaults

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery-2.2.4.min.js"></script>
  <script src="jquery-ui.js"></script> 
  <script>
  $(function() {
    $("#datepickers" ).datepicker();
  });
  </script>
  <style type="text/css">
  input {
    height: 21px;
    font-size: 15px;
  }
  p {
    font-size: 15px;
    text-align: left;
  }
  h1{
    text-align: left;
  }
  </style>
</head>
<body>
 <h1>Date Picker Default Execution</h1>
<p>Date: <input type="text" class="input" id="datepickers"></p>
  
</body>
</html>

Alternate Date

 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker Alternate</title>
   <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/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() {
            $( "#datepickers1" ).datepicker({ 
               dateFormat:"mm / dd / yy",
               altField: "#datepickers2",
               altFormat: "DD, d MM, yy"
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type="text" id="datepickers1"></p>
      <p>Alternate Date: <input type="text" id="datepickers2"></p>
   </body>
</html>

buttonImageOnly, buttonImage, and showOn

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker buttonImage, buttonImageOnly and showOn</title>
   <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/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() {
            $( "#datepickers4" ).datepicker({
               showOn:"button",
               buttonImage: "/jqueryui/images/calendar-icon.png",
               buttonImageOnly: true
            });
         });
      </script> 
   </head>
   <body>
      <!-- HTML --> 
          <p>Enter Date: <input type="text" id="datepickers4"></p>
   </body>
</html>

defaultDate, dayNamesMin, and duration

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker </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() {
            $( "#datepickers5" ).datepicker({
               defaultDate:+9,
               dayNamesMin: [ "Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat" ],
               duration: "slow"
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type="text" id="datepickers5"></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() {
            $( "#datepickers6" ).datepicker({
               showWeek:true,
               showAnim: "slide"
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type="text" id="datepickers6"></p>
   </body>
</html>
 

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

setDate()action

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker setDate function</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() {
            $( "#datepickers7" ).datepicker();
            $( "#datepickers7" ).datepicker("setDate", "6w+1");
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type="text" id="datepickers7"></p>
   </body>
</html>

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

Add new comment

67 views