JQuery

JQueryUI - Day 8 (Datepicker)

Before reading this article, I highly recommend reading the previous part of the series:

Datepickers in jQueryUI allow users to select a date from a popup or inline calendar. We can customize the date format and language. We can apply several types of restrictions. Input type elements are used for datepicker and the datepicker calendar opens in a small overlay when the associated text field gains focus.

Syntax

$(selector, context).datepicker(options)
Or
$(selector, context).datepicker("action", [params])

Let us take a simple datepicker example.

  1. <!DOCTYPE html>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.   
  10.                 <script>  
  11.                     $(document).ready(function()   
  12.                      {  
  13.   
  14.                         $("#datepicker-1").datepicker();  
  15.                     });  
  16.                 </script>  
  17.                 <style>  
  18.                     #datepicker-1  
  19.                 {  
  20.                         margin-top: 20px;  
  21.                     }  
  22.                      
  23.                     #div1  
  24.                     {  
  25.                         background-color: coral;  
  26.                         color: ButtonHighlight;  
  27.                         font-size: 30px;  
  28.                         height: 450px;  
  29.                         width: 1000px;  
  30.                         text-align: center;  
  31.                         margin-left: 150px  
  32.                     }  
  33.                 </style>  
  34.                 </head>  
  35.   
  36.   
  37.                 <body>  
  38.                     <divid="div1">  
  39.                         <span>************Date-Picker*************</span>  
  40.                         <divclass="ui-widget">  
  41.   
  42.                             <inputtype="text" id="datepicker-1" />  
  43.   
  44.                             </div>  
  45.                             </div>  
  46.                 </body>  
  47.   
  48.                 </html>  
Example

example

Options

 

Option

Description

Example

autoSize

If set to true automatically resize the input field to accommodate dates

$("#datepicker-1").datepicker({

autoSize: true

});

buttonImage

Define URL of an image to use to display the datepicker when the showOn is set to “button” or “both”

$("#datepicker-1").datepicker({

showOn:"button",

buttonImage: "/jquery-ui-1.11.4.custom/images/datepicker.gif"

});

buttonText

Define text to display on the trigger button.

$("#datepicker-1").datepicker({

showOn:"button",

buttonImage: "/jquery-ui-1.11.4.custom/images/datepicker.gif",

buttonText: "Select"

});

changeMonth

Define whether the month should be rendered as a dropdown instead of text.

$("#datepicker-1").datepicker({

changeMonth: true

});

changeYear

Define whether the year should be rendered as a dropdown instead of text.

$("#datepicker-1").datepicker({

changeYear: true

});

currentText

Define text to display for the current day link.

$("#datepicker-1").datepicker({

currentText: "Now"

});

dateFormat

Define the format for parsed and displayed dates.

$("#datepicker-1").datepicker({

dateFormat: "yy-dd--mm"

});

defaultDate

Define initial date for the control, overriding the default value of today.

$("#datepicker-1").datepicker({

defaultDate: +7

});

firstDay

Define the first day of week. 0 for Sunday and 6 for Saturday

$("#datepicker-1").datepicker({

firstDay: 3

});

isRTL

Define whether the current language is drawn from right to left.

$("#datepicker-1").datepicker({

isRTL: true

});

maxDate

Define the maximum selectable date.

$("#datepicker-1").datepicker({

maxDate: "+1m +2w"

});

minDate

Define the minimum selectable date.

$("#datepicker-1").datepicker({

minDate: "-1m -2w"

});

nextText

Define text to display for the next month link.

$("#datepicker-1").datepicker({

nextText: "Next Month"

});

numberOfMonths

Define The number of months to show at once.

$("#datepicker-1").datepicker({

numberOfMonths: 3

});

prevText

Define text to display for the previous month link.

$("#datepicker-1").datepicker({

prevText: "Prev Month"

});

showAnim

Define the name of the animation used to show and hide the datepicker.

$("#datepicker-1").datepicker({

showAnim: "fold"

});

showButtonPanel

Define whether to display a button pane in the calendar. The button pane contains two buttons, a Today button that links to the current day, and a Done button that closes the datepicker.

$("#datepicker-1").datepicker({

showButtonPanel: true

});

showCurrentAtPos

Define the position the current month if multiple month are defined by numberOfMonths.

$("#datepicker-1").datepicker({

showCurrentAtPos: 2

});

showMonthAfterYear

Define whether to show the month after the year in the header.

$("#datepicker-1").datepicker({

showMonthAfterYear: true

});

 
showOtherMonths

Define whether to display dates in other months (non-selectable) at the start or end of the current month.

$("#datepicker-1").datepicker({

showOtherMonths: true

});

 
showWeek

If set to true ,a column is added to show the week of the year.

$("#datepicker-1").datepicker({

showWeek: true

});

 
yearRange

Define the range of years displayed in the year drop-down.

$("#datepicker-1").datepicker({

yearRange: "2010-2020"

});

 
yearSuffix

Define the additional text to display after the year in the month headers.

$("#datepicker-1").datepicker({

yearSuffix: " Year"

});

Methods

Method

Description

Example

destroy()

Removes the datepicker functionality completely.

$("#datepicker-1").datepicker("destroy");

dialog( date [, onSelect ] [, settings ] [, pos ] )

Opens the datepicker in a dialog box.

$("#datepicker-1").datepicker("dialog","10/08/2011");

getDate()

Returns the current date for the datepicker or null if no date has been selected.

varobj = $("#datepicker-1").datepicker("getDate");

hide()

Close a previously opened date picker.

$("#datepicker-1").datepicker("hide");

isDisabled()

Determine whether a date picker has been disabled.

varobj= $("#datepicker-1").datepicker("isDisabled");

referesh()

Refresh the date picker, after having made some external modifications.

$("#datepicker-1").datepicker("refresh");

setDate(date)

Sets the date for the datepicker.

$("#datepicker-1").datepicker("setDate","10/08/2014");

show()

Open the date picker.

$("#datepicker-1").datepicker("show");

widget()

Return jQuery object containing the datepicker.

varobj = $("#datepicker-1").datepicker("widget");

Example 1

  1. <!DOCTYPE html>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.   
  10.                 <script>  
  11.                     $(document).ready(function()  
  12.                      {  
  13.   
  14.                         $("#ui-datepicker-year").datepicker(  
  15.                           {  
  16.                             autoSize: true,  
  17.                             showOn: "button",  
  18.                             buttonImage: "/jquery-ui-1.11.4.custom/images/datepicker.gif",  
  19.                             changeMonth: true  
  20.                         });  
  21.                     });  
  22.                 </script>  
  23.                 <style>  
  24.                     #datepicker-1  
  25.                 {  
  26.                         margin-top: 20px;  
  27.                     }  
  28.                      
  29.                     #div1   
  30.                     {  
  31.                         background-color: coral;  
  32.                         color: ButtonHighlight;  
  33.                         font-size: 30px;  
  34.                         height: 450px;  
  35.                         width: 1000px;  
  36.                         text-align: center;  
  37.                         margin-left: 150px  
  38.                     }  
  39.                 </style>  
  40.                 </head>  
  41.   
  42.   
  43.                 <body>  
  44.                     <divid="div1">  
  45.                         <span>************Date-Picker*************</span>  
  46.                         <divclass="ui-widget">  
  47.   
  48.                             <inputtype="text" id="ui-datepicker-year" />  
  49.   
  50.                             </div>  
  51.                             </div>  
  52.                 </body>  
  53.   
  54.                 </html>  
Output

output

In this example we define autoSize property to “true” that means size of input will change automatically. We define the image for button and assigned a dropdown list for month.

Example 2
  1. <!DOCTYPE html>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.   
  10.                 <script>  
  11.                     $(document).ready(function()   
  12.                        {  
  13.   
  14.                         $("#ui-datepicker-year").datepicker  
  15.                         ({  
  16.                             showOn: "button",  
  17.                             buttonText: "Choose",  
  18.                             dateFormat: "yy-mm-dd",  
  19.                             dayNames: ["Ravivar", "Somwar", "Mangalvar", "Budhvar", "Guruvar", "Sukarvar", "Sanivar"]  
  20.                         });  
  21.                     });  
  22.                 </script>  
  23.                 <style>  
  24.                     #datepicker-1   
  25.                 {  
  26.                         margin-top: 20px;  
  27.                     }  
  28.                      
  29.                     #div1   
  30.                     {  
  31.                         background-color: coral;  
  32.                         color: ButtonHighlight;  
  33.                         font-size: 30px;  
  34.                         height: 450px;  
  35.                         width: 1000px;  
  36.                         text-align: center;  
  37.                         margin-left: 150px  
  38.                     }  
  39.                 </style>  
  40.                 </head>  
  41.   
  42.   
  43.                 <body>  
  44.                     <divid="div1">  
  45.                         <span>************Date-Picker*************</span>  
  46.                         <divclass="ui-widget">  
  47.   
  48.                             <inputtype="text" id="ui-datepicker-year" />  
  49.   
  50.                             </div>  
  51.                             </div>  
  52.                 </body>  
  53.   
  54.                 </html>  
Output

output1

In this example we define the text for button and define the format of date. At last we define list of long day names, starting from Sunday.

Example 3
  1. <!DOCTYPE html>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.   
  10.                 <script>  
  11.                     $(document).ready(function()  
  12.                         {  
  13.   
  14.                         $("#ui-datepicker-year").datepicker  
  15.                         ({  
  16.                             dayNamesMin: ["RA", "SO", "MA", "BU", "GU", "SU", "SN"],  
  17.                             defaultDate: +4,  
  18.                             firstDay: 3,  
  19.                             isRTL: true  
  20.                         });  
  21.                     });  
  22.                 </script>  
  23.                 <style>  
  24.                     #datepicker-1   
  25.                 {  
  26.                         margin-top: 20px;  
  27.                     }  
  28.                      
  29.                     #div1   
  30.                     {  
  31.                         background-color: coral;  
  32.                         color: ButtonHighlight;  
  33.                         font-size: 30px;  
  34.                         height: 450px;  
  35.                         width: 1000px;  
  36.                         text-align: center;  
  37.                         margin-left: 150px  
  38.                     }  
  39.                 </style>  
  40.                 </head>  
  41.   
  42.   
  43.                 <body>  
  44.                     <div id="div1">  
  45.                         <span>************Date-Picker*************</span>  
  46.                         <div class="ui-widget">  
  47.   
  48.                             <input type="text" id="ui-datepicker-year" />  
  49.   
  50.                             </div>  
  51.                             </div>  
  52.                 </body>  
  53.   
  54.                 </html>  
Output

output

In above example we defined the names for dayNamesMin and define the default day. We selected Tuesday as the starting day of week.

Example 4
  1. <!DOCTYPE html>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.   
  10.                 <script>  
  11.                     $(document).ready(function()  
  12.                        {  
  13.   
  14.                         $("#ui-datepicker-year").datepicker  
  15.                         ({  
  16.                             maxDate: "+1m +2w",  
  17.                             minDate: "-1m -2w",  
  18.                             numberOfMonths: [2, 2],  
  19.                             showAnim: "fold",  
  20.                             showButtonPanel: true,  
  21.                             showOtherMonths: true,  
  22.                             showWeek: true,  
  23.   
  24.                         });  
  25.                     });  
  26.                 </script>  
  27.                 <style>  
  28.                     #datepicker-1   
  29.                 {  
  30.                         margin-top: 20px;  
  31.                     }  
  32.                      
  33.                     #div1  
  34.                     {  
  35.                         background-color: coral;  
  36.                         color: ButtonHighlight;  
  37.                         font-size: 30px;  
  38.                         height: 450px;  
  39.                         width: 1000px;  
  40.                         text-align: center;  
  41.                         margin-left: 150px  
  42.                     }  
  43.                 </style>  
  44.                 </head>  
  45.   
  46.   
  47.                 <body>  
  48.                     <div id="div1">  
  49.                         <span>************Date-Picker*************</span>  
  50.                         <div class="ui-widget">  
  51.   
  52.                             <input type="text" id="ui-datepicker-year" />  
  53.   
  54.                             </div>  
  55.                             </div>  
  56.                 </body>  
  57.   
  58.                 </html>  
Output

output

In above example we define maximum date and minimum date for the current date. We define array for month that is showing four months at a time. We set true for showWeek option, so we can see that each month is showing the index number week.

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs