jQuery UI Widget : Datepicker

This page discusses - jQuery UI Widget : Datepicker

jQuery UI Widget : Datepicker


jQuery UI Widget : Datepicker

You can datepicker to your web page for inputting date. The language and date format can be customize. By default, the datepicker calendar opens in a small overlay on Focus and closes automatically on Blur or when a date is selected.

The datepicker is very useful on the website. In this example you will learn how to use jQuery datepicker component.

You can use keyboard shortcuts to drive the datepicker:

  • page up/down - previous/next month
  • ctrl+page up/down - previous/next year
  • ctrl+home - current month or open when closed
  • ctrl+left/right - previous/next day
  • ctrl+up/down - previous/next week
  • enter - accept the selected date
  • ctrl+end - close and erase the date
  • escape - close the datepicker without selection

For options, events ,method and theming click here



<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Datepicker</title>
<style type="text/css">
@import "DatePicker/flora.datepick.css";
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="DatePicker/jquery.datepick.js"></script>
<script type="text/javascript">
$(function() {

<body bgcolor="#ADFF2F">
<h1><font color="green">jQuery popup Date picker</font></h1>
<font color="green">
<p>Enter Date &nbsp;<input type="text" id="popupDatepicker"></p>

Output :

When you click inside input box :

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.

Share on Google+Share on Google+

jQuery UI Widget : Datepicker

Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles



Discuss: jQuery UI Widget : Datepicker  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
parul patel
May 25, 2011

i have use your datapicker..its gud... but i have one query in that... i cant download this css class.-->"DatePicker/flora.datepick.css"; and i want date format in dd/mm/yyyy format..then wt i have to change...pls help me its urgent...
January 19, 2013

Yes it works fine with other widgets such as caoitgrees, recent posts, recent comments, etc.But the only problem is that feeds from Smashing Magazine and Jhoy's blog are always cached as if they were cached forever. Maybe they conflicts with my Super Cache plugin.However, if my WordPress Super Cache caches the whole page, then I can conclude that it is enough already for my low bandwidth.
February 21, 2012

doesnt run after downloading y so??? :(
July 15, 2013
How do I marry this daypicker with the form below?

Instead of the "Select date", I mean. Here's the form: <?php header('Content-type: text/html; charset=utf-8'); ?> <?php session_start(); include("details.php"); function form_error($field) { if(!empty($_SESSION['form_errors'][$field])) { echo $_SESSION['form_errors'][$field]; } } ?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title><?php echo $businessname; ?> - Reservations</title> <meta http-equiv="Cache-Control" content="max-age=600" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="robots" content="noindex, nofollow, all" /> <meta name="HandheldFriendly" content="true" /> <meta name="MobileOptimized" content="width" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no" /> <link href="css/styles.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- Start Header --> <?php include("header.php"); ?> <!-- End Header --> <div style="margin: 0pt auto; max-width: 600px;"> <div id="wrapper"> <!-- Start Nav Button --> <div class="topnav"> <p><a href="./">Home&nbsp; |&nbsp; Reservations</a></p> </div> <!-- End Nav Button --> <!-- Start Content --> <div id="contentinner"> <div class="content"> <p></p> <p>To make a reservation you can phone us directly or you can submit your request using the secure online form below. All fields marked with an asterisk (*) are required.</p> <div class="form"> <form id="form1" name="form1" method="post" action="form-process.php" onsubmit="return checkSelection('form1');"> <input type="hidden" name="required" value="Full_Name,Phone" /> <input type="hidden" name="thank_you_url" value="./thank-you.php" /> <input type="hidden" name="error_url" value="./reservations.php" /> <input type="hidden" name="subject" value="Booking Request from Website" /> <!-- Start Form Fields --> <label>* Full Name: <?php form_error('Full_Name');?></label> <input name="Full_Name" type="text" class="input" /> <label>* Phone: <?php form_error('Phone');?></label> <input name="Phone" type="text" class="input" /> <label>Preferred Date: <?php form_error('Date');?></label> <select name="Date_Day" class="dropdown2"> <option value="1st">1</option> <option value="2nd">2</option> <option value="3rd">3</option> <option value="4th">4</option> <option value="5th">5</option> <option value="6th">6</option> <option value="7th">7</option> <option value="8th">8</option> <option value="9th">9</option> <option value="10th">10</option> <option value="11th">11</option> <option value="12th">12</option> <option value="13th">13</option> <option value="14th">14</option> <option value="15th">15</option> <option value="16th">16</option> <option value="17th">17</option> <option value="18th">18</option> <option value="19th">19</option> <option value="20th">20</option> <option value="21st">21</option> <option value="22nd">22</option> <option value="23rd">23</option> <option value="24th">24</option> <option value="25th">25</option> <option value="26th">26</option> <option value="27th">27</option> <option value="28th">28</option> <option value="29th">29</option> <option value="30th">30</option> <option value="31st">31</option> </select> <select name="Date_Month" class="dropdown2"> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> <label>Preferred Time: <?php form_error('Time');?></label> <select name="Time_Hour" class="dropdown2"> <option value="9am">9am</option> <option value="10am">10am</option> <option value="11am">11am</option> <option value="12pm">12pm</option> <option value="1pm">1pm</option> <option value="2pm">2pm</option> <option value="3pm">3pm</option> <option value="4pm">4pm</option> <option value="5pm">5pm</option> <option value="6pm">6pm</option> <option value="7pm">7pm</option> <option value="8pm">8pm</option> <option value="9pm">9pm</option> <option value="10pm">10pm</option> </select> <select name="Time_Minutes" class="dropdown2"> <option value=":00">:00</option> <option value=":15">:15</option> <option value=":30">:30</option> <option value=":45">:45</option> </select> <label>Number of Guests: <?php form_error('Guests');?></label> <select name="Number_of_Guests" class="dropdown"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13+">13+</option> </select> <label>Special Instructions: <?php form_error('Comments');?></label> <textarea name="Comments" cols="" rows="" class="textarea"></textarea> <!-- End Form Fields --> <input type="submit" class="button" value="Submit" /> </form> </div> <p>We always respect your privacy.</p> </div> </div> <!-- End Content --> </div><!-- wrapper --> </div><!-- margin --> <!-- Start Footer --> <?php include("footer.php"); ?> <!-- End Footer --> <!-- Start Form Popup --> <script type="text/javascript"> function checkSelection(whichform) { var x = document.form1.Phone.value; var day =document.form1.Date_Day.value; var mon =document.form1.Date_Month.value; var month=1; if(mon=='January'){ month=1; } else if(mon=='February'){ month=2; } else if(mon=='March'){ month=3; } else if(mon=='April'){ month=4; } else if(mon=='May'){ month=5; } else if(mon=='June'){ month=6; } else if(mon=='July'){ month=7; } else if(mon=='August'){ month=8; } else if(mon=='September'){ month=9; } else if(mon=='October'){ month=10; } else if(mon=='November'){ month=11; } else if(mon=='December'){ month=12; } var y='<?php $dat=date('d-m'); $date=explode("-","$dat"); echo $dy=$date[0]; ?>'; var z='<?php echo $mn=$date[1]; ?>'; var dy=day.slice(0,-2); if(month<z){alert('select valid date');} else if(month==z && dy<=y){alert('Select valid date');} if(document.forms[whichform].required.value) { var required = document.forms[whichform].required.value.split(','), errors = false; for(var i = 0; i < required.length; i++) { if(document.forms[whichform][required[i]].value == "") { errors = true; } } if(isNaN(x)|| x.indexOf(" ")!=-1){ alert("Enter numeric value"); return false; } if (errors) { alert ('Whoops! You must fill in all required fields before you can continue.'); return false; } else { return true; } } } </script> <!--<script type="text/javascript"> <!-- function checkSelection(whichform) { if(document.forms[whichform].required.value) { var required = document.forms[whichform].required.value.split(','), errors = false; for(var i = 0; i < required.length; i++) { if(document.forms[whichform][required[i]].value == "") { errors = true; } } if (errors) { alert ('Whoops! You must fill in all required fields before you can continue.'); return false; } else { return true; } } } //--> </script>--> <!-- End Form Popup --> </body> </html> <?php $_SESSION['form_errors'] = array();//reset form errors so they don't appear next time?>