@charset "utf-8";
/* CSS Document */
/* located in demo.css and creates a little calendar icon
* instead of a text link for "Choose date"
*/
a.dp-choose-date {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px 3px 0;
display: block;
text-indent: -2000px;
overflow: hidden;
background: #F9F6F6 url(../images/calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
cursor: default;
}
/* makes the input field shorter once the date picker code
* has run (to allow space for the calendar icon
*/
input.dp-applied {
}
....loading....
Firebug's log limit has been reached. %S entries not shown. Preferences
jquery.datePicker example: simple datePicker
The following example displays simple use of the datePicker component to select a date for input fields.
Page sourcecode
$(function() { $('.date-pick').datePicker(); });
Page CSS
/* located in demo.css and creates a little calendar icon * instead of a text link for "Choose date" */ a.dp-choose-date { float: left; width: 16px; height: 16px; padding: 0; margin: 5px 3px 0; display: block; text-indent: -2000px; overflow: hidden; background: url(calendar.png) no-repeat; } a.dp-choose-date.dp-disabled { background-position: 0 -20px; cursor: default; } /* makes the input field shorter once the date picker code * has run (to allow space for the calendar icon */ input.dp-applied { width: 140px; float: left; }
Firebug's log limit has been reached. %S entries not shown. Preferences
jquery.datePicker example: simple datePicker
The following example displays simple use of the datePicker component to select a date for input fields.
Page sourcecode
$(function() { $('.date-pick').datePicker(); });
Page CSS
/* located in demo.css and creates a little calendar icon * instead of a text link for "Choose date" */ a.dp-choose-date { float: left; width: 16px; height: 16px; padding: 0; margin: 5px 3px 0; display: block; text-indent: -2000px; overflow: hidden; background: url(calendar.png) no-repeat; } a.dp-choose-date.dp-disabled { background-position: 0 -20px; cursor: default; } /* makes the input field shorter once the date picker code * has run (to allow space for the calendar icon */ input.dp-applied { width: 140px; float: left; }
Firebug's log limit has been reached. %S entries not shown. Preferences
table.jCalendar {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#AAAAAA none repeat scroll 0 0;
border:1px solid #000000;
border-collapse:separate;
border-spacing:2px;
}
table.jCalendar th {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#333333 none repeat scroll 0 0;
color:#FFFFFF;
font-weight:bold;
padding:3px 5px;
}
table.jCalendar td {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
color:#000000;
padding:3px 5px;
text-align:center;
}
table.jCalendar td.other-month {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#DDDDDD none repeat scroll 0 0;
color:#AAAAAA;
}
table.jCalendar td.today {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#666666 none repeat scroll 0 0;
color:#FFFFFF;
}
table.jCalendar td.selected {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FF6666 none repeat scroll 0 0;
color:#FFFFFF;
}
table.jCalendar td.selected.dp-hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FF3333 none repeat scroll 0 0;
color:#FFFFFF;
}
table.jCalendar td.dp-hover, table.jCalendar tr.activeWeekHover td {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
color:#000000;
}
table.jCalendar tr.selectedWeek td {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FF6666 none repeat scroll 0 0;
color:#FFFFFF;
}
table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#BBBBBB none repeat scroll 0 0;
color:#888888;
}
table.jCalendar td.unselectable, table.jCalendar td.unselectable:hover, table.jCalendar td.unselectable.dp-hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#BBBBBB none repeat scroll 0 0;
color:#888888;
}
div.dp-popup {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#F9F6F6 none repeat scroll 0 0;
font-family:arial,sans-serif;
font-size:10px;
line-height:1.2em;
padding:2px;
position:relative;
width:171px;
}
div#dp-popup {
position:absolute;
z-index:199;
}
div.dp-popup h2 {
font-size:12px;
margin:2px 0;
padding:0;
text-align:center;
}
a#dp-close {
display:block;
font-size:11px;
padding:4px 0;
text-align:center;
}
a#dp-close:hover {
text-decoration:underline;
}
div.dp-popup a {
color:#000000;
padding:3px 2px 0;
text-decoration:none;
}
div.dp-popup div.dp-nav-prev {
left:4px;
position:absolute;
top:2px;
width:100px;
}
div.dp-popup div.dp-nav-prev a {
float:left;
}
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
cursor:pointer;
}
div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {
cursor:default;
}
div.dp-popup div.dp-nav-next {
position:absolute;
right:4px;
top:2px;
width:100px;
}
div.dp-popup div.dp-nav-next a {
float:right;
}
div.dp-popup a.disabled {
color:#AAAAAA;
cursor:default;
}
div.dp-popup td {
cursor:pointer;
}
div.dp-popup td.disabled {
cursor:default;
}