Date Picker Haim Michael

Size: px

Start display at page:

Download "Date Picker Haim Michael"

Tyrone Dixon
5 years ago
Views:

1 Date Picker

2 Introduction The date picker is one of the most popular jquery widgets in use. It is highly configurable and extremely easy to implement.

3 Introduction

4 Simple Date Picker <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>date Picker Demo</title> <link type="text/css" href="css/ui-lightness/jquery-ui custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript" src="js/jquery-ui custom.min.js"></script> <script type="text/javascript"> $(function(){ $('#dateui').datepicker(); </script> </head> <body> <div id="dateui"></div> </body> </html>

5 Simple Date Picker

6 Date Picker in Form In order to have the selected date sent over the server as one of our form parameters we should create the Date Picker UI component as part of the form. Having the Date Picker UI component as part of the form can be building the Date Picker UI component on top of the <input type= text > element.

7 Date Picker in Form We can refer the <input type='text' id='dtui'> element in the following way. $(function() { $('input#dateui').datepicker();

8 Date Picker in Form <html> </html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>date Picker Demo</title> <link type="text/css" href="css/ui-lightness/jquery-ui custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript" src="js/jquery-ui custom.min.js"></script> <script type="text/javascript"> $(function(){ $('input#dateui').datepicker(); </script> </head> <body> <form action= method=post> <input type='text' id='dateui' size='40' value='' /> <input type=submit> </form> </body>

9 Date Picker in Form

10 Setting Range of Allowed Dates We can customize our Date Picker UI component to allow the user entering dates within a specific range only. $(function() { $( input#dateui ).datepicker( { mindate: new Date(2010, 0, 1), maxdate: new Date(2010, 11, 31) } );

11 Setting Range of Allowed Dates <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>date Picker Demo</title> <link type="text/css" href="css/ui-lightness/jquery-ui custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript" src="js/jquery-ui custom.min.js"></script> <script type="text/javascript"> $(function(){ $('input#dateui').datepicker( { mindate: new Date(2010, 0, 1), maxdate: new Date(2010, 11, 31) } ); </script> </head> <body> <form action= method=post> <input type='text' id='dateui' size='40' value='' /> <input type=submit> </form> </body> </html>

12 Setting Range of Allowed Dates

13 Setting Range of Allowed Dates We can alternatively use the yearrange option. $(function() { $( input#dateui ).datepicker( {yearrange: -5:+5 } ); Using yearrange option we can specify the range of year. $(function() { $( input#dateui ).datepicker( {yearrange: 2000:2010 } );

14 Date Picker Localization We can customize and localize our Date Picker UI component using various options. $(function() { $('input#dateui').datepicker ( { daynamesmin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] } ); } );

15 Date Picker Localization <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>date Picker Demo</title> <link type="text/css" href="css/ui-lightness/jquery-ui custom.css" rel="stylesheet" / <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript" src="js/jquery-ui custom.min.js"></script> <script type="text/javascript"> $(function(){ $('input#dateui').datepicker( { daynamesmin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] } ); </script> </head> <body> <form action= method=post> <input type='text' id='dateui' size='40' value='' /> <input type=submit> </form> </body> </html>

16 Date Picker Localization

17 Multiple Months We can easy set the number of displayed months and the number of months associated with each step. $(function() { $( input#dateui ).datepicker( {numberofmonths: 2, stepmonths: 2 } );

18 Multiple Months <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>date Picker Demo</title> <link type="text/css" href="css/ui-lightness/jquery-ui custom.css" rel="stylesheet" / <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript" src="js/jquery-ui custom.min.js"></script> <script type="text/javascript"> $(function(){10 $('input#dateui').datepicker( { numberofmonths: 2, stepmonths: 2 } ); </script> </head> <body> <form action= method=post> <input type='text' id='dateui' size='40' value='' /> <input type=submit> </form> </body> </html>

19 Multiple Months

20 Animated Date Picker Various options allow us to customize the animation associated with our Date Picker UI component. $(function() { $( input#dateui ).datepicker( { showanim: "drop", showoptions: { direction: "down" } } );

21 Animated Date Picker <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>date Picker Demo</title> <link type="text/css" href="css/ui-lightness/jquery-ui custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript" src="js/jquery-ui custom.min.js"></script> <script type="text/javascript"> $(function(){ $('input#dateui').datepicker( { showanim: "drop",showoptions: { direction: "down" } } ); </script> </head> <body> <form action= method=post> <input type='text' id='dateui' size='40' value='' /> <input type=submit> </form> </body> </html>

22 Animated Date Picker

File: C:\xampp\htdocs\mogul\HTML\bootstrap.html 11-Sep-15, 9:56:49 9 AM

$File: C:\xampp\htdocs\mogul\HTML\bootstrap.html 11-Sep-15, 9:56:49 9 AM$