41 The following example displays simple use of the datePicker component to select a date for 42 input fields - a startDate is passed to the date picker so that you can select dates in the 43 past. 44
45 69
71$(function()
72{
73 $('.date-pick').datePicker({startDate:'01/01/1996'});
74});
75
77/* located in demo.css and creates a little calendar icon
78 * instead of a text link for "Choose date"
79 */
80a.dp-choose-date {
81 float: left;
82 width: 16px;
83 height: 16px;
84 padding: 0;
85 margin: 5px 3px 0;
86 display: block;
87 text-indent: -2000px;
88 overflow: hidden;
89 background: url(calendar.png) no-repeat;
90}
91a.dp-choose-date.dp-disabled {
92 background-position: 0 -20px;
93 cursor: default;
94}
95/* makes the input field shorter once the date picker code
96 * has run (to allow space for the calendar icon
97 */
98input.dp-applied {
99 width: 140px;
100 float: left;
101}
102 41 The following example displays simple use of the datePicker component to select a date for 42 input fields - a startDate is passed to the date picker so that you can select dates in the 43 past. 44
45 69
71$(function()
72{
73 $('.date-pick').datePicker({startDate:'01/01/1996'});
74});
75
77/* located in demo.css and creates a little calendar icon
78 * instead of a text link for "Choose date"
79 */
80a.dp-choose-date {
81 float: left;
82 width: 16px;
83 height: 16px;
84 padding: 0;
85 margin: 5px 3px 0;
86 display: block;
87 text-indent: -2000px;
88 overflow: hidden;
89 background: url(calendar.png) no-repeat;
90}
91a.dp-choose-date.dp-disabled {
92 background-position: 0 -20px;
93 cursor: default;
94}
95/* makes the input field shorter once the date picker code
96 * has run (to allow space for the calendar icon
97 */
98input.dp-applied {
99 width: 140px;
100 float: left;
101}
102 
