ADD
1. Datepicker.css in CSS folder
2. Add
|
1 2 3 |
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" /> |
3. Add Jquery call
|
1 2 3 |
<script src="http://code.jquery.com/jquery-1.8.2.js"></script> |
4. Add UI Call
|
1 2 3 |
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> |
5. Add the class “datepicker” to the field.
This is for default of 1973, 01, 01
and show a year range of 1920 – 2013
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function() { $(function() { $( ".datepickerdob" ).datepicker({ changeMonth: true, changeYear: true, firstDay: 1, dateFormat: 'dd/mm/yy', yearRange: "1920:2013", defaultDate: new Date(1973, 01, 01) }) .focus(function() { $(".ui-datepicker-prev, .ui-datepicker-next").remove(); }); }); }); </script> |
This is default for today
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function() { $(function() { $( ".datepicker" ).datepicker({ changeMonth: true, changeYear: true, firstDay: 1, dateFormat: 'dd/mm/yy', }) .focus(function() { $(".ui-datepicker-prev, .ui-datepicker-next").remove(); }); }); }); </script> |
This is from 30 days in advance of today
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function() { $(function() { $( ".datepicker" ).datepicker({ firstDay: 1, dateFormat: 'dd/mm/yy', numberOfMonths: 2, minDate: -0, maxDate: "+29D" }); }); }); </script> |
To make it read only
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function() { $(".datepicker").attr("readOnly", true) }); </script> |
Dynamic year range
|
1 2 3 4 5 6 7 8 |
$("#restricting").datepicker({ yearRange: "-20:+0", // this is the option you're looking for showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true }); |
Disable the navigation button prev and next in datepicker (css)
|
1 2 3 4 5 6 7 |
<style type="text/css"> .ui-datepicker-prev, .ui-datepicker-next { display: none; } </style> |
