application hebdo

This commit is contained in:
Pierre Cros 2015-01-27 17:01:38 +01:00
commit 2ce2c4097d
282 changed files with 119520 additions and 0 deletions

BIN
css/Museo500-Regular.otf Normal file

Binary file not shown.

BIN
css/images/logo-html5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 230 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 342 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 316 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 275 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 347 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

1225
css/jquery-ui.css vendored Normal file

File diff suppressed because it is too large Load Diff

7
css/jquery-ui.min.css vendored Normal file

File diff suppressed because one or more lines are too long

833
css/jquery-ui.structure.css vendored Normal file
View File

@ -0,0 +1,833 @@
/*!
* jQuery UI CSS Framework 1.11.2
* http://jqueryui.com
*
* Copyright 2014 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
* http://api.jqueryui.com/category/theming/
*/
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
content: "";
display: table;
border-collapse: collapse;
}
.ui-helper-clearfix:after {
clear: both;
}
.ui-helper-clearfix {
min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
filter:Alpha(Opacity=0); /* support: IE8 */
}
.ui-front {
z-index: 100;
}
/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
cursor: default !important;
}
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
}
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-draggable-handle {
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
.ui-selectable {
-ms-touch-action: none;
touch-action: none;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
.ui-sortable-handle {
-ms-touch-action: none;
touch-action: none;
}
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin: 2px 0 0 0;
padding: .5em .5em .5em .7em;
min-height: 0; /* support: IE7 */
font-size: 100%;
}
.ui-accordion .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
}
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
}
.ui-button {
display: inline-block;
position: relative;
padding: 0;
line-height: normal;
margin-right: .1em;
cursor: pointer;
vertical-align: middle;
text-align: center;
overflow: visible; /* removes extra width in IE */
}
.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
text-decoration: none;
}
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
width: 2.2em;
}
/* button elements seem to need a little more width */
button.ui-button-icon-only {
width: 2.4em;
}
.ui-button-icons-only {
width: 3.4em;
}
button.ui-button-icons-only {
width: 3.7em;
}
/* button text element */
.ui-button .ui-button-text {
display: block;
line-height: normal;
}
.ui-button-text-only .ui-button-text {
padding: .4em 1em;
}
.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
padding: .4em;
text-indent: -9999999px;
}
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
padding: .4em 1em .4em 2.1em;
}
.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
padding: .4em 2.1em .4em 1em;
}
.ui-button-text-icons .ui-button-text {
padding-left: 2.1em;
padding-right: 2.1em;
}
/* no icon support for input elements, provide padding by default */
input.ui-button {
padding: .4em 1em;
}
/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
position: absolute;
top: 50%;
margin-top: -8px;
}
.ui-button-icon-only .ui-icon {
left: 50%;
margin-left: -8px;
}
.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
left: .5em;
}
.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
right: .5em;
}
/* button sets */
.ui-buttonset {
margin-right: 7px;
}
.ui-buttonset .ui-button {
margin-left: 0;
margin-right: -.3em;
}
/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
border: 0;
padding: 0;
}
.ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none;
}
.ui-datepicker .ui-datepicker-header {
position: relative;
padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
position: absolute;
top: 2px;
width: 1.8em;
height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
left: 2px;
}
.ui-datepicker .ui-datepicker-next {
right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
top: 50%;
margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
margin: 0 2.3em;
line-height: 1.8em;
text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
font-size: 1em;
margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
width: 45%;
}
.ui-datepicker table {
width: 100%;
font-size: .9em;
border-collapse: collapse;
margin: 0 0 .4em;
}
.ui-datepicker th {
padding: .7em .3em;
text-align: center;
font-weight: bold;
border: 0;
}
.ui-datepicker td {
border: 0;
padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
display: block;
padding: .2em;
text-align: right;
text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
background-image: none;
margin: .7em 0 0 0;
padding: 0 .2em;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
float: right;
margin: .5em .2em .4em;
cursor: pointer;
padding: .2em .6em .3em .6em;
width: auto;
overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
float: left;
}
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
width: 95%;
margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
clear: left;
}
.ui-datepicker-row-break {
clear: both;
width: 100%;
font-size: 0;
}
/* RTL support */
.ui-datepicker-rtl {
direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
right: 2px;
left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
left: 2px;
right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
right: 1px;
left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
left: 1px;
right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
border-right-width: 0;
border-left-width: 1px;
}
.ui-dialog {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
padding: .2em;
outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
padding: .4em 1em;
position: relative;
}
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 20px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
}
.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
text-align: left;
border-width: 1px 0 0 0;
background-image: none;
margin-top: .5em;
padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
margin: .5em .4em .5em 0;
cursor: pointer;
}
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
cursor: move;
}
.ui-menu {
list-style: none;
padding: 0;
margin: 0;
display: block;
outline: none;
}
.ui-menu .ui-menu {
position: absolute;
}
.ui-menu .ui-menu-item {
position: relative;
margin: 0;
padding: 3px 1em 3px .4em;
cursor: pointer;
min-height: 0; /* support: IE7 */
/* support: IE10, see #8844 */
list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-divider {
margin: 5px 0;
height: 0;
font-size: 0;
line-height: 0;
border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
margin: -1px;
}
/* icon support */
.ui-menu-icons {
position: relative;
}
.ui-menu-icons .ui-menu-item {
padding-left: 2em;
}
/* left-aligned */
.ui-menu .ui-icon {
position: absolute;
top: 0;
bottom: 0;
left: .2em;
margin: auto 0;
}
/* right-aligned */
.ui-menu .ui-menu-icon {
left: auto;
right: 0;
}
.ui-progressbar {
height: 2em;
text-align: left;
overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
margin: -1px;
height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
height: 100%;
filter: alpha(opacity=25); /* support: IE8 */
opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
background-image: none;
}
.ui-selectmenu-menu {
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
display: none;
}
.ui-selectmenu-menu .ui-menu {
overflow: auto;
/* Support: IE7 */
overflow-x: hidden;
padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
font-size: 1em;
font-weight: bold;
line-height: 1.5;
padding: 2px 0.4em;
margin: 0.5em 0 0 0;
height: auto;
border: 0;
}
.ui-selectmenu-open {
display: block;
}
.ui-selectmenu-button {
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
cursor: pointer;
}
.ui-selectmenu-button span.ui-icon {
right: 0.5em;
left: auto;
margin-top: -8px;
position: absolute;
top: 50%;
}
.ui-selectmenu-button span.ui-selectmenu-text {
text-align: left;
padding: 0.4em 2.1em 0.4em 1em;
display: block;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
-ms-touch-action: none;
touch-action: none;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
}
/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
filter: inherit;
}
.ui-slider-horizontal {
height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
top: -.3em;
margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
.ui-slider-vertical {
width: .8em;
height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
top: 0;
}
.ui-spinner {
position: relative;
display: inline-block;
overflow: hidden;
padding: 0;
vertical-align: middle;
}
.ui-spinner-input {
border: none;
background: none;
color: inherit;
padding: 0;
margin: .2em 0;
vertical-align: middle;
margin-left: .4em;
margin-right: 22px;
}
.ui-spinner-button {
width: 16px;
height: 50%;
font-size: .5em;
padding: 0;
margin: 0;
text-align: center;
position: absolute;
cursor: default;
display: block;
overflow: hidden;
right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
border-top: none;
border-bottom: none;
border-right: none;
}
/* vertically center icon */
.ui-spinner .ui-icon {
position: absolute;
margin-top: -8px;
top: 50%;
left: 0;
}
.ui-spinner-up {
top: 0;
}
.ui-spinner-down {
bottom: 0;
}
/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
/* need to fix icons sprite */
background-position: -65px -16px;
}
.ui-tabs {
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
padding: .2em;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px .2em 0 0;
border-bottom-width: 0;
padding: 0;
white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float: left;
padding: .5em 1em;
text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
}
.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
border-width: 2px;
}

5
css/jquery-ui.structure.min.css vendored Normal file

File diff suppressed because one or more lines are too long

410
css/jquery-ui.theme.css vendored Normal file
View File

@ -0,0 +1,410 @@
/*!
* jQuery UI CSS Framework 1.11.2
* http://jqueryui.com
*
* Copyright 2014 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
* http://api.jqueryui.com/category/theming/
*
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=droid%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=%23333333&bgTextureHeader=gloss_wave&bgImgOpacityHeader=25&borderColorHeader=%23333333&fcHeader=%23ffffff&iconColorHeader=%23ffffff&bgColorContent=%23000000&bgTextureContent=inset_soft&bgImgOpacityContent=25&borderColorContent=%23666666&fcContent=%23ffffff&iconColorContent=%23cccccc&bgColorDefault=%23555555&bgTextureDefault=glass&bgImgOpacityDefault=20&borderColorDefault=%23666666&fcDefault=%23eeeeee&iconColorDefault=%23cccccc&bgColorHover=%230078a3&bgTextureHover=glass&bgImgOpacityHover=40&borderColorHover=%2359b4d4&fcHover=%23ffffff&iconColorHover=%23ffffff&bgColorActive=%23E0007A&bgTextureActive=inset_soft&bgImgOpacityActive=30&borderColorActive=%23E0007A&fcActive=%23ffffff&iconColorActive=%23222222&bgColorHighlight=%23eeeeee&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=80&borderColorHighlight=%23cccccc&fcHighlight=%232e7db2&iconColorHighlight=%234b8e0b&bgColorError=%23ffc73d&bgTextureError=glass&bgImgOpacityError=40&borderColorError=%23ffb73d&fcError=%23111111&iconColorError=%23a83300&bgColorOverlay=%235c5c5c&bgTextureOverlay=flat&bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=%23cccccc&bgTextureShadow=flat&bgImgOpacityShadow=30&opacityShadow=60&thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&cornerRadiusShadow=8px&tr%26ffDefault=Helvetica%2CArial%2Csans-serif
*/
/* Component containers
----------------------------------*/
.ui-widget {
font-family: droid,Arial,sans-serif;
font-size: 1.1em;
}
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-family: droid,Arial,sans-serif;
font-size: 1em;
}
.ui-widget-content {
border: 1px solid #666666;
background: #000000 url("images/ui-bg_inset-soft_25_000000_1x100.png") 50% bottom repeat-x;
color: #ffffff;
}
.ui-widget-content a {
color: #ffffff;
}
.ui-widget-header {
border: 1px solid #333333;
background: #333333 url("images/ui-bg_gloss-wave_25_333333_500x100.png") 50% 50% repeat-x;
color: #ffffff;
font-weight: bold;
}
.ui-widget-header a {
color: #ffffff;
}
/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #666666;
background: #555555 url("images/ui-bg_glass_20_555555_1x400.png") 50% 50% repeat-x;
font-weight: bold;
color: #eeeeee;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
color: #eeeeee;
text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border: 1px solid #59b4d4;
background: #0078a3 url("images/ui-bg_glass_40_0078a3_1x400.png") 50% 50% repeat-x;
font-weight: bold;
color: #ffffff;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
color: #ffffff;
text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #E0007A;
background: #E0007A url("images/ui-bg_inset-soft_30_E0007A_1x100.png") 50% 50% repeat-x;
font-weight: bold;
color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
color: #ffffff;
text-decoration: none;
}
/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid #cccccc;
background: #eeeeee url("images/ui-bg_highlight-soft_80_eeeeee_1x100.png") 50% top repeat-x;
color: #2e7db2;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
color: #2e7db2;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
border: 1px solid #ffb73d;
background: #ffc73d url("images/ui-bg_glass_40_ffc73d_1x400.png") 50% 50% repeat-x;
color: #111111;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
color: #111111;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
color: #111111;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
opacity: .7;
filter:Alpha(Opacity=70); /* support: IE8 */
font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
opacity: .35;
filter:Alpha(Opacity=35); /* support: IE8 */
background-image: none;
}
.ui-state-disabled .ui-icon {
filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
}
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
width: 16px;
height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
background-image: url("images/ui-icons_cccccc_256x240.png");
}
.ui-widget-header .ui-icon {
background-image: url("images/ui-icons_ffffff_256x240.png");
}
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_cccccc_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
background-image: url("images/ui-icons_ffffff_256x240.png");
}
.ui-state-active .ui-icon {
background-image: url("images/ui-icons_222222_256x240.png");
}
.ui-state-highlight .ui-icon {
background-image: url("images/ui-icons_4b8e0b_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url("images/ui-icons_a83300_256x240.png");
}
/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius: 6px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius: 6px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 6px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: 6px;
}
/* Overlays */
.ui-widget-overlay {
background: #5c5c5c url("images/ui-bg_flat_50_5c5c5c_40x100.png") 50% 50% repeat-x;
opacity: .8;
filter: Alpha(Opacity=80); /* support: IE8 */
}
.ui-widget-shadow {
margin: -7px 0 0 -7px;
padding: 7px;
background: #cccccc url("images/ui-bg_flat_30_cccccc_40x100.png") 50% 50% repeat-x;
opacity: .6;
filter: Alpha(Opacity=60); /* support: IE8 */
border-radius: 8px;
}

5
css/jquery-ui.theme.min.css vendored Normal file

File diff suppressed because one or more lines are too long

114
css/styles.css Normal file
View File

@ -0,0 +1,114 @@
@font-face {
font-family: 'Museo500';
src: url(Museo500-Regular.otf);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MuseoSlab';
src: url(Museo_Slab.otf);
font-weight: normal;
font-style: normal;
}
html, body {
font-family: arial, sans-serif;
color: black;
font-size: 1.15em;
margin: 0;
}
h1 {
font-family: Museo500, sans-serif;
text-align: center;
background-color: #E0007A;
padding: 0.3em;
}
#gauche{
display: inline-block;
}
#droite{
float: right;
background-color: black;
padding: 0.2em;
margin : 0;
margin-right: 0.5em;
color: white;
}
button {
margin: 0.5em
}
#gauche>p {
background-color: black;
color:white;
padding: 0.2em;
margin:0;
margin-left: 0.5em;
}
ul {
list-style: none outside none;
margin: 0;
margin-left: 0.5em;
padding: 0.2em;
margin-top: 0.2em;
}
li {
background-color: black;
padding: 0.2em;
margin-top: 0.2em;
}
li>div {
margin-top: 1em;
margin-right: 1em;
position: absolute;
/* margin-left: -1.3em;*/
}
li>input{
display: inline-block;
margin: 0.8em;
}
#mois{
font-family: Museo500, sans-serif;
margin-left: 12em;
}
#generer {
float: right;
margin-top: 1em;
}
#libelles{
font-family: Museo500, sans-serif;
display: inline-block;
width: 12em;
margin-left: 0.2em;
}
#mois>div{
display: inline-block;
text-align: center;
margin: 0.1em;
/* width: 3.8em;*/
}
#barre{
background-color: #E0007A;
display: inline-block;
}
/*footer {*/
/* text-align: right;*/
/* margin-right: 0.2em;*/
/*}*/

BIN
images/logo-html5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 230 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 342 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 316 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 275 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 347 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

55
index.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" media="screen" href="css/styles.css" type="text/css"/>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/jquery-ui.theme.css">
<link rel="stylesheet" href="css/jquery-ui.structure.css">
<script src="js/jquery-2.1.1.js" type="text/javascript"/></script>
<script src="js/jquery-ui-1.11.2/jquery-ui.js" type="text/javascript"/></script>
<script src="js/script.js" type="text/javascript"/></script>
<title id="titre">Planning</title>
</head>
<body>
<h1>Planning</h1>
<section id="gauche">
<p class="ui-widget ui-state-default ui-corner-all">Libellé de la tâche / Nombre de semaines</p>
<ul>
<li id="1" class="ui-state-default ui-widget ui-corner-all">
<div class="ui-icon ui-icon-arrowthick-2-n-s"></div>
<input type="text" />
<input class="nbre" size="2" type="text" />
<button class="ui-button ui-corner-all ui-button-text-only ui-button-text moins"><span class="ui-button-text">-</span></button>
</li>
</ul>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text"><span class="ui-button-text">+</span></button>
</section>
<section id="droite" class="ui-widget ui-state-default ui-corner-all">
<div>Date de début : <input type="text" id="calendrier"></div>
<div id="generer">
<button class="ui-button ui-corner-all ui-button-text-only ui-button-text"><span class="ui-button-text">Générer le gantt</span></button>
</div>
</section>
<hr>
<section id="bas">
<p id ="mois"></p>
<p id ="lignes"></p>
</div>
</section>
<!--<footer>-->
<!-- <a href="">CSV </a>|-->
<!-- <a href="">PNG</a>-->
<!--</footer>-->
</body>
</html>

9190
js/jquery-2.1.1.js vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 457 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 351 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 301 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 387 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 317 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

@ -0,0 +1,513 @@
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="jquery-ui.css" rel="stylesheet">
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
select {
width: 200px;
}
</style>
</head>
<body>
<h1>Welcome to jQuery UI!</h1>
<div class="ui-widget">
<p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using them with a compatible jQuery version.</p>
</div>
<h1>YOUR COMPONENTS:</h1>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<!-- Autocomplete -->
<h2 class="demoHeaders">Autocomplete</h2>
<div>
<input id="autocomplete" title="type &quot;a&quot;">
</div>
<!-- Button -->
<h2 class="demoHeaders">Button</h2>
<button id="button">A button element</button>
<form style="margin-top: 1em;">
<div id="radioset">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
<h2 class="demoHeaders">Dialog</h2>
<p><a href="#" id="dialog-link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
<div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;" class="fakewindowcontain">
<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>
<!-- ui-dialog -->
<div class="ui-overlay"><div class="ui-widget-overlay"></div><div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div></div>
<div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
<div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h2 class="demoHeaders">Framework Icons (content color preview)</h2>
<ul id="icons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
</ul>
<!-- Slider -->
<h2 class="demoHeaders">Slider</h2>
<div id="slider"></div>
<!-- Datepicker -->
<h2 class="demoHeaders">Datepicker</h2>
<div id="datepicker"></div>
<!-- Progressbar -->
<h2 class="demoHeaders">Progressbar</h2>
<div id="progressbar"></div>
<!-- Progressbar -->
<h2 class="demoHeaders">Selectmenu</h2>
<select id="selectmenu">
<option>Slower</option>
<option>Slow</option>
<option selected="selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
</select>
<!-- Spinner -->
<h2 class="demoHeaders">Spinner</h2>
<input id="spinner">
<!-- Menu -->
<h2 class="demoHeaders">Menu</h2>
<ul style="width:100px;" id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
<li>Item 3-3</li>
<li>Item 3-4</li>
<li>Item 3-5</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<!-- Tooltip -->
<h2 class="demoHeaders">Tooltip</h2>
<p id="tooltip">
<a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
</p>
<!-- Highlight / Error -->
<h2 class="demoHeaders">Highlight / Error</h2>
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p>
</div>
</div>
<br>
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong> Sample ui-state-error style.</p>
</div>
</div>
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( "#accordion" ).accordion();
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#autocomplete" ).autocomplete({
source: availableTags
});
$( "#button" ).button();
$( "#radioset" ).buttonset();
$( "#tabs" ).tabs();
$( "#dialog" ).dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
$( "#dialog" ).dialog( "open" );
event.preventDefault();
});
$( "#datepicker" ).datepicker({
inline: true
});
$( "#slider" ).slider({
range: true,
values: [ 17, 67 ]
});
$( "#progressbar" ).progressbar({
value: 20
});
$( "#spinner" ).spinner();
$( "#menu" ).menu();
$( "#tooltip" ).tooltip();
$( "#selectmenu" ).selectmenu();
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
</script>
</body>
</html>

1225
js/jquery-ui-1.11.2/jquery-ui.css vendored Normal file

File diff suppressed because it is too large Load Diff

16582
js/jquery-ui-1.11.2/jquery-ui.js vendored Normal file

File diff suppressed because it is too large Load Diff

7
js/jquery-ui-1.11.2/jquery-ui.min.css vendored Normal file

File diff suppressed because one or more lines are too long

13
js/jquery-ui-1.11.2/jquery-ui.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,833 @@
/*!
* jQuery UI CSS Framework 1.11.2
* http://jqueryui.com
*
* Copyright 2014 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
* http://api.jqueryui.com/category/theming/
*/
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
content: "";
display: table;
border-collapse: collapse;
}
.ui-helper-clearfix:after {
clear: both;
}
.ui-helper-clearfix {
min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
filter:Alpha(Opacity=0); /* support: IE8 */
}
.ui-front {
z-index: 100;
}
/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
cursor: default !important;
}
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
}
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin: 2px 0 0 0;
padding: .5em .5em .5em .7em;
min-height: 0; /* support: IE7 */
font-size: 100%;
}
.ui-accordion .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
}
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
}
.ui-button {
display: inline-block;
position: relative;
padding: 0;
line-height: normal;
margin-right: .1em;
cursor: pointer;
vertical-align: middle;
text-align: center;
overflow: visible; /* removes extra width in IE */
}
.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
text-decoration: none;
}
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
width: 2.2em;
}
/* button elements seem to need a little more width */
button.ui-button-icon-only {
width: 2.4em;
}
.ui-button-icons-only {
width: 3.4em;
}
button.ui-button-icons-only {
width: 3.7em;
}
/* button text element */
.ui-button .ui-button-text {
display: block;
line-height: normal;
}
.ui-button-text-only .ui-button-text {
padding: .4em 1em;
}
.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
padding: .4em;
text-indent: -9999999px;
}
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
padding: .4em 1em .4em 2.1em;
}
.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
padding: .4em 2.1em .4em 1em;
}
.ui-button-text-icons .ui-button-text {
padding-left: 2.1em;
padding-right: 2.1em;
}
/* no icon support for input elements, provide padding by default */
input.ui-button {
padding: .4em 1em;
}
/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
position: absolute;
top: 50%;
margin-top: -8px;
}
.ui-button-icon-only .ui-icon {
left: 50%;
margin-left: -8px;
}
.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
left: .5em;
}
.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
right: .5em;
}
/* button sets */
.ui-buttonset {
margin-right: 7px;
}
.ui-buttonset .ui-button {
margin-left: 0;
margin-right: -.3em;
}
/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
border: 0;
padding: 0;
}
.ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none;
}
.ui-datepicker .ui-datepicker-header {
position: relative;
padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
position: absolute;
top: 2px;
width: 1.8em;
height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
left: 2px;
}
.ui-datepicker .ui-datepicker-next {
right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
top: 50%;
margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
margin: 0 2.3em;
line-height: 1.8em;
text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
font-size: 1em;
margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
width: 45%;
}
.ui-datepicker table {
width: 100%;
font-size: .9em;
border-collapse: collapse;
margin: 0 0 .4em;
}
.ui-datepicker th {
padding: .7em .3em;
text-align: center;
font-weight: bold;
border: 0;
}
.ui-datepicker td {
border: 0;
padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
display: block;
padding: .2em;
text-align: right;
text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
background-image: none;
margin: .7em 0 0 0;
padding: 0 .2em;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
float: right;
margin: .5em .2em .4em;
cursor: pointer;
padding: .2em .6em .3em .6em;
width: auto;
overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
float: left;
}
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
width: 95%;
margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
clear: left;
}
.ui-datepicker-row-break {
clear: both;
width: 100%;
font-size: 0;
}
/* RTL support */
.ui-datepicker-rtl {
direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
right: 2px;
left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
left: 2px;
right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
right: 1px;
left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
left: 1px;
right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
border-right-width: 0;
border-left-width: 1px;
}
.ui-dialog {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
padding: .2em;
outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
padding: .4em 1em;
position: relative;
}
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 20px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
}
.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
text-align: left;
border-width: 1px 0 0 0;
background-image: none;
margin-top: .5em;
padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
margin: .5em .4em .5em 0;
cursor: pointer;
}
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
cursor: move;
}
.ui-draggable-handle {
-ms-touch-action: none;
touch-action: none;
}
.ui-menu {
list-style: none;
padding: 0;
margin: 0;
display: block;
outline: none;
}
.ui-menu .ui-menu {
position: absolute;
}
.ui-menu .ui-menu-item {
position: relative;
margin: 0;
padding: 3px 1em 3px .4em;
cursor: pointer;
min-height: 0; /* support: IE7 */
/* support: IE10, see #8844 */
list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-divider {
margin: 5px 0;
height: 0;
font-size: 0;
line-height: 0;
border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
margin: -1px;
}
/* icon support */
.ui-menu-icons {
position: relative;
}
.ui-menu-icons .ui-menu-item {
padding-left: 2em;
}
/* left-aligned */
.ui-menu .ui-icon {
position: absolute;
top: 0;
bottom: 0;
left: .2em;
margin: auto 0;
}
/* right-aligned */
.ui-menu .ui-menu-icon {
left: auto;
right: 0;
}
.ui-progressbar {
height: 2em;
text-align: left;
overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
margin: -1px;
height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
height: 100%;
filter: alpha(opacity=25); /* support: IE8 */
opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
background-image: none;
}
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
.ui-selectable {
-ms-touch-action: none;
touch-action: none;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
.ui-selectmenu-menu {
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
display: none;
}
.ui-selectmenu-menu .ui-menu {
overflow: auto;
/* Support: IE7 */
overflow-x: hidden;
padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
font-size: 1em;
font-weight: bold;
line-height: 1.5;
padding: 2px 0.4em;
margin: 0.5em 0 0 0;
height: auto;
border: 0;
}
.ui-selectmenu-open {
display: block;
}
.ui-selectmenu-button {
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
cursor: pointer;
}
.ui-selectmenu-button span.ui-icon {
right: 0.5em;
left: auto;
margin-top: -8px;
position: absolute;
top: 50%;
}
.ui-selectmenu-button span.ui-selectmenu-text {
text-align: left;
padding: 0.4em 2.1em 0.4em 1em;
display: block;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
-ms-touch-action: none;
touch-action: none;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
}
/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
filter: inherit;
}
.ui-slider-horizontal {
height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
top: -.3em;
margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
.ui-slider-vertical {
width: .8em;
height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
top: 0;
}
.ui-sortable-handle {
-ms-touch-action: none;
touch-action: none;
}
.ui-spinner {
position: relative;
display: inline-block;
overflow: hidden;
padding: 0;
vertical-align: middle;
}
.ui-spinner-input {
border: none;
background: none;
color: inherit;
padding: 0;
margin: .2em 0;
vertical-align: middle;
margin-left: .4em;
margin-right: 22px;
}
.ui-spinner-button {
width: 16px;
height: 50%;
font-size: .5em;
padding: 0;
margin: 0;
text-align: center;
position: absolute;
cursor: default;
display: block;
overflow: hidden;
right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
border-top: none;
border-bottom: none;
border-right: none;
}
/* vertically center icon */
.ui-spinner .ui-icon {
position: absolute;
margin-top: -8px;
top: 50%;
left: 0;
}
.ui-spinner-up {
top: 0;
}
.ui-spinner-down {
bottom: 0;
}
/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
/* need to fix icons sprite */
background-position: -65px -16px;
}
.ui-tabs {
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
padding: .2em;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px .2em 0 0;
border-bottom-width: 0;
padding: 0;
white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float: left;
padding: .5em 1em;
text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
}
.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
border-width: 2px;
}

File diff suppressed because one or more lines are too long

410
js/jquery-ui-1.11.2/jquery-ui.theme.css vendored Normal file
View File

@ -0,0 +1,410 @@
/*!
* jQuery UI CSS Framework 1.11.2
* http://jqueryui.com
*
* Copyright 2014 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
* http://api.jqueryui.com/category/theming/
*
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
*/
/* Component containers
----------------------------------*/
.ui-widget {
font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
font-size: 1.1em;
}
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
font-size: 1em;
}
.ui-widget-content {
border: 1px solid #dddddd;
background: #eeeeee url("images/ui-bg_highlight-soft_100_eeeeee_1x100.png") 50% top repeat-x;
color: #333333;
}
.ui-widget-content a {
color: #333333;
}
.ui-widget-header {
border: 1px solid #e78f08;
background: #f6a828 url("images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;
color: #ffffff;
font-weight: bold;
}
.ui-widget-header a {
color: #ffffff;
}
/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #cccccc;
background: #f6f6f6 url("images/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;
font-weight: bold;
color: #1c94c4;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
color: #1c94c4;
text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border: 1px solid #fbcb09;
background: #fdf5ce url("images/ui-bg_glass_100_fdf5ce_1x400.png") 50% 50% repeat-x;
font-weight: bold;
color: #c77405;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
color: #c77405;
text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #fbd850;
background: #ffffff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;
font-weight: bold;
color: #eb8f00;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
color: #eb8f00;
text-decoration: none;
}
/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid #fed22f;
background: #ffe45c url("images/ui-bg_highlight-soft_75_ffe45c_1x100.png") 50% top repeat-x;
color: #363636;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
border: 1px solid #cd0a0a;
background: #b81900 url("images/ui-bg_diagonals-thick_18_b81900_40x40.png") 50% 50% repeat;
color: #ffffff;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
color: #ffffff;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
color: #ffffff;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
opacity: .7;
filter:Alpha(Opacity=70); /* support: IE8 */
font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
opacity: .35;
filter:Alpha(Opacity=35); /* support: IE8 */
background-image: none;
}
.ui-state-disabled .ui-icon {
filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
}
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
width: 16px;
height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
background-image: url("images/ui-icons_222222_256x240.png");
}
.ui-widget-header .ui-icon {
background-image: url("images/ui-icons_ffffff_256x240.png");
}
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_ef8c08_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
background-image: url("images/ui-icons_ef8c08_256x240.png");
}
.ui-state-active .ui-icon {
background-image: url("images/ui-icons_ef8c08_256x240.png");
}
.ui-state-highlight .ui-icon {
background-image: url("images/ui-icons_228ef1_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url("images/ui-icons_ffd27a_256x240.png");
}
/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: 4px;
}
/* Overlays */
.ui-widget-overlay {
background: #666666 url("images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;
opacity: .5;
filter: Alpha(Opacity=50); /* support: IE8 */
}
.ui-widget-shadow {
margin: -5px 0 0 -5px;
padding: 5px;
background: #000000 url("images/ui-bg_flat_10_000000_40x100.png") 50% 50% repeat-x;
opacity: .2;
filter: Alpha(Opacity=20); /* support: IE8 */
border-radius: 5px;
}

File diff suppressed because one or more lines are too long

16582
js/jquery-ui.js vendored Normal file

File diff suppressed because it is too large Load Diff

13
js/jquery-ui.min.js vendored Normal file

File diff suppressed because one or more lines are too long

13
js/pickadate.fr_FR.js Normal file
View File

@ -0,0 +1,13 @@
// French
$.extend( $.fn.pickadate.defaults, {
monthsFull: [ 'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre' ],
monthsShort: [ 'jan', 'fev', 'mar', 'avr', 'mai', 'juin', 'juil', 'aou', 'sep', 'oct', 'nov', 'dec' ],
weekdaysFull: [ 'dimanche', 'lundi', 'mardy', 'mercredi', 'jeudi', 'vendredi', 'samedi' ],
weekdaysShort: [ 'dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam' ],
today: 'aujourd\'hui',
clear: 'effacer',
firstDay: 1,
format: 'dd mmmm yyyy',
formatSubmit: 'yyyy/mm/dd'
})

12
js/pickadate.js-3.5.3/.gitignore vendored Normal file
View File

@ -0,0 +1,12 @@
*.DS_Store
*.sublime-project
*.sublime-workspace
*.log
node_modules/
.idea/

View File

@ -0,0 +1,8 @@
{
"debug": true,
"devel": true,
"browser": true,
"asi": true,
"unused": true,
"eqnull": true
}

View File

@ -0,0 +1,11 @@
language: node_js
node_js:
- 0.10
before_script:
- npm install -g grunt-cli
branches:
only:
- gh-pages
- dev
- edge

View File

@ -0,0 +1,262 @@
# Changelog
## 3.5.3
- [#437](https://github.com/amsul/pickadate.js/issues/437): Added Common JS to UMD.
- [#478](https://github.com/amsul/pickadate.js/issues/478): Added “close” button.
- [#406](https://github.com/amsul/pickadate.js/issues/406): Allow `clear` method to be `muted`.
- [#439](https://github.com/amsul/pickadate.js/issues/439): Added ability to set min/max date & time using formatted strings.
- [#462](https://github.com/amsul/pickadate.js/issues/462): Fixed time offset issues by using UTC based times.
- [#476](https://github.com/amsul/pickadate.js/issues/476): Fixed the `main` files in `bower.json`.
- [#451](https://github.com/amsul/pickadate.js/issues/451): Added French accessibility labels.
- [#442](https://github.com/amsul/pickadate.js/issues/442): Fixed flickering on webkit browsers.
- [#438](https://github.com/amsul/pickadate.js/issues/438): Fixed adding an ID to the hidden element to remain unique.
- [#456](https://github.com/amsul/pickadate.js/issues/456): Fixed “today” button to be disabled when the date is disabled.
- [#419](https://github.com/amsul/pickadate.js/issues/419): Fixed time picker not scrolling to correct position with the “classic” theme.
- Fixed bug where it was possible to unbind internal bindings.
- [#420](https://github.com/amsul/pickadate.js/issues/420): [Updated docs](http://amsul.github.io/pickadate.js/api.htm#method-trigger) the `trigger` methods ability to pass data to event callbacks.
## 3.5.2
- [#398](https://github.com/amsul/pickadate.js/issues/398): Fixed Nepali translations.
- [#403](https://github.com/amsul/pickadate.js/issues/403): Fixed month nav pointer styling with Bootstrap (`border-box` issue).
- [#405](https://github.com/amsul/pickadate.js/issues/405): Fixed scrollbar width checker.
- [#421](https://github.com/amsul/pickadate.js/issues/421): Fixed `picker.get('select', 'yyyy-mm-dd')` when `select` is `null`.
- [#423](https://github.com/amsul/pickadate.js/issues/423): Added Vietnamese translations.
- [#427](https://github.com/amsul/pickadate.js/issues/427): Fixed enabling date when `firstDay` is set.
- [#428](https://github.com/amsul/pickadate.js/issues/428): Fixed `$` conflict in Arabic translations.
- [#430](https://github.com/amsul/pickadate.js/issues/430): Improved differentiation between “selected” and “highlighted” dates/times.
## 3.5.0
- [#162](https://github.com/amsul/pickadate.js/issues/162): Fixed page scrolling issue when modal view is open in the default theme.
- [#350](https://github.com/amsul/pickadate.js/issues/350): Fixed Hungarian translations typo.
- [#351](https://github.com/amsul/pickadate.js/issues/351) & [#388](https://github.com/amsul/pickadate.js/issues/388) & [#393](https://github.com/amsul/pickadate.js/issues/393): Fixed issue with script freezing when `min` is `true` and “today” is disabled.
- [#358](https://github.com/amsul/pickadate.js/issues/358): Fixed parsing months as 1-indexed when value is a string.
- [#360](https://github.com/amsul/pickadate.js/issues/360): Improved Grunt script to build a cleaner project.
- [#361](https://github.com/amsul/pickadate.js/issues/361): Fixed alternate API syntax not returning the correct value.
- [#367](https://github.com/amsul/pickadate.js/issues/367): [Added a note](http://amsul.github.io/pickadate.js/date.htm#formatting-rules) on how to appropriately use the `yy` format.
- [#369](https://github.com/amsul/pickadate.js/issues/369): Added Nepali translations.
- [#377](https://github.com/amsul/pickadate.js/issues/377): Added the [`hiddenName` option](http://amsul.github.io/pickadate.js/date.htm#formats_use_hidden_only) to use the visible `input`s name as the hidden `input`s name.
- [#381](https://github.com/amsul/pickadate.js/issues/381): Added missing semi-colon to `legacy.js`.
- [#384](https://github.com/amsul/pickadate.js/issues/384): Year selector appears *before* the month selector.
- [#387](https://github.com/amsul/pickadate.js/issues/387): Fixed issue where the `clear` method did not reset the `select` value to `null`.
- [#395](https://github.com/amsul/pickadate.js/issues/395): [Added a note](http://amsul.github.io/pickadate.js/api.htm#method-open-close) on how to use a separate button to open/close the picker.
## 3.4.0
- ARIA support added. :star2:
- [#128](https://github.com/amsul/pickadate.js/issues/128): Date parser recognizes a string value and uses month index as 1.
- [#316](https://github.com/amsul/pickadate.js/issues/316): Date and time parser fall back to default format if none is specified.
- [#326](https://github.com/amsul/pickadate.js/issues/326): Fixed `set('disable', true)` crashing with `max: true` in options.
- [#329](https://github.com/amsul/pickadate.js/issues/329): Fixed time picker not parsing midnight correcly.
- [#325](https://github.com/amsul/pickadate.js/issues/325): Fixed Firefox bug with querying for active element with `$.contains`.
- [#330](https://github.com/amsul/pickadate.js/issues/330): Fixed month selector navigation from month with more days to one with less.
- [#332](https://github.com/amsul/pickadate.js/issues/332): Fixed issue where right-clicks caused picker to close in Firefox.
- [#338](https://github.com/amsul/pickadate.js/issues/338): Fixed IE issue with month & year selector not working correctly.
- Improved time picker setting a time relative to “now”.
- Improved disabling/enabling dates and times.
- Spanish translations typo fixed.
- Added [the `off` method](http://amsul.github.io/pickadate.js/api.htm#method-off).
- Added Galician translations.
- Added Slovenian translations.
- Added Icelandic translations.
- Added option to disable [dates](http://amsul.github.io/pickadate.js/date.htm#disable-dates-use-ranges) & [times](http://amsul.github.io/pickadate.js/time.htm#disable-times-use-ranges) within a range.
- Added option to set the [`select`](http://amsul.github.io/pickadate.js/api.htm#method-set-select-date), [`highlight`](http://amsul.github.io/pickadate.js/api.htm#method-set-highlight-date), and [`view`](http://amsul.github.io/pickadate.js/api.htm#method-set-view-date) using a string and parsing format.
- Added some performance improvents.
- Added more tests and documentation.
- Fixed `picker.get('select')` when theres no value.
## 3.3.2
- [#283](https://github.com/amsul/pickadate.js/issues/283): Adjusted font size for narrow screens.
- [#285](https://github.com/amsul/pickadate.js/issues/285): Fixed `select` menu click on Firefox.
- [#294](https://github.com/amsul/pickadate.js/issues/294): Fixed issue with `stop` method called within `onClose`.
- [#303](https://github.com/amsul/pickadate.js/issues/303): Fixed issue with `value` not being parsed when `formatSubmit` is used.
## 3.3.1
- [#260](https://github.com/amsul/pickadate.js/issues/260): Fixed border from preventing picker from opening.
- [#248](https://github.com/amsul/pickadate.js/issues/248): Added option to enable dates/times disabled within a range.
- [#255](https://github.com/amsul/pickadate.js/issues/255): Added traditional Chinese.
- [#249](https://github.com/amsul/pickadate.js/issues/249) & [#120](https://github.com/amsul/pickadate.js/issues/120): Fixed jQuery Mobile and MagnificPopup click issues.
- [#247](https://github.com/amsul/pickadate.js/issues/247): Fixed setting min limit on time picker.
- [#278](https://github.com/amsul/pickadate.js/issues/278) & [#285](https://github.com/amsul/pickadate.js/issues/285): Fixed Firefox and IE bug for finding `activeElement`.
- [#279](https://github.com/amsul/pickadate.js/issues/279): Added option to `set` things with [muted callbacks](http://amsul.github.io/pickadate.js/pickadate.js/api.htm#muted-callbacks).
- Fixed French translations capitalization.
- Fixed time picker scrolling.
- Added setting a [time using a native JavaScript date objects](http://amsul.github.io/pickadate.js/api.htm#method-set-select-time).
- Added option to keep an [editable `input`](http://amsul.github.io/pickadate.js/date.htm#editable) element.
## 3.3.0
- [#238](https://github.com/amsul/pickadate.js/issues/238): Improved disabled dates validation.
- [#236](https://github.com/amsul/pickadate.js/issues/236): Fixed transparency issue in IE8 on XP.
- [#159](https://github.com/amsul/pickadate.js/issues/159): Added functionality to reset disabled dates/times.
- [#232](https://github.com/amsul/pickadate.js/issues/232): Dropdown styling tweaked.
- [#197](https://github.com/amsul/pickadate.js/issues/197): Fixed issue with forms not submitting on Firefox.
- [#230](https://github.com/amsul/pickadate.js/issues/230): Fixed issue with selected time scrolling into view.
- [#208](https://github.com/amsul/pickadate.js/issues/208) & [#209](https://github.com/amsul/pickadate.js/issues/209): Added `hiddenPrefix` option for hidden input elements name attribute.
- [#130](https://github.com/amsul/pickadate.js/issues/130): Fixed issue with passing focus to an element with custom jQuery builds.
- [#246](https://github.com/amsul/pickadate.js/issues/246) & [#242](https://github.com/amsul/pickadate.js/issues/242): Resolved jQuery conflict.
- [#247](https://github.com/amsul/pickadate.js/issues/247): Fixed issue with time picker intervals and the min selectable time.
- Added option to disabled/enable dates using JavaScript Date objects.
- Tweaked functionality in enabling/disabling dates and times.
- Improved support for RTL languages and keyboard navigation.
- Added `rtl.css` for styling RTL languages appropriatey.
## 3.2.2
- [#216](https://github.com/amsul/pickadate.js/issues/216): Added generic Arabic translations.
- [#210](https://github.com/amsul/pickadate.js/issues/210): Fixed jQuery conflict in picker extension files.
- [#223](https://github.com/amsul/pickadate.js/issues/223): Time picker “disabled” attribute fix.
- Fixed issue with IE losing key bindings when clicked within picker.
- Improved delegated click handling on picker elements.
## 3.2.1
- [#210](https://github.com/amsul/pickadate.js/issues/210): Wrapped files using UMD patterns.
- [#207](https://github.com/amsul/pickadate.js/issues/207): Japanese translations added.
- Some other slight improvements.
## 3.2.0
- [#178](https://github.com/amsul/pickadate.js/issues/178): Fix for flicker on iOS while changing months.
- Added `render(true)` option to render full picker or just the “face” ([read more](http://amsul.github.io/pickadate.js/api.htm#method-render)).
## 3.1.4
- Fix for Polish translation.
- Added a `container` option to specify the picker root elements outlet.
- Fix for `$` conflict in translation files.
## 3.1.3
- Korean translations added.
## 3.1.2
- [#168](https://github.com/amsul/pickadate.js/issues/168): Fixed month navigation with disabled dates.
## 3.1.1
- [#161](https://github.com/amsul/pickadate.js/issues/161): Corrected “no-drop” cursor on input element for certain browsers.
- [#158](https://github.com/amsul/pickadate.js/issues/158): Fixed CSS for disabled dates with unfocused input.
- [#155](https://github.com/amsul/pickadate.js/issues/155): Corrected unescaped translations.
## 3.1.0
- [#140](https://github.com/amsul/pickadate.js/issues/140): Fix for freezing with unexpected date format.
- [#154](https://github.com/amsul/pickadate.js/issues/154): Fix for “mm” and “m” formats opening with incorrect month.
- Border styling adjusted for disabled times.
## v3.0.5
- [#145](https://github.com/amsul/pickadate.js/issues/145): Fix for `getFirstWordLength` not being defined.
- [#137](https://github.com/amsul/pickadate.js/issues/137): Corrected Norwegian translation.
## v3.0.4
- [#132](https://github.com/amsul/pickadate.js/issues/132): Fix for using `firstDay` with month starting on Sunday.
- Improved disabled dates validation.
## v3.0.3
- [#126](https://github.com/amsul/pickadate.js/issues/126): Fix for all dates disabled.
- [#127](https://github.com/amsul/pickadate.js/issues/127): Fix for jQuery no conflict.
- [#129](https://github.com/amsul/pickadate.js/issues/129): Fix for month nav wrapping around same year.
## v3.0.2
- [#124](https://github.com/amsul/pickadate.js/issues/124): Fixed bug with navigating past year.
## v3.0.1
- [#123](https://github.com/amsul/pickadate.js/issues/123): Removed `hiddenSuffix` extra quote character.
- Fixed issue with month navigation on the 31st date.
## v3.0.0
With this major release, the entire API has been rethought to allow the picker to be much more configurable and extensible. These are the most notable updates:
- [#20](https://github.com/amsul/pickadate.js/issues/20): Introduced a new [time picker](http://amsul.github.io/pickadate.js/time.htm).
- [#112](https://github.com/amsul/pickadate.js/issues/112): Firefox select month/year fix.
- [#84](https://github.com/amsul/pickadate.js/issues/84): Scrollbar not hidden to avoid page shift.
- [#89](https://github.com/amsul/pickadate.js/issues/89): Better event handling on clicks/focuses/keydowns within the holder.
- [#98](https://github.com/amsul/pickadate.js/issues/98): Destroy picker data from element.
- Added Grunt.js build system.
- Added QUnit test suite.
- Added Travis integration.
- Updated themes to be LESS-based.
- Removed “inline” and “inline-fixed” themes.
- Removed jam.js bindings within `package.json`.
- Removed official support for IE7. Still works but looks odd.
To enable all this goodness, some **backward-incompatible changes** have been introduced. These are the main ones:
<a name="zero-as-index"></a>
- [#85](https://github.com/amsul/pickadate.js/issues/85): Months have __zero-as-index__:
Just as in JavaScripts native Date object, the `month` used to create dates is now based on zero as the first index. Meaning:
```
[2013,0,1] → January 01, 2013
[2013,11,1] → December 01, 2013
```
- API revised:
```
isOpen → get('open')
getDate → get('select')
getDateLimit → get('min') or get('max')
setDate → set('select', …)
setDateLimit → set('min', …) or set('max', …)
show → set('view', …)
```
- Options revised:
```
showMonthsFull → showMonthsShort
showWeekdaysShort → showWeekdaysFull
yearSelector → selectYears
monthSelector → selectMonths
dateMin → min
dateMax → max
datesDisabled → disable
onSelect → onSet
```
- Options removed:
```
monthPrev
monthNext
```
To add labels for the month navigation tabs, use CSS pseudo-elements instead.
- A few [HTML classes](http://amsul.github.io/pickadate.js/date.htm#classes) name and property changes.
- [Formatting rules](http://amsul.github.io/pickadate.js/date.htm#formats) that appear within a word need to be escaped with an exclamation mark (!).
<br>
#### Please do read the [docs](http://amsul.github.io/pickadate.js/date.htm#options) and [api](http://amsul.github.io/pickadate.js/api.htm) to see exactly how these new options and methods work.
<br>
## Older changelogs
If youre looking for changes in older versions, please [browse the tags](https://github.com/amsul/pickadate.js/tags) for the relevant commit archive and changelog file.

View File

@ -0,0 +1,53 @@
# Contributing
Want to help contribute something to the project? Awesome! :smile:
Please take a moment to review this doc to make contributions easy and effective for everyone.
<br>
<a name="bugs"></a>
## Bug reports
If you believe youve found a bug within the repository code:
- Search the existing issues to avoid duplicates and to check if it has already been solved.
- Make sure youre using the latest build.
- Isolate the problem and create a [reduced test case](http://css-tricks.com/6263-reduced-test-cases/) - preferably supported with a live example.
- Try to be as detailed as possible in the report (OS, browser, expected outcome vs actual outcome, etc).
- Please **do not** use the issue tracker for personal support requests. Instead try [Stack Overflow](http://stackoverflow.com) or the likes.
<br>
<a name="pull-requests"></a>
## Pull requests
If youre submitting a pull request, please respect the coding standards used (indentations, comments, semi-colons, etc) as per the **Golden Rule**:
> All code in any code base should look like a single person typed it, no matter how many people contributed.
A few other things to keep in mind:
- Make sure the changes are suitable within the scope of this project.
- Discuss any significant features before endeavoring into developing them. Id hate to have anyone spend effort on something only for me to not merge it into the main project.
- Include the relevant test coverage if any JavaScript files are involved.
- Compile the project using `grunt --verbose` to make sure everything passes with a green flag.
- Use the Semantic Versioning guide, as mentioned in the [readme file](https://github.com/amsul/pickadate.js/#readme), in the case that a version bump is due.
#### All pull requests should be submitted to the `dev` branch.
<br>
<a name="features"></a>
## Feature requests
Feature requests are welcome. But take a moment to find out whether your idea fits within the scope and aims of this project. Its up to *you* to make a strong case to the merits of this feature. Please provide as much detail and context as possible.

View File

@ -0,0 +1,275 @@
/*!
* This Gruntfile is used to build the project files.
*/
/*jshint
node: true
*/
module.exports = function( grunt ) {
// Read the package manifest.
var packageJSON = grunt.file.readJSON( 'package.json' )
// Add the “curly” template delimiters.
grunt.template.addDelimiters( 'curly', '{%', '%}' )
// Load the NPM tasks.
grunt.loadNpmTasks( 'grunt-contrib-watch' )
grunt.loadNpmTasks( 'grunt-contrib-jshint' )
grunt.loadNpmTasks( 'grunt-contrib-qunit' )
grunt.loadNpmTasks( 'grunt-contrib-copy' )
grunt.loadNpmTasks( 'grunt-contrib-less' )
grunt.loadNpmTasks( 'grunt-contrib-cssmin' )
grunt.loadNpmTasks( 'grunt-contrib-uglify' )
// Setup the initial configurations.
grunt.initConfig({
// Add the package data.
pkg: packageJSON,
// Set up the directories.
dirs: {
tests: 'tests',
lib: {
src: 'lib',
min: 'lib/compressed'
},
themes: {
src: 'lib/themes-source',
dest: 'lib/themes',
min: 'lib/compressed/themes'
},
translations: {
src: 'lib/translations',
min: 'lib/compressed/translations'
},
docs: {
src: '_docs',
dest: '.'
},
demo: {
images: 'demo/images',
scripts: 'demo/scripts',
styles: {
src: 'demo/styles/less',
dest: 'demo/styles/css'
}
},
},
// Generate static HTML templates.
htmlify: {
docs: {
expand: true,
cwd: '<%= dirs.docs.src %>',
src: [ '/!(base|hero)*.htm' ],
dest: '',
base: '/base.htm'
}
},
// Copy over files to destination directions.
copy: {
pkg: {
options: {
processContent: function( content ) {
return grunt.template.process( content, { delimiters: 'curly' } )
}
},
files: [
{ '<%= pkg.name %>.jquery.json': 'package.json' },
{ 'bower.json': 'package.json' },
{ 'README.md': '<%= dirs.docs.src %>/README.md' },
{ 'LICENSE.md': '<%= dirs.docs.src %>/LICENSE.md' },
{ 'CHANGELOG.md': '<%= dirs.docs.src %>/CHANGELOG.md' },
{ 'CONTRIBUTING.md': '<%= dirs.docs.src %>/CONTRIBUTING.md' }
]
}
},
// Compile LESS into CSS.
less: {
options: {
style: 'expanded'
},
demo: {
files: {
'<%= dirs.demo.styles.dest %>/main.css': '<%= dirs.demo.styles.src %>/base.less'
}
},
themes: {
files: {
'<%= dirs.themes.dest %>/default.css': [ '<%= dirs.themes.src %>/base.less', '<%= dirs.themes.src %>/default.less' ],
'<%= dirs.themes.dest %>/classic.css': [ '<%= dirs.themes.src %>/base.less', '<%= dirs.themes.src %>/classic.less' ],
'<%= dirs.themes.dest %>/default.date.css': [ '<%= dirs.themes.src %>/base.date.less', '<%= dirs.themes.src %>/default.date.less' ],
'<%= dirs.themes.dest %>/default.time.css': [ '<%= dirs.themes.src %>/base.time.less', '<%= dirs.themes.src %>/default.time.less' ],
'<%= dirs.themes.dest %>/classic.date.css': [ '<%= dirs.themes.src %>/base.date.less', '<%= dirs.themes.src %>/classic.date.less' ],
'<%= dirs.themes.dest %>/classic.time.css': [ '<%= dirs.themes.src %>/base.time.less', '<%= dirs.themes.src %>/classic.time.less' ],
'<%= dirs.themes.dest %>/rtl.css': [ '<%= dirs.themes.src %>/rtl.less' ]
}
}
},
// Lint the files.
jshint: {
options: {
jshintrc: true
},
gruntfile: 'Gruntfile.js',
demo: [ '<%= dirs.demo.scripts %>/demo.js' ],
lib: [
'<%= dirs.tests %>/units/*.js',
'<%= dirs.lib.src %>/**/*.js',
// Ignore the legacy and minified files.
'!<%= dirs.lib.src %>/legacy.js',
'!<%= dirs.lib.src %>/compressed/**/*.js'
]
},
// Minify all the things!
uglify: {
options: {
preserveComments: 'some'
},
lib: {
files: [
{
expand : true,
cwd : '<%= dirs.lib.src %>',
src : [ '**/*.js', '!compressed/**/*.js' ],
dest : '<%= dirs.lib.min %>'
}
]
}
},
cssmin: {
lib: {
expand: true,
cwd: '<%= dirs.themes.dest %>',
src: [ '**/*.css', '!compressed/**/*.css' ],
dest: '<%= dirs.themes.min %>'
}
},
// Unit test the files.
qunit: {
lib: [ '<%= dirs.tests %>/units/all.htm' ]
},
// Watch the project files.
watch: {
quick: {
files: [
'<%= dirs.docs.src %>/**/*.htm',
'<%= dirs.docs.src %>/**/*.md',
'<%= dirs.demo.src %>/styles/**/*.less',
'<%= dirs.themes.src %>/**/*.less'
],
tasks: [ 'quick' ]
},
demo: {
files: [
'<%= dirs.demo.styles.src %>/**/*.less'
],
tasks: [ 'demo' ]
},
docs: {
files: [
'<%= dirs.docs.src %>/**/*.htm',
'<%= dirs.docs.src %>/**/*.md'
],
tasks: [ 'docs' ]
},
themes: {
files: [
'<%= dirs.themes.src %>/**/*.less'
],
tasks: [ 'themes' ]
}
},
// Any extra data needed in rendering static files.
meta: {
// The sanitized github repo url.
gitrepo_url: packageJSON.repository.url.replace( /.git$/, '' ),
// Get the min & gzip size of a text file.
fileSize: function( content ) {
return {
min: content.length || 0,
gzip: content ? require( 'zlib-browserify' ).gzipSync( content ).length : 0
}
}
}
}) //grunt.initConfig
// Register the tasks.
// * `htmlify` and `copy:pkg` should come after `uglify` because some package files measure `.min` file sizes.
grunt.registerTask( 'default', [ 'less', 'jshint', 'qunit', 'uglify', 'cssmin', 'htmlify', 'copy:pkg' ] )
grunt.registerTask( 'quick', [ 'less', 'uglify', 'cssmin', 'htmlify', 'copy:pkg' ] )
grunt.registerTask( 'themes', [ 'less:themes' ] )
grunt.registerTask( 'demo', [ 'less:demo', 'jshint:demo' ] )
grunt.registerTask( 'docs', [ 'copy:pkg', 'htmlify:docs' ] )
grunt.registerTask( 'travis', [ 'jshint:lib', 'qunit:lib' ] )
// Create and register the task to build out the static HTML files.
grunt.registerMultiTask( 'htmlify', 'Recursively build static HTML files', function() {
var task = this,
// options = task.options(),
// Process the base file using the source file content.
processFile = function( fileSource ) {
var processedContent = ''/*,
fileNameMatch = fileSource.match( /([\w-]+)(\.htm)$/ )*/
// Recursively process the base template using the file source content.
grunt.verbose.writeln( 'Processing ' + fileSource )
processedContent = grunt.template.process( grunt.file.read( task.data.cwd + task.data.base ), {
delimiters: 'curly',
data: {
pkg: packageJSON,
page: fileSource.match( /[\w-]+(?=\.htm$)/ )[ 0 ],
content: grunt.file.read( fileSource ),
meta: grunt.config.data.meta,
dirs: grunt.config.data.dirs
}
})
// Write the destination file by cleaning the file name.
grunt.log.writeln( 'Writing ' + fileSource.cyan )
grunt.file.write( task.data.dest + fileSource.match( /[\w-]+\.htm$/ )[ 0 ], processedContent )
}
// Map through the task directory and process the HTML files.
grunt.log.writeln( 'Expanding ' + task.data.cwd.cyan )
grunt.file.expand( task.data.cwd + task.data.src ).map( processFile )
})
} //module.exports

View File

@ -0,0 +1,7 @@
Copyright 2014 Amsul, http://amsul.ca
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,153 @@
# pickadate v3.5.3 [![pickadate build status](https://travis-ci.org/amsul/pickadate.js.svg?branch=gh-pages)](https://travis-ci.org/amsul/pickadate.js) [![pickadate dev dependencies status](https://david-dm.org/amsul/pickadate.js/dev-status.svg)](https://david-dm.org/amsul/pickadate.js#info=devDependencies)
The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
#### To get started, check out the:
[Homepage](http://amsul.github.io/pickadate.js) - [Date picker](http://amsul.github.io/pickadate.js/date.htm) - [Time picker](http://amsul.github.io/pickadate.js/time.htm) - [API](http://amsul.github.io/pickadate.js/api.htm)
#### To get it:
[Download v3.5.3](https://github.com/amsul/pickadate.js/archive/3.5.3.zip) or `git clone git://github.com/amsul/pickadate.js.git` or `bower install pickadate`
<br>
## Upgrading from v2 to v3
The v3 API is significantly different from v2 (all for the greater good!). So if youre upgrading to v3, make sure to read the [changelog](https://github.com/amsul/pickadate.js/blob/gh-pages/CHANGELOG.md).
<br>
## Library files
The `lib` folder includes the library files with a `compressed` folder containing the minified counter-parts. These files are minified using [Grunt](#building-with-grunt).
### Pickers
There are currently two pickers: **date** and **time**.
File | Contents | Size (min & gzip)
----------------------- | ------------------------ | ----------------------
`picker.js` | __Base *__ | 1.76kb
`picker.date.js` | Date picker | 2.68kb
`picker.time.js` | Time picker | 1.92kb
__*__ The base script is **required** for any of the pickers to function.
_To support old browsers, namely IE8, **also include** the `legacy.js` file._
### Themes
All themes are [generated using LESS](#less-styling) and compiled from the `lib/themes-source` folder into the `lib/themes` folder.
File | Contents | Size (min & gzip)
----------------------- | ---------------------------- | ----------------------
`default.css` | __Base default *__ | 0.49kb
`default.date.css` | Default date picker | 0.75kb
`default.time.css` | Default time picker | 0.35kb
`classic.css` | __Base classic *__ | 0.39kb
`classic.date.css` | Classic date picker | 0.75kb
`classic.time.css` | Classic time picker | 0.35kb
`rtl.css` | __RTL language stylings **__ | 0.10kb
__*__ One and only one base stylesheet is **required**. [Choose a theme](http://amsul.github.io/pickadate.js#menu) then include the respective pickers as well.
__**__ For languages with text flowing from right-to-left, also include the `rtl.css` stylesheet.
### Translations
The translations live in the `lib/translations` folder. There are currently [39 language translations](https://github.com/amsul/pickadate.js/blob/3.5.3/lib/translations) included.
<br>
## Building with Grunt
[Grunt](http://gruntjs.com/) `~0.4.5` is used to build the project files. To get started, clone the project and then run:
- `npm install` to get the required node modules.
- `grunt --verbose` to confirm you have all the dependencies.
Read the Gruntfile to see the build tasks and relative directories of the source files.
<br>
<a name="less-styling"></a>
## Styling with LESS
The picker themes are built using [LESS](http://lesscss.org/) with Grunt. To customize the CSS output, read the `_variables.less` file in the `lib/themes-source` folder. You can specify:
- colors for the theme,
- sizes for the picker,
- media-query breakpoints,
- and a whole bunch of other stuff.
After making any changes, run `grunt less:themes` to compile it into CSS.
<br>
## Versioning
To maintain some consistency in the sort of changes to expect with version bumps, [Semantic Versioning guidelines](http://semver.org/) will now be followed as closely as possible:
`<major>.<minor>.<patch>`
Constructed as such:
- `major`: breaks backward compatibility (resets the `minor` and `patch`)
- `minor`: new additions with backward compatibility (resets the `patch`)
- `patch`: bug fixes and misc changes
<br>
## Bugs
Before opening a new issue, please search the existing [Issues](https://github.com/amsul/pickadate.js/issues) for anything similar there might already be an answer to your problem. You might also wanna check out the [Contributing](https://github.com/amsul/pickadate.js/blob/gh-pages/CONTRIBUTING.md) guide.
<br>
## Contributing
Before contributing any code to the project, please take a look at the [Contributing](https://github.com/amsul/pickadate.js/blob/gh-pages/CONTRIBUTING.md) guide.
<br>
## Support
If you find this library useful and would like to see further development, consider [supporting it](http://selz.co/1g80kCZ).
<br><br>
---
© 2014 [Amsul](http://twitter.com/amsul_)
Licensed under [MIT](http://amsul.ca/MIT)

View File

@ -0,0 +1,262 @@
# Changelog
## 3.5.3
- [#437]({%= pkg.bugs %}/437): Added Common JS to UMD.
- [#478]({%= pkg.bugs %}/478): Added “close” button.
- [#406]({%= pkg.bugs %}/406): Allow `clear` method to be `muted`.
- [#439]({%= pkg.bugs %}/439): Added ability to set min/max date & time using formatted strings.
- [#462]({%= pkg.bugs %}/462): Fixed time offset issues by using UTC based times.
- [#476]({%= pkg.bugs %}/476): Fixed the `main` files in `bower.json`.
- [#451]({%= pkg.bugs %}/451): Added French accessibility labels.
- [#442]({%= pkg.bugs %}/442): Fixed flickering on webkit browsers.
- [#438]({%= pkg.bugs %}/438): Fixed adding an ID to the hidden element to remain unique.
- [#456]({%= pkg.bugs %}/456): Fixed “today” button to be disabled when the date is disabled.
- [#419]({%= pkg.bugs %}/419): Fixed time picker not scrolling to correct position with the “classic” theme.
- Fixed bug where it was possible to unbind internal bindings.
- [#420]({%= pkg.bugs %}/420): [Updated docs]({%= pkg.homepage %}/api.htm#method-trigger) the `trigger` methods ability to pass data to event callbacks.
## 3.5.2
- [#398]({%= pkg.bugs %}/398): Fixed Nepali translations.
- [#403]({%= pkg.bugs %}/403): Fixed month nav pointer styling with Bootstrap (`border-box` issue).
- [#405]({%= pkg.bugs %}/405): Fixed scrollbar width checker.
- [#421]({%= pkg.bugs %}/421): Fixed `picker.get('select', 'yyyy-mm-dd')` when `select` is `null`.
- [#423]({%= pkg.bugs %}/423): Added Vietnamese translations.
- [#427]({%= pkg.bugs %}/427): Fixed enabling date when `firstDay` is set.
- [#428]({%= pkg.bugs %}/428): Fixed `$` conflict in Arabic translations.
- [#430]({%= pkg.bugs %}/430): Improved differentiation between “selected” and “highlighted” dates/times.
## 3.5.0
- [#162]({%= pkg.bugs %}/162): Fixed page scrolling issue when modal view is open in the default theme.
- [#350]({%= pkg.bugs %}/350): Fixed Hungarian translations typo.
- [#351]({%= pkg.bugs %}/351) & [#388]({%= pkg.bugs %}/388) & [#393]({%= pkg.bugs %}/393): Fixed issue with script freezing when `min` is `true` and “today” is disabled.
- [#358]({%= pkg.bugs %}/358): Fixed parsing months as 1-indexed when value is a string.
- [#360]({%= pkg.bugs %}/360): Improved Grunt script to build a cleaner project.
- [#361]({%= pkg.bugs %}/361): Fixed alternate API syntax not returning the correct value.
- [#367]({%= pkg.bugs %}/367): [Added a note]({%= pkg.homepage %}/date.htm#formatting-rules) on how to appropriately use the `yy` format.
- [#369]({%= pkg.bugs %}/369): Added Nepali translations.
- [#377]({%= pkg.bugs %}/377): Added the [`hiddenName` option]({%= pkg.homepage %}/date.htm#formats_use_hidden_only) to use the visible `input`s name as the hidden `input`s name.
- [#381]({%= pkg.bugs %}/381): Added missing semi-colon to `legacy.js`.
- [#384]({%= pkg.bugs %}/384): Year selector appears *before* the month selector.
- [#387]({%= pkg.bugs %}/387): Fixed issue where the `clear` method did not reset the `select` value to `null`.
- [#395]({%= pkg.bugs %}/395): [Added a note]({%= pkg.homepage %}/api.htm#method-open-close) on how to use a separate button to open/close the picker.
## 3.4.0
- ARIA support added. :star2:
- [#128]({%= pkg.bugs %}/128): Date parser recognizes a string value and uses month index as 1.
- [#316]({%= pkg.bugs %}/316): Date and time parser fall back to default format if none is specified.
- [#326]({%= pkg.bugs %}/326): Fixed `set('disable', true)` crashing with `max: true` in options.
- [#329]({%= pkg.bugs %}/329): Fixed time picker not parsing midnight correcly.
- [#325]({%= pkg.bugs %}/325): Fixed Firefox bug with querying for active element with `$.contains`.
- [#330]({%= pkg.bugs %}/330): Fixed month selector navigation from month with more days to one with less.
- [#332]({%= pkg.bugs %}/332): Fixed issue where right-clicks caused picker to close in Firefox.
- [#338]({%= pkg.bugs %}/338): Fixed IE issue with month & year selector not working correctly.
- Improved time picker setting a time relative to “now”.
- Improved disabling/enabling dates and times.
- Spanish translations typo fixed.
- Added [the `off` method]({%= pkg.homepage %}/api.htm#method-off).
- Added Galician translations.
- Added Slovenian translations.
- Added Icelandic translations.
- Added option to disable [dates]({%= pkg.homepage %}/date.htm#disable-dates-use-ranges) & [times]({%= pkg.homepage %}/time.htm#disable-times-use-ranges) within a range.
- Added option to set the [`select`]({%= pkg.homepage %}/api.htm#method-set-select-date), [`highlight`]({%= pkg.homepage %}/api.htm#method-set-highlight-date), and [`view`]({%= pkg.homepage %}/api.htm#method-set-view-date) using a string and parsing format.
- Added some performance improvents.
- Added more tests and documentation.
- Fixed `picker.get('select')` when theres no value.
## 3.3.2
- [#283]({%= pkg.bugs %}/283): Adjusted font size for narrow screens.
- [#285]({%= pkg.bugs %}/285): Fixed `select` menu click on Firefox.
- [#294]({%= pkg.bugs %}/294): Fixed issue with `stop` method called within `onClose`.
- [#303]({%= pkg.bugs %}/303): Fixed issue with `value` not being parsed when `formatSubmit` is used.
## 3.3.1
- [#260]({%= pkg.bugs %}/260): Fixed border from preventing picker from opening.
- [#248]({%= pkg.bugs %}/248): Added option to enable dates/times disabled within a range.
- [#255]({%= pkg.bugs %}/255): Added traditional Chinese.
- [#249]({%= pkg.bugs %}/249) & [#120]({%= pkg.bugs %}/120): Fixed jQuery Mobile and MagnificPopup click issues.
- [#247]({%= pkg.bugs %}/247): Fixed setting min limit on time picker.
- [#278]({%= pkg.bugs %}/278) & [#285]({%= pkg.bugs %}/285): Fixed Firefox and IE bug for finding `activeElement`.
- [#279]({%= pkg.bugs %}/279): Added option to `set` things with [muted callbacks]({%= pkg.homepage %}/pickadate.js/api.htm#muted-callbacks).
- Fixed French translations capitalization.
- Fixed time picker scrolling.
- Added setting a [time using a native JavaScript date objects]({%= pkg.homepage %}/api.htm#method-set-select-time).
- Added option to keep an [editable `input`]({%= pkg.homepage %}/date.htm#editable) element.
## 3.3.0
- [#238]({%= pkg.bugs %}/238): Improved disabled dates validation.
- [#236]({%= pkg.bugs %}/236): Fixed transparency issue in IE8 on XP.
- [#159]({%= pkg.bugs %}/159): Added functionality to reset disabled dates/times.
- [#232]({%= pkg.bugs %}/232): Dropdown styling tweaked.
- [#197]({%= pkg.bugs %}/197): Fixed issue with forms not submitting on Firefox.
- [#230]({%= pkg.bugs %}/230): Fixed issue with selected time scrolling into view.
- [#208]({%= pkg.bugs %}/208) & [#209]({%= pkg.bugs %}/209): Added `hiddenPrefix` option for hidden input elements name attribute.
- [#130]({%= pkg.bugs %}/130): Fixed issue with passing focus to an element with custom jQuery builds.
- [#246]({%= pkg.bugs %}/246) & [#242]({%= pkg.bugs %}/242): Resolved jQuery conflict.
- [#247]({%= pkg.bugs %}/247): Fixed issue with time picker intervals and the min selectable time.
- Added option to disabled/enable dates using JavaScript Date objects.
- Tweaked functionality in enabling/disabling dates and times.
- Improved support for RTL languages and keyboard navigation.
- Added `rtl.css` for styling RTL languages appropriatey.
## 3.2.2
- [#216]({%= pkg.bugs %}/216): Added generic Arabic translations.
- [#210]({%= pkg.bugs %}/210): Fixed jQuery conflict in picker extension files.
- [#223]({%= pkg.bugs %}/223): Time picker “disabled” attribute fix.
- Fixed issue with IE losing key bindings when clicked within picker.
- Improved delegated click handling on picker elements.
## 3.2.1
- [#210]({%= pkg.bugs %}/210): Wrapped files using UMD patterns.
- [#207]({%= pkg.bugs %}/207): Japanese translations added.
- Some other slight improvements.
## 3.2.0
- [#178]({%= pkg.bugs %}/178): Fix for flicker on iOS while changing months.
- Added `render(true)` option to render full picker or just the “face” ([read more](http://amsul.github.io/pickadate.js/api.htm#method-render)).
## 3.1.4
- Fix for Polish translation.
- Added a `container` option to specify the picker root elements outlet.
- Fix for `$` conflict in translation files.
## 3.1.3
- Korean translations added.
## 3.1.2
- [#168]({%= pkg.bugs %}/168): Fixed month navigation with disabled dates.
## 3.1.1
- [#161]({%= pkg.bugs %}/161): Corrected “no-drop” cursor on input element for certain browsers.
- [#158]({%= pkg.bugs %}/158): Fixed CSS for disabled dates with unfocused input.
- [#155]({%= pkg.bugs %}/155): Corrected unescaped translations.
## 3.1.0
- [#140]({%= pkg.bugs %}/140): Fix for freezing with unexpected date format.
- [#154]({%= pkg.bugs %}/154): Fix for “mm” and “m” formats opening with incorrect month.
- Border styling adjusted for disabled times.
## v3.0.5
- [#145]({%= pkg.bugs %}/145): Fix for `getFirstWordLength` not being defined.
- [#137]({%= pkg.bugs %}/137): Corrected Norwegian translation.
## v3.0.4
- [#132]({%= pkg.bugs %}/132): Fix for using `firstDay` with month starting on Sunday.
- Improved disabled dates validation.
## v3.0.3
- [#126]({%= pkg.bugs %}/126): Fix for all dates disabled.
- [#127]({%= pkg.bugs %}/127): Fix for jQuery no conflict.
- [#129]({%= pkg.bugs %}/129): Fix for month nav wrapping around same year.
## v3.0.2
- [#124]({%= pkg.bugs %}/124): Fixed bug with navigating past year.
## v3.0.1
- [#123]({%= pkg.bugs %}/123): Removed `hiddenSuffix` extra quote character.
- Fixed issue with month navigation on the 31st date.
## v3.0.0
With this major release, the entire API has been rethought to allow the picker to be much more configurable and extensible. These are the most notable updates:
- [#20]({%= pkg.bugs %}/20): Introduced a new [time picker](http://amsul.github.io/pickadate.js/time.htm).
- [#112]({%= pkg.bugs %}/112): Firefox select month/year fix.
- [#84]({%= pkg.bugs %}/84): Scrollbar not hidden to avoid page shift.
- [#89]({%= pkg.bugs %}/89): Better event handling on clicks/focuses/keydowns within the holder.
- [#98]({%= pkg.bugs %}/98): Destroy picker data from element.
- Added Grunt.js build system.
- Added QUnit test suite.
- Added Travis integration.
- Updated themes to be LESS-based.
- Removed “inline” and “inline-fixed” themes.
- Removed jam.js bindings within `package.json`.
- Removed official support for IE7. Still works but looks odd.
To enable all this goodness, some **backward-incompatible changes** have been introduced. These are the main ones:
<a name="zero-as-index"></a>
- [#85]({%= pkg.bugs %}/85): Months have __zero-as-index__:
Just as in JavaScripts native Date object, the `month` used to create dates is now based on zero as the first index. Meaning:
```
[2013,0,1] → January 01, 2013
[2013,11,1] → December 01, 2013
```
- API revised:
```
isOpen → get('open')
getDate → get('select')
getDateLimit → get('min') or get('max')
setDate → set('select', …)
setDateLimit → set('min', …) or set('max', …)
show → set('view', …)
```
- Options revised:
```
showMonthsFull → showMonthsShort
showWeekdaysShort → showWeekdaysFull
yearSelector → selectYears
monthSelector → selectMonths
dateMin → min
dateMax → max
datesDisabled → disable
onSelect → onSet
```
- Options removed:
```
monthPrev
monthNext
```
To add labels for the month navigation tabs, use CSS pseudo-elements instead.
- A few [HTML classes](http://amsul.github.io/pickadate.js/date.htm#classes) name and property changes.
- [Formatting rules](http://amsul.github.io/pickadate.js/date.htm#formats) that appear within a word need to be escaped with an exclamation mark (!).
<br>
#### Please do read the [docs](http://amsul.github.io/pickadate.js/date.htm#options) and [api](http://amsul.github.io/pickadate.js/api.htm) to see exactly how these new options and methods work.
<br>
## Older changelogs
If youre looking for changes in older versions, please [browse the tags](https://github.com/amsul/pickadate.js/tags) for the relevant commit archive and changelog file.

View File

@ -0,0 +1,53 @@
# Contributing
Want to help contribute something to the project? Awesome! :smile:
Please take a moment to review this doc to make contributions easy and effective for everyone.
<br>
<a name="bugs"></a>
## Bug reports
If you believe youve found a bug within the repository code:
- Search the existing issues to avoid duplicates and to check if it has already been solved.
- Make sure youre using the latest build.
- Isolate the problem and create a [reduced test case](http://css-tricks.com/6263-reduced-test-cases/) - preferably supported with a live example.
- Try to be as detailed as possible in the report (OS, browser, expected outcome vs actual outcome, etc).
- Please **do not** use the issue tracker for personal support requests. Instead try [Stack Overflow](http://stackoverflow.com) or the likes.
<br>
<a name="pull-requests"></a>
## Pull requests
If youre submitting a pull request, please respect the coding standards used (indentations, comments, semi-colons, etc) as per the **Golden Rule**:
> All code in any code base should look like a single person typed it, no matter how many people contributed.
A few other things to keep in mind:
- Make sure the changes are suitable within the scope of this project.
- Discuss any significant features before endeavoring into developing them. Id hate to have anyone spend effort on something only for me to not merge it into the main project.
- Include the relevant test coverage if any JavaScript files are involved.
- Compile the project using `grunt --verbose` to make sure everything passes with a green flag.
- Use the Semantic Versioning guide, as mentioned in the [readme file]({%= meta.gitrepo_url %}/#readme), in the case that a version bump is due.
#### All pull requests should be submitted to the `dev` branch.
<br>
<a name="features"></a>
## Feature requests
Feature requests are welcome. But take a moment to find out whether your idea fits within the scope and aims of this project. Its up to *you* to make a strong case to the merits of this feature. Please provide as much detail and context as possible.

View File

@ -0,0 +1,7 @@
Copyright {%= grunt.template.date('yyyy') %} {%= pkg.author.name %}, {%= pkg.author.url %}
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,164 @@
# {%= pkg.name %} v{%= pkg.version %} [![{%= pkg.name %} build status](https://travis-ci.org/amsul/pickadate.js.svg?branch=gh-pages)](https://travis-ci.org/amsul/pickadate.js) [![{%= pkg.name %} dev dependencies status](https://david-dm.org/amsul/pickadate.js/dev-status.svg)](https://david-dm.org/amsul/pickadate.js#info=devDependencies)
{%= pkg.description %}
{%
fileSize_js_core = meta.fileSize( grunt.file.read( dirs.lib.min + '/picker.js') )
fileSize_js_date = meta.fileSize( grunt.file.read( dirs.lib.min + '/picker.date.js') )
fileSize_js_time = meta.fileSize( grunt.file.read( dirs.lib.min + '/picker.time.js') )
fileSize_css_default = meta.fileSize( grunt.file.read( dirs.themes.min + '/default.css') )
fileSize_css_classic = meta.fileSize( grunt.file.read( dirs.themes.min + '/classic.css') )
fileSize_css_default_date = meta.fileSize( grunt.file.read( dirs.themes.min + '/default.date.css') )
fileSize_css_default_time = meta.fileSize( grunt.file.read( dirs.themes.min + '/default.time.css') )
fileSize_css_classic_date = meta.fileSize( grunt.file.read( dirs.themes.min + '/classic.date.css') )
fileSize_css_classic_time = meta.fileSize( grunt.file.read( dirs.themes.min + '/classic.time.css') )
fileSize_css_rtl = meta.fileSize( grunt.file.read( dirs.themes.min + '/rtl.css') )
%}
#### To get started, check out the:
[Homepage]({%= pkg.homepage %}) - [Date picker]({%= pkg.homepage %}/date.htm) - [Time picker]({%= pkg.homepage %}/time.htm) - [API]({%= pkg.homepage %}/api.htm)
#### To get it:
[Download v{%= pkg.version %}]({%= meta.gitrepo_url %}/archive/{%= pkg.version %}.zip) or `git clone git://github.com/amsul/pickadate.js.git` or `bower install pickadate`
<br>
## Upgrading from v2 to v3
The v3 API is significantly different from v2 (all for the greater good!). So if youre upgrading to v3, make sure to read the [changelog]({%= meta.gitrepo_url %}/blob/gh-pages/CHANGELOG.md).
<br>
## Library files
The `{%= dirs.lib.src %}` folder includes the library files with a `compressed` folder containing the minified counter-parts. These files are minified using [Grunt](#building-with-grunt).
### Pickers
There are currently two pickers: **date** and **time**.
File | Contents | Size (min & gzip)
----------------------- | ------------------------ | ----------------------
`picker.js` | __Base *__ | {%= (fileSize_js_core.gzip/1024).toFixed(2) %}kb
`picker.date.js` | Date picker | {%= (fileSize_js_date.gzip/1024).toFixed(2) %}kb
`picker.time.js` | Time picker | {%= (fileSize_js_time.gzip/1024).toFixed(2) %}kb
__*__ The base script is **required** for any of the pickers to function.
_To support old browsers, namely IE8, **also include** the `legacy.js` file._
### Themes
All themes are [generated using LESS](#less-styling) and compiled from the `{%= dirs.themes.src %}` folder into the `{%= dirs.themes.dest %}` folder.
File | Contents | Size (min & gzip)
----------------------- | ---------------------------- | ----------------------
`default.css` | __Base default *__ | {%= (fileSize_css_default.gzip/1024).toFixed(2) %}kb
`default.date.css` | Default date picker | {%= (fileSize_css_default_date.gzip/1024).toFixed(2) %}kb
`default.time.css` | Default time picker | {%= (fileSize_css_default_time.gzip/1024).toFixed(2) %}kb
`classic.css` | __Base classic *__ | {%= (fileSize_css_classic.gzip/1024).toFixed(2) %}kb
`classic.date.css` | Classic date picker | {%= (fileSize_css_classic_date.gzip/1024).toFixed(2) %}kb
`classic.time.css` | Classic time picker | {%= (fileSize_css_classic_time.gzip/1024).toFixed(2) %}kb
`rtl.css` | __RTL language stylings **__ | {%= (fileSize_css_rtl.gzip/1024).toFixed(2) %}kb
__*__ One and only one base stylesheet is **required**. [Choose a theme]({%= pkg.homepage %}#menu) then include the respective pickers as well.
__**__ For languages with text flowing from right-to-left, also include the `rtl.css` stylesheet.
### Translations
The translations live in the `{%= dirs.translations.src %}` folder. There are currently [{%= grunt.file.expand(dirs.translations.src + '/*.js').length %} language translations]({%= meta.gitrepo_url %}/blob/{%= pkg.version %}/lib/translations) included.
<br>
## Building with Grunt
[Grunt](http://gruntjs.com/) `~{%= grunt.version %}` is used to build the project files. To get started, clone the project and then run:
- `npm install` to get the required node modules.
- `grunt --verbose` to confirm you have all the dependencies.
Read the Gruntfile to see the build tasks and relative directories of the source files.
<br>
<a name="less-styling"></a>
## Styling with LESS
The picker themes are built using [LESS](http://lesscss.org/) with Grunt. To customize the CSS output, read the `_variables.less` file in the `{%= dirs.themes.src %}` folder. You can specify:
- colors for the theme,
- sizes for the picker,
- media-query breakpoints,
- and a whole bunch of other stuff.
After making any changes, run `grunt less:themes` to compile it into CSS.
<br>
## Versioning
To maintain some consistency in the sort of changes to expect with version bumps, [Semantic Versioning guidelines](http://semver.org/) will now be followed as closely as possible:
`<major>.<minor>.<patch>`
Constructed as such:
- `major`: breaks backward compatibility (resets the `minor` and `patch`)
- `minor`: new additions with backward compatibility (resets the `patch`)
- `patch`: bug fixes and misc changes
<br>
## Bugs
Before opening a new issue, please search the existing [Issues]({%= pkg.bugs %}) for anything similar there might already be an answer to your problem. You might also wanna check out the [Contributing]({%= meta.gitrepo_url %}/blob/gh-pages/CONTRIBUTING.md) guide.
<br>
## Contributing
Before contributing any code to the project, please take a look at the [Contributing]({%= meta.gitrepo_url %}/blob/gh-pages/CONTRIBUTING.md) guide.
<br>
## Support
If you find this library useful and would like to see further development, consider [supporting it](http://selz.co/1g80kCZ).
<br><br>
---
© {%= grunt.template.date('yyyy') %} [Amsul](http://twitter.com/amsul_)
Licensed under [{%= pkg.licenses[0].type %}]({%= pkg.licenses[0].url %})

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,94 @@
<!doctype html>
<meta charset="utf-8">
<meta name="author" content="Amsul - http://amsul.ca">
<meta name="viewport" content="width=device-width">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>{%= pkg.title %}{%= page != 'index' ? ' / ' + page : '' %}</title>
<link rel="shortcut icon" href="{%= dirs.demo.images %}/favicon.ico">
<link rel="stylesheet" href="{%= dirs.demo.styles.dest %}/main.css">
<link rel="stylesheet" href="{%= dirs.themes.dest %}/default.css" id="theme_base">
<link rel="stylesheet" href="{%= dirs.themes.dest %}/default.date.css" id="theme_date">
<link rel="stylesheet" href="{%= dirs.themes.dest %}/default.time.css" id="theme_time">
<!--[if lt IE 9]>
<script>document.createElement('section')</script>
<![endif]-->
<body>
<header class="section section--header section--splash">
<div class="section__block section__block--scoped">
<nav class="menu menu--header page-target" id="menu">
<ul class="menu__list menu__list--header">
<li class="menu__item menu__item--touch menu__item--logo"><a class="menu__link menu__link--dimmed" href="index.htm"><span class="logocon"><span class="logocon__p">p</span><span class="logocon__u"></span></span></a></li>
<li class="menu__item menu__item--touch menu__item--toggle">
<a class="menu__link menu__link--dimmed page-target__display" href="#menu"><span class="page-target__toggle"></span></a>
<a class="menu__link menu__link--dimmed page-target__display--flip" href="#"><span class="page-target__toggle"></span></a>
</li>
<li class="menu__item menu__item--clear"></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed{%= page == 'date' ? ' menu__link--active' : '' %}" href="date.htm">Date picker</a></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed{%= page == 'time' ? ' menu__link--active' : '' %}" href="time.htm">Time picker</a></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed{%= page == 'api' ? ' menu__link--active' : '' %}" href="api.htm">API</a></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed{%= page == 'v2' ? ' menu__link--active' : '' %}" href="v2-(deprecated)/index.htm">v2 docs</a></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed" href="{%= meta.gitrepo_url %}">Github</a></li>
<li class="menu__item menu__item--responsive page-target__reveal menu__item--trail">
<span class="menu__link">Themes: <input class="theme-toggle__input" type="radio" id="show_theme_default" name="show_theme" value="default" checked hidden><label class="theme-toggle__label theme-toggle__label--first" for="show_theme_default">default</label><input class="theme-toggle__input" type="radio" id="show_theme_classic" name="show_theme" value="classic" hidden><label class="theme-toggle__label theme-toggle__label--last" for="show_theme_classic" class="checked-negative">classic</label></span>
</li>
</ul>
</nav>
</div> <!-- .section__block -->
{%= page == 'index' ? grunt.file.read( dirs.docs.src + '/hero.htm' ) : '' %}
</header> <!-- .section -->
{%= content %}
<footer class="section section--footer">
<div class="section__block section__block--scoped text-center">
<h2 class="heading heading--one heading--divide-center"><span class="heading__text peace">&#x270C;</span></h2>
<p class="heading heading--three heading--thin">Made by <a href="http://twitter.com/amsul_">Amsul</a></p>
<p>Code licensed under <a href="{%= pkg.licenses[0].url %}">{%= pkg.licenses[0].type %}</a></p>
<div class="text-tiny text-dimmed">
<p>Pattern from <a href="http://subtlepatterns.com/">Subtle Patterns</a>&nbsp;&nbsp;&nbsp;&nbsp;Syntax highlighting with <a href="http://craig.is/making/rainbows">Rainbow.js</a></p>
<p><a href="http://selz.co/1g80kCZ">Share some &hearts;</a></p>
</div>
</div> <!-- .section__block -->
</footer> <!-- .section -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>window.jQuery||document.write('<script src="tests/jquery.2.0.0.js"><\/script>')</script>
<script src="{%= dirs.lib.src %}/picker.js"></script>
<script src="{%= dirs.lib.src %}/picker.date.js"></script>
<script src="{%= dirs.lib.src %}/picker.time.js"></script>
<script src="{%= dirs.lib.src %}/legacy.js"></script>
<script src="{%= dirs.demo.scripts %}/demo.js"></script>
<script src="{%= dirs.demo.scripts %}/rainbow.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36321179-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>

View File

@ -0,0 +1,662 @@
{% dateDemoField = function( props ) {
props = props || {}
return '<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper">' +
( props.pre || '' ) +
'<input id="' + ( props.id || '' ) + '" class="fieldset__input ' + ( props.klass || '' ) + '" type=text placeholder="Try me&hellip;">' +
'</div></fieldset>'
} %}
<section class="section">
<div class="section__block section__block--scoped">
<h1 class="heading heading--divide-center heading--divide-first"><span class="heading__text">The Date Picker<a class="heading__anchor" name="picker" href="#picker">&sect;</a></span></h1>
<h3 class="heading heading--thin">The basic setup requires targetting an <code class="tag-name">input</code> element and invoking the&nbsp;picker:</h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate()</code></pre>
{%= dateDemoField({ klass: 'js__datepicker' }) %}
<div class="section__block section__block--notification">
<p>Along with v3, the v2 options and API have effectively been deprecated. Read up on the <a href="{%= meta.gitrepo_url %}/blob/{%= pkg.version %}/CHANGELOG.md">full changelog here</a>.</p>
<p>One of the most critical changes is that the “month” used to create dates, just as in JavaScripts native Date object, now has <a href="{%= meta.gitrepo_url %}/blob/{%= pkg.version %}/CHANGELOG.md#zero-as-index">zero-as-index</a>.</p>
</div>
</div> <!-- .section__block -->
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Options<a class="heading__anchor" name="options" href="#options">&sect;</a></span></h2>
<p>With the basic invocation above, these are the default settings:</p>
<pre><code data-language="javascript">// <a href="#strings">Strings</a> and <a href="#translations">translations</a>
monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
showMonthsShort: undefined,
showWeekdaysFull: undefined,
// <a href="#buttons">Buttons</a>
today: 'Today',
clear: 'Clear',
// <a href="#accessibility-labels">Accessibility labels</a>
labelMonthNext: 'Next month',
labelMonthPrev: 'Previous month',
labelMonthSelect: 'Select a month',
labelYearSelect: 'Select a year',
// <a href="#formats">Formats</a>
format: 'd mmmm, yyyy',
formatSubmit: undefined,
hiddenPrefix: undefined,
hiddenSuffix: '_submit',
hiddenName: undefined,
// <a href="#editable">Editable input</a>
editable: undefined,
// <a href="#selectors">Dropdown selectors</a>
selectYears: undefined,
selectMonths: undefined,
// <a href="#first-weekday">First day of the week</a>
firstDay: undefined,
// <a href="#limits">Date limits</a>
min: undefined,
max: undefined,
// <a href="#disable-dates">Disable dates</a>
disable: undefined,
// <a href="#container">Root container</a>
container: undefined,
// <a href="#events">Events</a>
onStart: undefined,
onRender: undefined,
onOpen: undefined,
onClose: undefined,
onSet: undefined,
onStop: undefined,
// <a href="#classes">Classes</a>
klass: {
// The element states
input: 'picker__input',
active: 'picker__input--active',
// The root picker and states *
picker: 'picker',
opened: 'picker--opened',
focused: 'picker--focused',
// The picker holder
holder: 'picker__holder',
// The picker frame, wrapper, and box
frame: 'picker__frame',
wrap: 'picker__wrap',
box: 'picker__box',
// The picker header
header: 'picker__header',
// Month navigation
navPrev: 'picker__nav--prev',
navNext: 'picker__nav--next',
navDisabled: 'picker__nav--disabled',
// Month &amp; year labels
month: 'picker__month',
year: 'picker__year',
// Month &amp; year dropdowns
selectMonth: 'picker__select--month',
selectYear: 'picker__select--year',
// Table of dates
table: 'picker__table',
// Weekday labels
weekdays: 'picker__weekday',
// Day states
day: 'picker__day',
disabled: 'picker__day--disabled',
selected: 'picker__day--selected',
highlighted: 'picker__day--highlighted',
now: 'picker__day--today',
infocus: 'picker__day--infocus',
outfocus: 'picker__day--outfocus',
// The picker footer
footer: 'picker__footer',
// Today &amp; clear buttons
buttonClear: 'picker__button--clear',
buttonToday: 'picker__button--today'
}</code></pre>
<div class="section__block section__block--notification">
<p><b>*</b> It is important to not add any stylings to the pickers root element. Instead, target the <code>.picker__holder</code> element (or any other within) based on the state of the root element.</p>
</div>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Strings<a class="heading__anchor" name="strings" href="#strings">&sect;</a></span></h2>
<p>Change the month and weekday labels as you find suitable:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
showMonthsShort: true
})</code></pre>
{%= dateDemoField({ id: 'date_demo__weekdaysShort' }) %}
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Buttons<a class="heading__anchor" name="buttons" href="#buttons">&sect;</a></span></h2>
<p>Change the text or hide a button completely by passing a false-y value:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
today: '',
clear: 'Clear selection'
})</code></pre>
{%= dateDemoField({ id: 'date_demo__buttons' }) %}
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Accessibility labels<a class="heading__anchor" name="accessibility-labels" href="#accessibility-labels">&sect;</a></span></h2>
<p>Change the <code>title</code> attributes to several elements within the picker:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
labelMonthNext: 'Go to the next month',
labelMonthPrev: 'Go to the previous month',
labelMonthSelect: 'Pick a month from the dropdown',
labelYearSelect: 'Pick a year from the dropdown',
selectMonths: true,
selectYears: true
})</code></pre>
{%= dateDemoField({ id: 'date_demo__accessibility-labels' }) %}
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Translations<a class="heading__anchor" name="translations" href="#translations">&sect;</a></span></h2>
<p>The picker can be extended to add support for internationalization. Translations for <a href="{%= pkg.repository.url.replace(/.git$/,'') %}/blob/{%= pkg.version %}/lib/translations">{%= grunt.file.expand( dirs.translations.min + '/*.js' ).length %} languages</a> are available out of the box, which you can include in one of two ways:</p>
<pre class="pre--demo"><code data-language="javascript">// Extend the default picker options for <u>all instances</u>.
$.extend($.fn.pickadate.defaults, {
monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
today: 'aujourd\'hui',
clear: 'effacer',
formatSubmit: 'yyyy/mm/dd'
})
// Or, pass the months and weekdays as an array for <u>each invocation</u>.
$('.datepicker').pickadate({
monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
today: 'aujourd\'hui',
clear: 'effacer',
formatSubmit: 'yyyy/mm/dd'
})</code></pre>
{%= dateDemoField({ id: 'date_demo__translations' }) %}
<div class="section__block section__block--notification">
<p>When using translations, <a href="#formats">specify the <code>formatSubmit</code> and <code class="attribute">data-value</code></a> to ensure the date parses correctly regardless of locale.</p>
</div>
<h3 class="heading heading--divide"><span class="heading__text">RTL languages<a class="heading__anchor--bigger" name="translations_rtl" href="#translations_rtl">&sect;</a></span></h3>
<p>For languages that flow from right-to-left (RTL), youll need to switch the arrows and text direction by linking along the <code>rtl.css</code> file:</p>
<pre class="pre--demo"><code data-language="html">&lt;!-- Add the stylings *after* the pickadate theme files --&gt;
&lt;link rel="stylesheet" href="lib/themes/rtl.css"&gt;
&lt;!-- Add the language *after* the pickadate script files --&gt;
&lt;script src="lib/translations/ar.js"&gt;&lt;/script&gt;</code></pre>
{%= dateDemoField({ id: 'date_demo__translations_rtl' }) %}
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Formats<a class="heading__anchor" name="formats" href="#formats">&sect;</a></span></h2>
<p>Display a human-friendly format and use an alternate one to submit to the server.</p>
<p>This is done by creating a new hidden <code class="tag-name">input</code> element with the same <code class="attribute">name</code> attribute as the original with an optional prefix/suffix:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
// Escape any <a href="#formatting-rules">“rule” characters</a> with an exclamation mark (!).
format: 'You selecte!d: dddd, dd mmm, yyyy',
formatSubmit: 'yyyy/mm/dd',
hiddenPrefix: 'prefix__',
hiddenSuffix: '__suffix'
})</code></pre>
{%= dateDemoField({ id: 'date_demo__formats--a' }).replace( 'type=text', 'name=date_input type=text' ) %}
<h3 class="heading heading--divide"><span class="heading__text">Send the hidden <code class="attribute">value</code> only<a class="heading__anchor" name="formats_use_hidden_only" href="#formats_use_hidden_only">&sect;</a></span></h3>
<p>A majority of the time, the value that needs to be sent to the server is just the hidden value and not the visible one. To make this happen, use the <code>hiddenName</code> option.</p>
<p>This essentially nullifies the <code>hiddenPrefix</code> and <code>hiddenSuffix</code>, strips the <code class="attribute">name</code> attribute from the source <code class="tag-name">input</code>, and then sets it as the <code class="attribute">name</code> of the hidden <code class="tag-name">input</code>:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
formatSubmit: 'yyyy/mm/dd',
hiddenName: true
})</code></pre>
{%= dateDemoField({ id: 'date_demo__formats--b' }).replace( 'type=text', 'name=date_input type=text' ) %}
<h3 class="heading heading--divide"><span class="heading__text">Pre-fill values using custom formats or translations<a class="heading__anchor--bigger" name="formats_prefill" href="#formats_prefill">&sect;</a><a name="formats_translations" href="#formats_translations"></a></span></h3>
<p>When using a custom <a href="#formatting-rules">formatting rule</a> for the <code>format</code> option or when using <a href="#translations">translations</a>, the <code class="tag-name">input</code> element should be given a <code class="attribute">data-value</code> attribute formatted using the <code>formatSubmit</code> the elements <code class="attribute">value</code> can be left blank. This helps to parse the date from custom formats into various languages:</p>
<pre class="pre--demo"><code data-language="html">&lt;input data-value="2013/04/20"></code></pre>
{%= dateDemoField({ id: 'date_demo__formats--c' }).replace( 'type=text', 'name=date_demo__formats type=text data-value="2013/04/20"') %}
<h3 class="heading heading--divide"><span class="heading__text">Formatting Rules<a class="heading__anchor--bigger" name="formatting-rules" href="#formatting-rules">&sect;</a></span></h3>
<p>To use a formatting rule, make sure to keep a delimiter between each rule. This ensures each rules value can be parsed correctly. Example:<br><b>Bad</b>: <code>yyyymmdd</code>; <b>Good</b>: <code>yyyy-mm-dd</code>.</p>
<p>The following rules can be used to format any date:</p>
<table class="table">
<thead>
<tr>
<th>Rule</th>
<th>Description</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>d</code></td>
<td>Date of the month</td>
<td>1 &ndash; 31</td>
</tr>
<tr>
<td><code>dd</code></td>
<td>Date of the month with a leading zero</td>
<td>01 &ndash; 31</td>
</tr>
<tr>
<td><code>ddd</code></td>
<td>Day of the week in short form</td>
<td>Sun &ndash; Sat</td>
</tr>
<tr>
<td><code>dddd</code></td>
<td>Day of the week in full form</td>
<td>Sunday &ndash; Saturday</td>
</tr>
</tbody>
<tbody>
<tr>
<td><code>m</code></td>
<td>Month of the year</td>
<td>1 &ndash; 12</td>
</tr>
<tr>
<td><code>mm</code></td>
<td>Month of the year with a leading zero</td>
<td>01 &ndash; 12</td>
</tr>
<tr>
<td><code>mmm</code></td>
<td>Month name in short form</td>
<td>Jan &ndash; Dec</td>
</tr>
<tr>
<td><code>mmmm</code></td>
<td>Month name in full form</td>
<td>January &ndash; December</td>
</tr>
</tbody>
<tbody>
<tr>
<td><code>yy</code></td>
<td>Year in short form <b>*</b></td>
<td>00 &ndash; 99</td>
</tr>
<tr>
<td><code>yyyy</code></td>
<td>Year in full form</td>
<td>2000 &ndash; 2999</td>
</tr>
</tbody>
</table>
<div class="section__block section__block--notification">
<p><b>*</b> If you use the <code>yy</code> rule in the <code>format</code> option, you <b>must</b> specify the <code>yyyy</code> rule in the <a href="#formats"><code>formatSubmit</code> option</a> with the appropriate <a href="#formats_prefill"><code>data-value</code> attribute</a> to ensure the date parses accurately.</p>
<p>Never use the <code>yy</code> rule in the <code>formatSubmit</code> option.</p>
</div>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Editable input<a class="heading__anchor" name="editable" href="#editable">&sect;</a></span></h2>
<p>By default, typing into the input is disabled by giving it a <code class="attribute">readOnly</code> attribute. Doing so ensures that virtual keyboards dont pop open on touch devices. It is also a confirmation that values passed to the server will be of a consistent format.</p>
<p>However, this behavior can be changed using the <code>editable</code> option:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
editable: true
})</code></pre>
{%= dateDemoField({ id: 'date_demo__editable' }) %}
<div class="section__block section__block--notification">
<p>An important thing to note here is that this disables keyboard bindings on the input element, such as arrow keys opening the picker. You will have to add your own bindings as you see fit.</p>
</div>
<h3 class="heading heading--divide"><span class="heading__text">Using HTML5 attributes<a class="heading__anchor--bigger" name="html5-attributes" href="#html5-attributes">&sect;</a></span></h3>
<p>Because each <code class="tag-name">input</code> is <a href="#editable"><code class="attribute">readOnly</code> by default</a>, HTML5 attributes, such as <code class="attribute">required</code> and <code class="attribute">pattern</code>, do not get enforced.</p>
<p>To enable default browser behavior on these attributes, set the <a href="#editable"><code>editable</code> property to <code class="constant">true</code></a>.</p>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Dropdown Selectors<a class="heading__anchor" name="selectors" href="#selectors">&sect;</a></span></h2>
<p>Display <code class="tag-name">select</code> menus to pick the month and year. Anything truth-y enables the selectors and anything false-y switches them into text:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
selectYears: true,
selectMonths: true
})</code></pre>
{%= dateDemoField({ id: 'date_demo__selectors--a' }) %}
<div class="section__block section__block--notification">
<p>When <code>selectYears</code> is truthy, the year selector appears <i>before</i> the month. <a href="{%= meta.gitrepo_url %}/issues/384">Read here</a> for more details on why.</p>
</div>
<p>You can also specify the number of years to show in the dropdown using an even integer - half before and half after the year in focus:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
// `true` defaults to 10.
selectYears: 4
})</code></pre>
{%= dateDemoField({ id: 'date_demo__selectors--b' }) %}
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">First Weekday<a class="heading__anchor" name="first-weekday" href="#first-weekday">&sect;</a></span></h2>
<p>The first day of the week can be set to either Sunday or Monday. Anything truth-y sets it as Monday and anything false-y as Sunday:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
firstDay: 1
})</code></pre>
{%= dateDemoField({ id: 'date_demo__firstDay' }) %}
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Date Limits<a class="heading__anchor" name="limits" href="#limits">&sect;</a></span></h2>
<p>Set the minimum and maximum selectable dates on the picker.</p>
<h3 class="heading heading--divide"><span class="heading__text">Using JavaScript dates<a class="heading__anchor--bigger" name="limits-use-dates" href="#limits-use-dates">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
min: new Date(2013,3,20),
max: new Date(2013,7,14)
})</code></pre>
{%= dateDemoField({ id: 'date_demo__limits--a' }) %}
<h3 class="heading heading--divide"><span class="heading__text">Using arrays formatted as <code>[YEAR,MONTH,DATE]</code><a class="heading__anchor--bigger" name="limits-use-arrays" href="#limits-use-arrays">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
min: [2013,3,20],
max: [2013,7,14]
})</code></pre>
{%= dateDemoField({ id: 'date_demo__limits--b' }) %}
<h3 class="heading heading--divide"><span class="heading__text">Using integers or a boolean<a class="heading__anchor--bigger" name="limits-relative" href="#limits-relative">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
// An integer (positive/negative) sets it relative to today.
min: -15,
// `true` sets it to today. `false` removes any limits.
max: true
})</code></pre>
{%= dateDemoField({ id: 'date_demo__limits--c' }) %}
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Disable Dates<a class="heading__anchor" name="disable-dates" href="#disable-dates">&sect;</a></span></h2>
<p>Disable a specific or arbitrary set of dates selectable on the picker.</p>
<h3 class="heading heading--divide"><span class="heading__text">Using JavaScript dates<a class="heading__anchor--bigger" name="disable-dates-use-dates" href="#disable-dates-use-dates">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
disable: [
new Date(2013,3,13),
new Date(2013,3,29)
]
})</code></pre>
{%= dateDemoField({ id: 'date_demo__disable-dates--a' }) %}
<h3 class="heading heading--divide"><span class="heading__text">Using arrays formatted as <code>[YEAR,MONTH,DATE]</code><a class="heading__anchor--bigger" name="disable-dates-use-arrays" href="#disable-dates-use-arrays">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
disable: [
[2013,3,3],
[2013,3,12],
[2013,3,20]
]
})</code></pre>
{%= dateDemoField({ id: 'date_demo__disable-dates--b' }) %}
<h3 class="heading heading--divide"><span class="heading__text">Using integers as days of the week (1 to 7)<a class="heading__anchor--bigger" name="disable-dates-use-integers" href="#disable-dates-use-integers">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
disable: [
1, 4, 7
]
})</code></pre>
{%= dateDemoField({ id: 'date_demo__disable-dates--c' }) %}
<h3 class="heading heading--divide"><span class="heading__text">Using objects as a range of dates<a class="heading__anchor--bigger" name="disable-dates-use-ranges" href="#disable-dates-use-ranges">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
disable: [
{ from: [2014,2,14], to: [2014,2,27] }
]
})</code></pre>
{%= dateDemoField({ id: 'date_demo__disable-dates--d' }) %}
<p>The values for <code>from</code> &amp; <code>to</code> can be:</p>
<ul>
<li>A JavaScript Date object,</li>
<li>An array formatted as <code>[YEAR,MONTH,DATE]</code>,</li>
<li>And <code class="constant">true</code> to set it as “today”.</li>
</ul>
<p>The values can also be integers representing dates relative to the other:</p>
<ul>
<li><code>to</code> can only be positive: <pre><code data-language="javascript">{ from: [2014,3,12], to: 10 }</code></pre></li>
<li><code>from</code> can only be negative: <pre><code data-language="javascript">{ from: -10, to: true }</code></pre></li>
</ul>
<h3 class="heading heading--divide"><span class="heading__text"><i><u>Disabling all</u></i> with a set of exceptions<a class="heading__anchor--bigger" name="disable-dates-all" href="#disable-dates-all">&sect;</a></span></h3>
<p>Enable only a specific or arbitrary set of dates by setting <code class="constant">true</code> as the first item in the collection:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
disable: [
true,
1, 4, 7,
[2013,3,3],
[2013,3,12],
[2013,3,20],
new Date(2013,3,13),
new Date(2013,3,29)
]
})</code></pre>
{%= dateDemoField({ id: 'date_demo__disable-dates--e' }) %}
<h3 class="heading heading--divide"><span class="heading__text">Disabling ranges with exceptions<a class="heading__anchor--bigger" name="disable-dates-inverted" href="#disable-dates-inverted">&sect;</a></span></h3>
<p>Enable dates that fall within a range of disabled dates by adding the <code class="string">inverted</code> parameter to the item within the collection:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
disable: [
5,
[2013, 10, 21, 'inverted'],
{ from: [2014, 3, 15], to: [2014, 3, 25] },
[2014, 3, 20, 'inverted'],
{ from: [2014, 3, 17], to: [2014, 3, 18], inverted: true }
]
})</code></pre>
{%= dateDemoField({ id: 'date_demo__disable-dates--f' }) %}
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">container<a class="heading__anchor" name="container" href="#container">&sect;</a></span></h2>
<p>By default, the pickers root element is inserted right after the <code class="keyword">input</code> element. Specify where to insert the root element by passing any valid CSS selector to this option:</p>
<div id="root-outlet" style="position:relative"></div>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
container: '#root-outlet'
})</code></pre>
{%= dateDemoField({ id: 'date_demo__container' }) %}
<div class="section__block section__block--notification">
<p>This is especially important when the <code class="keyword">input</code> falls within a <code class="keyword">label</code> element because click events bubble up to the <code class="keyword">label</code> element and re-open the picker.</p>
</div>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">events<a class="heading__anchor" name="events" href="#events">&sect;</a></span></h2>
<p>Fire off events as the user interacts with the picker:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
onStart: function() {
console.log('Hello there :)')
},
onRender: function() {
console.log('Whoa.. rendered anew')
},
onOpen: function() {
console.log('Opened up')
},
onClose: function() {
console.log('Closed now')
},
onStop: function() {
console.log('See ya.')
},
onSet: function(context) {
console.log('Just set stuff:', context)
}
})</code></pre>
{%= dateDemoField({ id: 'date_demo__events' }).replace( 'Try me', 'Open your console and try me' ) %}
<p>The <code class="function">onSet</code> event is the only callback that is passed a <code>context</code> argument that provides details as to which properties are being “set”.</p>
<p>Within scope of all six of these events, <code class="keyword">this</code> refers to <a href="api.htm">the picker</a>.</p>
<p>To learn more on how to use the picker object, read the <a href="api.htm">API</a> documentation.</p>
</div> <!-- .section__block -->
</section> <!-- .section -->

View File

@ -0,0 +1,10 @@
<div class="section__block text-center">
<h1 class="heading heading--splash"><img src="demo/images/logo.png" alt="pickadate.js" width="478" height="90"></h1>
<h2 class="heading heading--thin">The mobile-friendly, responsive, and&nbsp;lightweight<br>jQuery date <span class="ampersand">&amp;</span> time input picker.</h2>
<h3 class="heading heading--thin"><a class="button" href="https://github.com/amsul/pickadate.js/archive/{%= pkg.version %}.zip">Download {%= pkg.title %} v{%= pkg.version %}</a></h3>
<div class="groupset groupset--splash">
<span class="groupset__item"><iframe src="http://ghbtns.com/github-btn.html?user=amsul&repo=pickadate.js&size=large&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="145" height="30"></iframe></span>
<span class="groupset__item"><iframe src="http://ghbtns.com/github-btn.html?user=amsul&repo=pickadate.js&size=large&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="135" height="30"></iframe></span>
</div>
</div> <!-- .section__block -->

View File

@ -0,0 +1,92 @@
{%
fileSize_js_core = meta.fileSize( grunt.file.read( dirs.lib.min + '/picker.js') ).gzip
fileSize_js_date = meta.fileSize( grunt.file.read( dirs.lib.min + '/picker.date.js') ).gzip
fileSize_js_time = meta.fileSize( grunt.file.read( dirs.lib.min + '/picker.time.js') ).gzip
fileSize_css_core = meta.fileSize( grunt.file.read( dirs.themes.min + '/default.css') ).gzip
fileSize_css_date = meta.fileSize( grunt.file.read( dirs.themes.min + '/default.date.css') ).gzip
fileSize_css_time = meta.fileSize( grunt.file.read( dirs.themes.min + '/default.time.css') ).gzip
fileSize_js = fileSize_js_core + fileSize_js_date + fileSize_js_time
fileSize_js = (fileSize_js/1024).toFixed(0)
fileSize_css = fileSize_css_core + fileSize_css_date + fileSize_css_time
fileSize_css = (fileSize_css/1024).toFixed(0)
languagesCount = grunt.file.expand(dirs.translations.min + '/*.js').length
%}
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--one heading--divide heading--divide-first"><span class="heading__text">Demo<a class="heading__anchor" name="demo" href="#demo">&sect;</a></span></h2>
<pre class="pre--demo"><code data-language="javascript">// The date picker (<a href="date.htm">read the docs</a>)
$('.datepicker').pickadate()</code></pre>
<fieldset class="fieldset fieldset--demo"><div class="fieldset__wrapper"><input class="fieldset__input js__datepicker" type="text" placeholder="Try me&hellip;"></div></fieldset>
<pre class="pre--demo"><code data-language="javascript">// The time picker (<a href="time.htm">read the docs</a>)
$('.timepicker').pickatime()</code></pre>
<fieldset class="fieldset fieldset--demo"><div class="fieldset__wrapper"><input class="fieldset__input js__timepicker" type="text" placeholder="Try me&hellip;"></div></fieldset>
<div class="heading--three">
<p>Theres a tonne of options to customize the <a href="date.htm">date</a> and <a href="time.htm">time</a> pickers, such as month/year selectors, time intervals, etc.</p>
<p>Theres also a rich <a href="api.htm">API</a> to extend the functionality of the picker. Some examples are <a href="http://codepen.io/collection/vLcih">displayed on Codepen</a>.</p>
</div>
<div class="section__block section__block--notification">
<p>When using the “classic” theme, it is important to have a wrapper <code>div</code> with <code>position: relative</code> around the source <code>input</code> to ensure the picker is sized according to the <code>input</code> element it is bound to.</p>
</div>
</div> <!-- .section__block -->
<div class="section__block section__block--scoped">
<h2 class="heading heading--one heading--divide"><span class="heading__text">Features<a class="heading__anchor" name="features" href="#features">&sect;</a></span></h2>
<div class="heading--three">
<ul class="list list--checked">
<li>Supports <a href="http://jquery.com">jQuery</a> 1.7 and up.</li>
<li>Is ARIA-enabled to be WCAG 2.0 compliant. <small class="text-dimmed">(added in v3.4)</small></li>
<li>Leaves a tiny footprint of {%= fileSize_js %}kb JS and {%= fileSize_css %}kb CSS. <small class="text-dimmed">(minified and gzipped)</small></li>
<li>Comes with translations for {%= languagesCount %} languages.</li>
<li>Has touch &amp; keyboard friendliness.</li>
<li>Follows <a href="http://bem.info/">BEM</a> style class naming.</li>
<li>Utilizes <a href="http://lesscss.org/">LESS</a> based stylesheets.</li>
<li>Includes a <a href="http://gruntjs.com/">Grunt</a> based build system.</li>
</ul>
</div>
</div> <!-- .section__block -->
<div class="section__block section__block--scoped">
<h2 class="heading heading--one heading--divide"><span class="heading__text">Browser Support<a class="heading__anchor" name="browser-support" href="#browser-support">&sect;</a></span></h2>
<p class="heading--three">Supports all modern browsers and IE8+.</p>
<p>Specifically, v3 has been tested with <a href="https://www.google.com/chrome/">Chrome</a> <small class="text-dimmed text-tiny">MWA</small>, <a href="http://www.mozilla.org/firefox/">Firefox</a> <small class="text-dimmed text-tiny">MWA</small>, <a href="http://www.opera.com/">Opera</a> <small class="text-dimmed text-tiny">MWA</small>, <a href="http://www.apple.com/ca/safari/">Safari</a> <small class="text-dimmed text-tiny">Mi</small>, <a href="http://windows.microsoft.com/ie/">Internet Explorer</a> <small class="text-dimmed text-tiny">W</small>, <a href="http://www.blackberry.com/">Blackberry</a> 6.0+ and <a href="http://www.android.com/">Android</a> 3.2+ browsers.</p>
<small class="text-dimmed text-tiny">
<p>M = Mac, W = Windows, A = Android, i = iOS</p>
</small>
<div class="section__block section__block--notification">
<p>Make sure to also include the <code>legacy.js</code> file along for the oldie&nbsp;browsers.</p>
</div>
</div> <!-- .section__block -->
<div class="section__block section__block--scoped">
<h2 class="heading heading--one heading--divide"><span class="heading__text">Community<a class="heading__anchor" name="community" href="#community">&sect;</a></span></h2>
<p class="heading--three"><i><b>pickadate</b>.js</i> is an open source project, shared under an <a href="{%= pkg.licenses.url %}">MIT license</a>. All <a href="{%= meta.gitrepo_url %}">code</a> and <a href="{%= pkg.bugs %}">discussions</a> are hosted on Github.</p>
<p>Contributions are very welcome <a href="{%= meta.gitrepo_url %}/blob/gh-pages/CONTRIBUTING.md">please read these pointers</a> before submitting a bug report or feature request.</p>
<p>If you find this library useful and would like to see further development, consider <a href="http://selz.co/1g80kCZ">supporting it</a>.</p>
</div> <!-- .section__block -->
</section> <!-- .section -->

View File

@ -0,0 +1,503 @@
{% timeDemoField = function( props ) {
props = props || {}
return '<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper">' +
( props.pre || '' ) +
'<input id="' + ( props.id || '' ) + '" class="fieldset__input ' + ( props.klass || '' ) + '" type=text placeholder="Try me&hellip;">' +
'</div></fieldset>'
} %}
<section class="section">
<div class="section__block section__block--scoped">
<h1 class="heading heading--divide-center heading--divide-first"><span class="heading__text">The Time Picker<a class="heading__anchor" name="picker" href="#picker">&sect;</a></span></h1>
<h3 class="heading heading--thin">The basic setup requires targetting an <code class="tag-name">input</code> element and invoking the&nbsp;picker:</h3>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime()</code></pre>
{%= timeDemoField({ klass: 'js__timepicker' }) %}
</div> <!-- .section__block -->
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Options<a class="heading__anchor" name="options" href="#options">&sect;</a></span></h2>
<p>With the basic invocation above, these are the default settings:</p>
<pre><code data-language="javascript">// <a href="#translations">Translations</a> and <a href="#buttons">clear button</a>
clear: 'Clear',
// <a href="#formats">Formats</a>
format: 'h:i A',
formatLabel: undefined,
formatSubmit: undefined,
hiddenPrefix: undefined,
hiddenSuffix: '_submit',
// <a href="#editable">Editable input</a>
editable: undefined,
// <a href="#intervals">Time intervals</a>
interval: 30,
// <a href="#limits">Time limits</a>
min: undefined,
max: undefined,
// <a href="#disable-times">Disable times</a>
disable: undefined,
// <a href="#container">Root container</a>
container: undefined,
// <a href="#events">Events</a>
onStart: undefined,
onRender: undefined,
onOpen: undefined,
onClose: undefined,
onSet: undefined,
onStop: undefined,
// <a href="#classes">Classes</a>
klass: {
// The element states
input: 'picker__input',
active: 'picker__input--active',
// The root picker and states *
picker: 'picker picker--time',
opened: 'picker--opened',
focused: 'picker--focused',
// The picker holder
holder: 'picker__holder',
// The picker frame, wrapper, and box
frame: 'picker__frame',
wrap: 'picker__wrap',
box: 'picker__box',
// List of times
list: 'picker__list',
listItem: 'picker__list-item',
// Time states
disabled: 'picker__list-item--disabled',
selected: 'picker__list-item--selected',
highlighted: 'picker__list-item--highlighted',
viewset: 'picker__list-item--viewset',
now: 'picker__list-item--now',
// Clear button
buttonClear: 'picker__button--clear',
}</code></pre>
<div class="section__block section__block--notification">
<p><b>*</b> It is important to not add any stylings to the pickers root element. Instead, target the <code>.picker__holder</code> element (or any other within) based on the state of the root element.</p>
</div>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Translations<a class="heading__anchor" name="translations" href="#translations">&sect;</a></span></h2>
<p>Coming soon...</p>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Clear Button<a class="heading__anchor" name="buttons" href="#buttons">&sect;</a></span></h2>
<p>Change the text or hide the button completely by passing a false-y value:</p>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
clear: ''
})</code></pre>
{%= timeDemoField({ id: 'time_demo__buttons' }) %}
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Formats<a class="heading__anchor" name="formats" href="#formats">&sect;</a></span></h2>
<p>Display a human-friendly label and input format and use an alternate one to submit.</p>
<p>This is done by creating a new hidden <code class="tag-name">input</code> element with the same <code class="attribute">name</code> attribute as the original and an optional prefix/suffix:</p>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
// Escape any “<a href="#formatting-rules">rule</a>” characters with an exclamation mark (!).
format: 'T!ime selected: h:i a',
formatLabel: '&lt;b>h&lt;/b>:i &lt;!i>a&lt;/!i>',
formatSubmit: 'HH:i',
hiddenPrefix: 'prefix__',
hiddenSuffix: '__suffix'
})</code></pre>
{%= timeDemoField({ id: 'time_demo__formats--a' }).replace( 'type=text', 'name=time_input type=text' ) %}
<p>The <code>formatLabel</code> option is unique. It can contain HTML and it can also be a function if you want to create the label during run-time:</p>
<style>
.picker__list small {
color: #999;
float: right;
line-height: 1.5;
}
.picker__list .picker__list-item--highlighted small {
color: #fff;
}
</style>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
formatLabel: function(time) {
var hours = ( time.pick - this.get('now').pick ) / 60,
label = hours &lt; 0 ? ' !hours to now' : hours > 0 ? ' !hours from now' : 'now'
return&nbsp; 'h:i a &lt;sm!all>' + ( hours ? Math.abs(hours) : '' ) + label + '&lt;/sm!all>'
}
})</code></pre>
{%= timeDemoField({ id: 'time_demo__formats--b' }).replace( 'type=text', 'name=time_demo__formats type=text' ) %}
<h3 class="heading heading--divide"><span class="heading__text">Send the hidden <code class="attribute">value</code> only<a class="heading__anchor" name="formats_use_hidden_only" href="#formats_use_hidden_only">&sect;</a></span></h3>
<p>A majority of the time, the value that needs to be sent to the server is just the hidden value and not the visible one. To make this happen, use the <code>hiddenName</code> option.</p>
<p>This essentially nullifies the <code>hiddenPrefix</code> and <code>hiddenSuffix</code>, strips the <code class="attribute">name</code> attribute from the source <code class="tag-name">input</code>, and then sets it as the <code class="attribute">name</code> of the hidden <code class="tag-name">input</code>:</p>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
formatSubmit: 'HH:i',
hiddenName: true
})</code></pre>
{%= timeDemoField({ id: 'time_demo__formats--c' }).replace( 'type=text', 'name=time_input type=text' ) %}
<h3 class="heading heading--divide"><span class="heading__text">Formatting Rules<a class="heading__anchor--bigger" name="formatting-rules" href="#formatting-rules">&sect;</a></span></h3>
<p>The following rules can be used to format any time:</p>
<table class="table">
<thead>
<tr>
<th>Rule</th>
<th>Description</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>h</code></td>
<td>Hour in 12-hour format</td>
<td>1 &ndash; 12</td>
</tr>
<tr>
<td><code>hh</code></td>
<td>Hour in 12-hour format with a leading zero</td>
<td>01 &ndash; 12</td>
</tr>
<tr>
<td><code>H</code></td>
<td>Hour in 24-hour format</td>
<td>0 &ndash; 23</td>
</tr>
<tr>
<td><code>HH</code></td>
<td>Hour in 24-hour format with a leading zero</td>
<td>00 &ndash; 23</td>
</tr>
</tbody>
<tbody>
<tr>
<td><code>i</code></td>
<td>Minutes</td>
<td>00 &ndash; 59</td>
</tr>
</tbody>
<tbody>
<tr>
<td><code>a</code></td>
<td>Day time period</td>
<td>a.m. / p.m.</td>
</tr>
<tr>
<td><code>A</code></td>
<td>Day time period in uppercase</td>
<td>AM / PM</td>
</tr>
</tbody>
</table>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Editable input<a class="heading__anchor" name="editable" href="#editable">&sect;</a></span></h2>
<p>By default, typing into the input is disabled by giving it a <code class="attribute">readOnly</code> attribute. Doing so ensures that virtual keyboards dont pop open on touch devices. It is also a confirmation that values passed to the server will be of a consistent format.</p>
<p>However, this behavior can be changed using the <code>editable</code> option:</p>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
editable: true
})</code></pre>
{%= timeDemoField({ id: 'time_demo__editable' }) %}
<div class="section__block section__block--notification">
<p>An important thing to note here is that this disables keyboard bindings on the input element, such as arrow keys opening the picker. You will have to add your own bindings as you see fit.</p>
</div>
<h3 class="heading heading--divide"><span class="heading__text">Using HTML5 attributes<a class="heading__anchor--bigger" name="html5-attributes" href="#html5-attributes">&sect;</a></span></h3>
<p>Because each <code class="tag-name">input</code> is <a href="#editable"><code class="attribute">readOnly</code> by default</a>, HTML5 attributes, such as <code class="attribute">required</code> and <code class="attribute">pattern</code>, do not get enforced.</p>
<p>To enable default browser behavior on these attributes, set the <a href="#editable"><code>editable</code> property to <code class="constant">true</code></a>.</p>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Intervals<a class="heading__anchor" name="intervals" href="#intervals">&sect;</a></span></h2>
<p>Choose the minutes interval between each time in the list:</p>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
interval: 150
})</code></pre>
{%= dateDemoField({ id: 'time_demo__interval' }) %}
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Time Limits<a class="heading__anchor" name="limits" href="#limits">&sect;</a></span></h2>
<p>Set the minimum and maximum selectable times on the picker.</p>
<h3 class="heading heading--divide"><span class="heading__text">Using JavaScript dates<a class="heading__anchor--bigger" name="limits-use-dates" href="#limits-use-dates">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
min: new Date(2013,3,20,7),
max: new Date(2013,7,14,18,30)
})</code></pre>
{%= dateDemoField({ id: 'time_demo__limits--a' }) %}
<h3 class="heading heading--divide"><span class="heading__text">Using arrays formatted as <code>[HOUR,MINUTE]</code><a class="heading__anchor--bigger" name="limits-use-arrays" href="#limits-use-arrays">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
min: [7,30],
max: [14,0]
})</code></pre>
{%= timeDemoField({ id: 'time_demo__limits--b' }) %}
<h3 class="heading heading--divide"><span class="heading__text">Using integers or a boolean<a class="heading__anchor--bigger" name="limits-relative" href="#limits-relative">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
// An integer (positive/negative) sets it as intervals relative from now.
min: -5,
// `true` sets it to now. `false` removes any limits.
max: true
})</code></pre>
{%= timeDemoField({ id: 'time_demo__limits--c' }) %}
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Disable Times<a class="heading__anchor" name="disable-times" href="#disable-times">&sect;</a></span></h2>
<p>Disable a specific or arbitrary set of times selectable on the picker.</p>
<h3 class="heading heading--divide"><span class="heading__text">Using JavaScript dates<a class="heading__anchor--bigger" name="disable-times-use-dates" href="#disable-times-use-dates">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
disable: [
new Date(2014,3,20,4,30),
new Date(2014,3,20,9)
]
})</code></pre>
{%= timeDemoField({ id: 'time_demo__disable-times--a' }) %}
<h3 class="heading heading--divide"><span class="heading__text">Using arrays formatted as <code>[HOUR,MINUTE]</code><a class="heading__anchor--bigger" name="disable-times-use-arrays" href="#disable-times-use-arrays">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
disable: [
[0,30],
[2,0],
[8,30],
[9,0]
]
})</code></pre>
{%= timeDemoField({ id: 'time_demo__disable-times--b' }) %}
<h3 class="heading heading--divide"><span class="heading__text">Using integers as hours (0 to 23)<a class="heading__anchor--bigger" name="disable-times-use-arrays" href="#disable-times-use-arrays">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
disable: [
3, 5, 7
]
})</code></pre>
{%= timeDemoField({ id: 'time_demo__disable-times--c' }) %}
<h3 class="heading heading--divide"><span class="heading__text">Using objects as a range of times<a class="heading__anchor--bigger" name="disable-times-use-ranges" href="#disable-times-use-ranges">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
disable: [
{ from: [2,0], to: [5,30] }
]
})</code></pre>
{%= dateDemoField({ id: 'date_demo__disable-times--d' }) %}
<p>The values for <code>from</code> &amp; <code>to</code> can be:</p>
<ul>
<li>A JavaScript Date object,</li>
<li>An array formatted as <code>[HOUR,MINUTE]</code>,</li>
<li>And <code class="constant">true</code> to set it as “now”.</li>
</ul>
<p>The values can also be integers representing time intervals relative to the other:</p>
<ul>
<li><code>to</code> can only be positive: <pre><code data-language="javascript">{ from: [3,0], to: 10 }</code></pre></li>
<li><code>from</code> can only be negative: <pre><code data-language="javascript">{ from: -10, to: true }</code></pre></li>
</ul>
<h3 class="heading heading--divide"><span class="heading__text"><i><u>Disabling all</u></i> with a set of exceptions<a class="heading__anchor--bigger" name="disable-times-all" href="#disable-times-all">&sect;</a></span></h3>
<p>Enable only a specific or arbitrary set of times by setting <code class="constant">true</code> as the first item in the collection:</p>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
disable: [
true,
3, 5, 7,
[0,30],
[2,0],
[8,30],
[9,0]
]
})</code></pre>
{%= timeDemoField({ id: 'time_demo__disable-times--e' }) %}
<h3 class="heading heading--divide"><span class="heading__text">Disabling ranges with exceptions<a class="heading__anchor--bigger" name="disable-times-inverted" href="#disable-times-inverted">&sect;</a></span></h3>
<p>Enable times that fall within a range of disabled times by adding the <code class="string">inverted</code> parameter to the item within the collection:</p>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
disable: [
1,
[1, 30, 'inverted'],
{ from: [4, 30], to: [10, 30] },
[6, 30, 'inverted'],
{ from: [8, 0], to: [9, 0], inverted: true }
]
})</code></pre>
{%= timeDemoField({ id: 'time_demo__disable-times--f' }) %}
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">container<a class="heading__anchor" name="container" href="#container">&sect;</a></span></h2>
<p>By default, the pickers root element is inserted right after the <code class="keyword">input</code> element. Specify where to insert the root element by passing any valid CSS selector to this option:</p>
<div id="root-outlet" style="position:relative"></div>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
container: '#root-outlet'
})</code></pre>
{%= timeDemoField({ id: 'time_demo__container' }) %}
<div class="section__block section__block--notification">
<p>This is especially important when the <code class="keyword">input</code> falls within a <code class="keyword">label</code> element because click events bubble up to the <code class="keyword">label</code> element and re-open the picker.</p>
</div>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">events<a class="heading__anchor" name="events" href="#events">&sect;</a></span></h2>
<p>Fire off events as the user interacts with the picker:</p>
<pre class="pre--demo"><code data-language="javascript">$('.timepicker').pickatime({
onStart: function() {
console.log('Hello there :)')
},
onRender: function() {
console.log('Whoa.. rendered anew')
},
onOpen: function() {
console.log('Opened up')
},
onClose: function() {
console.log('Closed now')
},
onStop: function() {
console.log('See ya.')
},
onSet: function(context) {
console.log('Just set stuff:', context)
}
})</code></pre>
{%= timeDemoField({ id: 'time_demo__events' }).replace( 'Try me', 'Open your console and try me' ) %}
<p>The <code class="function">onSet</code> event is the only callback that is passed a <code>context</code> argument that provides details as to which properties are being “set”.</p>
<p>Within scope of all six of these events, <code class="keyword">this</code> refers to <a href="api.htm">the picker</a>.</p>
<p>To learn more on how to use the picker object, read the <a href="api.htm">API</a> documentation.</p>
</div> <!-- .section__block -->
</section> <!-- .section -->

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,59 @@
{
"name": "pickadate",
"version": "3.5.3",
"title": "pickadate.js",
"description": "The mobile-friendly, responsive, and lightweight jQuery date & time input picker.",
"author": {
"name": "Amsul",
"email": "reach@amsul.ca",
"url": "http://amsul.ca"
},
"licenses": [
{
"type": "MIT",
"url": "http://amsul.ca/MIT"
}
],
"keywords": [
"date",
"time",
"picker",
"input",
"responsive"
],
"ignore": [
"*.md",
"*.htm",
"_docs",
"demo",
"tests",
"v2-(deprecated)"
],
"main": "lib/picker.js",
"homepage": "http://amsul.github.io/pickadate.js",
"docs": "http://amsul.github.io/pickadate.js",
"demo": "http://amsul.github.io/pickadate.js",
"bugs": "https://github.com/amsul/pickadate.js/issues",
"repository": {
"type": "git",
"url": "https://github.com/amsul/pickadate.js.git"
},
"dependencies": {
"jquery": ">=1.7"
},
"devDependencies": {
"grunt": "^0.4.5",
"phantomjs": "^1.9.7-5",
"zlib-browserify": "0.0.3",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-qunit": "^0.4.0",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-less": "^0.11.0",
"grunt-contrib-cssmin": "^0.9.0",
"grunt-contrib-uglify": "^0.4.0"
},
"scripts": {
"test": "grunt travis --verbose"
}
}

View File

@ -0,0 +1,750 @@
<!doctype html>
<meta charset="utf-8">
<meta name="author" content="Amsul - http://amsul.ca">
<meta name="viewport" content="width=device-width">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>pickadate.js / date</title>
<link rel="shortcut icon" href="demo/images/favicon.ico">
<link rel="stylesheet" href="demo/styles/css/main.css">
<link rel="stylesheet" href="lib/themes/default.css" id="theme_base">
<link rel="stylesheet" href="lib/themes/default.date.css" id="theme_date">
<link rel="stylesheet" href="lib/themes/default.time.css" id="theme_time">
<!--[if lt IE 9]>
<script>document.createElement('section')</script>
<![endif]-->
<body>
<header class="section section--header section--splash">
<div class="section__block section__block--scoped">
<nav class="menu menu--header page-target" id="menu">
<ul class="menu__list menu__list--header">
<li class="menu__item menu__item--touch menu__item--logo"><a class="menu__link menu__link--dimmed" href="index.htm"><span class="logocon"><span class="logocon__p">p</span><span class="logocon__u"></span></span></a></li>
<li class="menu__item menu__item--touch menu__item--toggle">
<a class="menu__link menu__link--dimmed page-target__display" href="#menu"><span class="page-target__toggle"></span></a>
<a class="menu__link menu__link--dimmed page-target__display--flip" href="#"><span class="page-target__toggle"></span></a>
</li>
<li class="menu__item menu__item--clear"></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed menu__link--active" href="date.htm">Date picker</a></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed" href="time.htm">Time picker</a></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed" href="api.htm">API</a></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed" href="v2-(deprecated)/index.htm">v2 docs</a></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed" href="https://github.com/amsul/pickadate.js">Github</a></li>
<li class="menu__item menu__item--responsive page-target__reveal menu__item--trail">
<span class="menu__link">Themes: <input class="theme-toggle__input" type="radio" id="show_theme_default" name="show_theme" value="default" checked hidden><label class="theme-toggle__label theme-toggle__label--first" for="show_theme_default">default</label><input class="theme-toggle__input" type="radio" id="show_theme_classic" name="show_theme" value="classic" hidden><label class="theme-toggle__label theme-toggle__label--last" for="show_theme_classic" class="checked-negative">classic</label></span>
</li>
</ul>
</nav>
</div> <!-- .section__block -->
</header> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h1 class="heading heading--divide-center heading--divide-first"><span class="heading__text">The Date Picker<a class="heading__anchor" name="picker" href="#picker">&sect;</a></span></h1>
<h3 class="heading heading--thin">The basic setup requires targetting an <code class="tag-name">input</code> element and invoking the&nbsp;picker:</h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate()</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="" class="fieldset__input js__datepicker" type=text placeholder="Try me&hellip;"></div></fieldset>
<div class="section__block section__block--notification">
<p>Along with v3, the v2 options and API have effectively been deprecated. Read up on the <a href="https://github.com/amsul/pickadate.js/blob/3.5.3/CHANGELOG.md">full changelog here</a>.</p>
<p>One of the most critical changes is that the “month” used to create dates, just as in JavaScripts native Date object, now has <a href="https://github.com/amsul/pickadate.js/blob/3.5.3/CHANGELOG.md#zero-as-index">zero-as-index</a>.</p>
</div>
</div> <!-- .section__block -->
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Options<a class="heading__anchor" name="options" href="#options">&sect;</a></span></h2>
<p>With the basic invocation above, these are the default settings:</p>
<pre><code data-language="javascript">// <a href="#strings">Strings</a> and <a href="#translations">translations</a>
monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
showMonthsShort: undefined,
showWeekdaysFull: undefined,
// <a href="#buttons">Buttons</a>
today: 'Today',
clear: 'Clear',
// <a href="#accessibility-labels">Accessibility labels</a>
labelMonthNext: 'Next month',
labelMonthPrev: 'Previous month',
labelMonthSelect: 'Select a month',
labelYearSelect: 'Select a year',
// <a href="#formats">Formats</a>
format: 'd mmmm, yyyy',
formatSubmit: undefined,
hiddenPrefix: undefined,
hiddenSuffix: '_submit',
hiddenName: undefined,
// <a href="#editable">Editable input</a>
editable: undefined,
// <a href="#selectors">Dropdown selectors</a>
selectYears: undefined,
selectMonths: undefined,
// <a href="#first-weekday">First day of the week</a>
firstDay: undefined,
// <a href="#limits">Date limits</a>
min: undefined,
max: undefined,
// <a href="#disable-dates">Disable dates</a>
disable: undefined,
// <a href="#container">Root container</a>
container: undefined,
// <a href="#events">Events</a>
onStart: undefined,
onRender: undefined,
onOpen: undefined,
onClose: undefined,
onSet: undefined,
onStop: undefined,
// <a href="#classes">Classes</a>
klass: {
// The element states
input: 'picker__input',
active: 'picker__input--active',
// The root picker and states *
picker: 'picker',
opened: 'picker--opened',
focused: 'picker--focused',
// The picker holder
holder: 'picker__holder',
// The picker frame, wrapper, and box
frame: 'picker__frame',
wrap: 'picker__wrap',
box: 'picker__box',
// The picker header
header: 'picker__header',
// Month navigation
navPrev: 'picker__nav--prev',
navNext: 'picker__nav--next',
navDisabled: 'picker__nav--disabled',
// Month &amp; year labels
month: 'picker__month',
year: 'picker__year',
// Month &amp; year dropdowns
selectMonth: 'picker__select--month',
selectYear: 'picker__select--year',
// Table of dates
table: 'picker__table',
// Weekday labels
weekdays: 'picker__weekday',
// Day states
day: 'picker__day',
disabled: 'picker__day--disabled',
selected: 'picker__day--selected',
highlighted: 'picker__day--highlighted',
now: 'picker__day--today',
infocus: 'picker__day--infocus',
outfocus: 'picker__day--outfocus',
// The picker footer
footer: 'picker__footer',
// Today &amp; clear buttons
buttonClear: 'picker__button--clear',
buttonToday: 'picker__button--today'
}</code></pre>
<div class="section__block section__block--notification">
<p><b>*</b> It is important to not add any stylings to the pickers root element. Instead, target the <code>.picker__holder</code> element (or any other within) based on the state of the root element.</p>
</div>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Strings<a class="heading__anchor" name="strings" href="#strings">&sect;</a></span></h2>
<p>Change the month and weekday labels as you find suitable:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
showMonthsShort: true
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__weekdaysShort" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Buttons<a class="heading__anchor" name="buttons" href="#buttons">&sect;</a></span></h2>
<p>Change the text or hide a button completely by passing a false-y value:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
today: '',
clear: 'Clear selection'
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__buttons" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Accessibility labels<a class="heading__anchor" name="accessibility-labels" href="#accessibility-labels">&sect;</a></span></h2>
<p>Change the <code>title</code> attributes to several elements within the picker:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
labelMonthNext: 'Go to the next month',
labelMonthPrev: 'Go to the previous month',
labelMonthSelect: 'Pick a month from the dropdown',
labelYearSelect: 'Pick a year from the dropdown',
selectMonths: true,
selectYears: true
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__accessibility-labels" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Translations<a class="heading__anchor" name="translations" href="#translations">&sect;</a></span></h2>
<p>The picker can be extended to add support for internationalization. Translations for <a href="https://github.com/amsul/pickadate.js/blob/3.5.3/lib/translations">39 languages</a> are available out of the box, which you can include in one of two ways:</p>
<pre class="pre--demo"><code data-language="javascript">// Extend the default picker options for <u>all instances</u>.
$.extend($.fn.pickadate.defaults, {
monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
today: 'aujourd\'hui',
clear: 'effacer',
formatSubmit: 'yyyy/mm/dd'
})
// Or, pass the months and weekdays as an array for <u>each invocation</u>.
$('.datepicker').pickadate({
monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
today: 'aujourd\'hui',
clear: 'effacer',
formatSubmit: 'yyyy/mm/dd'
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__translations" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
<div class="section__block section__block--notification">
<p>When using translations, <a href="#formats">specify the <code>formatSubmit</code> and <code class="attribute">data-value</code></a> to ensure the date parses correctly regardless of locale.</p>
</div>
<h3 class="heading heading--divide"><span class="heading__text">RTL languages<a class="heading__anchor--bigger" name="translations_rtl" href="#translations_rtl">&sect;</a></span></h3>
<p>For languages that flow from right-to-left (RTL), youll need to switch the arrows and text direction by linking along the <code>rtl.css</code> file:</p>
<pre class="pre--demo"><code data-language="html">&lt;!-- Add the stylings *after* the pickadate theme files --&gt;
&lt;link rel="stylesheet" href="lib/themes/rtl.css"&gt;
&lt;!-- Add the language *after* the pickadate script files --&gt;
&lt;script src="lib/translations/ar.js"&gt;&lt;/script&gt;</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__translations_rtl" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Formats<a class="heading__anchor" name="formats" href="#formats">&sect;</a></span></h2>
<p>Display a human-friendly format and use an alternate one to submit to the server.</p>
<p>This is done by creating a new hidden <code class="tag-name">input</code> element with the same <code class="attribute">name</code> attribute as the original with an optional prefix/suffix:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
// Escape any <a href="#formatting-rules">“rule” characters</a> with an exclamation mark (!).
format: 'You selecte!d: dddd, dd mmm, yyyy',
formatSubmit: 'yyyy/mm/dd',
hiddenPrefix: 'prefix__',
hiddenSuffix: '__suffix'
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__formats--a" class="fieldset__input " name=date_input type=text placeholder="Try me&hellip;"></div></fieldset>
<h3 class="heading heading--divide"><span class="heading__text">Send the hidden <code class="attribute">value</code> only<a class="heading__anchor" name="formats_use_hidden_only" href="#formats_use_hidden_only">&sect;</a></span></h3>
<p>A majority of the time, the value that needs to be sent to the server is just the hidden value and not the visible one. To make this happen, use the <code>hiddenName</code> option.</p>
<p>This essentially nullifies the <code>hiddenPrefix</code> and <code>hiddenSuffix</code>, strips the <code class="attribute">name</code> attribute from the source <code class="tag-name">input</code>, and then sets it as the <code class="attribute">name</code> of the hidden <code class="tag-name">input</code>:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
formatSubmit: 'yyyy/mm/dd',
hiddenName: true
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__formats--b" class="fieldset__input " name=date_input type=text placeholder="Try me&hellip;"></div></fieldset>
<h3 class="heading heading--divide"><span class="heading__text">Pre-fill values using custom formats or translations<a class="heading__anchor--bigger" name="formats_prefill" href="#formats_prefill">&sect;</a><a name="formats_translations" href="#formats_translations"></a></span></h3>
<p>When using a custom <a href="#formatting-rules">formatting rule</a> for the <code>format</code> option or when using <a href="#translations">translations</a>, the <code class="tag-name">input</code> element should be given a <code class="attribute">data-value</code> attribute formatted using the <code>formatSubmit</code> the elements <code class="attribute">value</code> can be left blank. This helps to parse the date from custom formats into various languages:</p>
<pre class="pre--demo"><code data-language="html">&lt;input data-value="2013/04/20"></code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__formats--c" class="fieldset__input " name=date_demo__formats type=text data-value="2013/04/20" placeholder="Try me&hellip;"></div></fieldset>
<h3 class="heading heading--divide"><span class="heading__text">Formatting Rules<a class="heading__anchor--bigger" name="formatting-rules" href="#formatting-rules">&sect;</a></span></h3>
<p>To use a formatting rule, make sure to keep a delimiter between each rule. This ensures each rules value can be parsed correctly. Example:<br><b>Bad</b>: <code>yyyymmdd</code>; <b>Good</b>: <code>yyyy-mm-dd</code>.</p>
<p>The following rules can be used to format any date:</p>
<table class="table">
<thead>
<tr>
<th>Rule</th>
<th>Description</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>d</code></td>
<td>Date of the month</td>
<td>1 &ndash; 31</td>
</tr>
<tr>
<td><code>dd</code></td>
<td>Date of the month with a leading zero</td>
<td>01 &ndash; 31</td>
</tr>
<tr>
<td><code>ddd</code></td>
<td>Day of the week in short form</td>
<td>Sun &ndash; Sat</td>
</tr>
<tr>
<td><code>dddd</code></td>
<td>Day of the week in full form</td>
<td>Sunday &ndash; Saturday</td>
</tr>
</tbody>
<tbody>
<tr>
<td><code>m</code></td>
<td>Month of the year</td>
<td>1 &ndash; 12</td>
</tr>
<tr>
<td><code>mm</code></td>
<td>Month of the year with a leading zero</td>
<td>01 &ndash; 12</td>
</tr>
<tr>
<td><code>mmm</code></td>
<td>Month name in short form</td>
<td>Jan &ndash; Dec</td>
</tr>
<tr>
<td><code>mmmm</code></td>
<td>Month name in full form</td>
<td>January &ndash; December</td>
</tr>
</tbody>
<tbody>
<tr>
<td><code>yy</code></td>
<td>Year in short form <b>*</b></td>
<td>00 &ndash; 99</td>
</tr>
<tr>
<td><code>yyyy</code></td>
<td>Year in full form</td>
<td>2000 &ndash; 2999</td>
</tr>
</tbody>
</table>
<div class="section__block section__block--notification">
<p><b>*</b> If you use the <code>yy</code> rule in the <code>format</code> option, you <b>must</b> specify the <code>yyyy</code> rule in the <a href="#formats"><code>formatSubmit</code> option</a> with the appropriate <a href="#formats_prefill"><code>data-value</code> attribute</a> to ensure the date parses accurately.</p>
<p>Never use the <code>yy</code> rule in the <code>formatSubmit</code> option.</p>
</div>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Editable input<a class="heading__anchor" name="editable" href="#editable">&sect;</a></span></h2>
<p>By default, typing into the input is disabled by giving it a <code class="attribute">readOnly</code> attribute. Doing so ensures that virtual keyboards dont pop open on touch devices. It is also a confirmation that values passed to the server will be of a consistent format.</p>
<p>However, this behavior can be changed using the <code>editable</code> option:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
editable: true
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__editable" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
<div class="section__block section__block--notification">
<p>An important thing to note here is that this disables keyboard bindings on the input element, such as arrow keys opening the picker. You will have to add your own bindings as you see fit.</p>
</div>
<h3 class="heading heading--divide"><span class="heading__text">Using HTML5 attributes<a class="heading__anchor--bigger" name="html5-attributes" href="#html5-attributes">&sect;</a></span></h3>
<p>Because each <code class="tag-name">input</code> is <a href="#editable"><code class="attribute">readOnly</code> by default</a>, HTML5 attributes, such as <code class="attribute">required</code> and <code class="attribute">pattern</code>, do not get enforced.</p>
<p>To enable default browser behavior on these attributes, set the <a href="#editable"><code>editable</code> property to <code class="constant">true</code></a>.</p>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Dropdown Selectors<a class="heading__anchor" name="selectors" href="#selectors">&sect;</a></span></h2>
<p>Display <code class="tag-name">select</code> menus to pick the month and year. Anything truth-y enables the selectors and anything false-y switches them into text:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
selectYears: true,
selectMonths: true
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__selectors--a" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
<div class="section__block section__block--notification">
<p>When <code>selectYears</code> is truthy, the year selector appears <i>before</i> the month. <a href="https://github.com/amsul/pickadate.js/issues/384">Read here</a> for more details on why.</p>
</div>
<p>You can also specify the number of years to show in the dropdown using an even integer - half before and half after the year in focus:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
// `true` defaults to 10.
selectYears: 4
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__selectors--b" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">First Weekday<a class="heading__anchor" name="first-weekday" href="#first-weekday">&sect;</a></span></h2>
<p>The first day of the week can be set to either Sunday or Monday. Anything truth-y sets it as Monday and anything false-y as Sunday:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
firstDay: 1
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__firstDay" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Date Limits<a class="heading__anchor" name="limits" href="#limits">&sect;</a></span></h2>
<p>Set the minimum and maximum selectable dates on the picker.</p>
<h3 class="heading heading--divide"><span class="heading__text">Using JavaScript dates<a class="heading__anchor--bigger" name="limits-use-dates" href="#limits-use-dates">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
min: new Date(2013,3,20),
max: new Date(2013,7,14)
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__limits--a" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
<h3 class="heading heading--divide"><span class="heading__text">Using arrays formatted as <code>[YEAR,MONTH,DATE]</code><a class="heading__anchor--bigger" name="limits-use-arrays" href="#limits-use-arrays">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
min: [2013,3,20],
max: [2013,7,14]
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__limits--b" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
<h3 class="heading heading--divide"><span class="heading__text">Using integers or a boolean<a class="heading__anchor--bigger" name="limits-relative" href="#limits-relative">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
// An integer (positive/negative) sets it relative to today.
min: -15,
// `true` sets it to today. `false` removes any limits.
max: true
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__limits--c" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">Disable Dates<a class="heading__anchor" name="disable-dates" href="#disable-dates">&sect;</a></span></h2>
<p>Disable a specific or arbitrary set of dates selectable on the picker.</p>
<h3 class="heading heading--divide"><span class="heading__text">Using JavaScript dates<a class="heading__anchor--bigger" name="disable-dates-use-dates" href="#disable-dates-use-dates">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
disable: [
new Date(2013,3,13),
new Date(2013,3,29)
]
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__disable-dates--a" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
<h3 class="heading heading--divide"><span class="heading__text">Using arrays formatted as <code>[YEAR,MONTH,DATE]</code><a class="heading__anchor--bigger" name="disable-dates-use-arrays" href="#disable-dates-use-arrays">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
disable: [
[2013,3,3],
[2013,3,12],
[2013,3,20]
]
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__disable-dates--b" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
<h3 class="heading heading--divide"><span class="heading__text">Using integers as days of the week (1 to 7)<a class="heading__anchor--bigger" name="disable-dates-use-integers" href="#disable-dates-use-integers">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
disable: [
1, 4, 7
]
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__disable-dates--c" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
<h3 class="heading heading--divide"><span class="heading__text">Using objects as a range of dates<a class="heading__anchor--bigger" name="disable-dates-use-ranges" href="#disable-dates-use-ranges">&sect;</a></span></h3>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
disable: [
{ from: [2014,2,14], to: [2014,2,27] }
]
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__disable-dates--d" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
<p>The values for <code>from</code> &amp; <code>to</code> can be:</p>
<ul>
<li>A JavaScript Date object,</li>
<li>An array formatted as <code>[YEAR,MONTH,DATE]</code>,</li>
<li>And <code class="constant">true</code> to set it as “today”.</li>
</ul>
<p>The values can also be integers representing dates relative to the other:</p>
<ul>
<li><code>to</code> can only be positive: <pre><code data-language="javascript">{ from: [2014,3,12], to: 10 }</code></pre></li>
<li><code>from</code> can only be negative: <pre><code data-language="javascript">{ from: -10, to: true }</code></pre></li>
</ul>
<h3 class="heading heading--divide"><span class="heading__text"><i><u>Disabling all</u></i> with a set of exceptions<a class="heading__anchor--bigger" name="disable-dates-all" href="#disable-dates-all">&sect;</a></span></h3>
<p>Enable only a specific or arbitrary set of dates by setting <code class="constant">true</code> as the first item in the collection:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
disable: [
true,
1, 4, 7,
[2013,3,3],
[2013,3,12],
[2013,3,20],
new Date(2013,3,13),
new Date(2013,3,29)
]
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__disable-dates--e" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
<h3 class="heading heading--divide"><span class="heading__text">Disabling ranges with exceptions<a class="heading__anchor--bigger" name="disable-dates-inverted" href="#disable-dates-inverted">&sect;</a></span></h3>
<p>Enable dates that fall within a range of disabled dates by adding the <code class="string">inverted</code> parameter to the item within the collection:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
disable: [
5,
[2013, 10, 21, 'inverted'],
{ from: [2014, 3, 15], to: [2014, 3, 25] },
[2014, 3, 20, 'inverted'],
{ from: [2014, 3, 17], to: [2014, 3, 18], inverted: true }
]
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__disable-dates--f" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">container<a class="heading__anchor" name="container" href="#container">&sect;</a></span></h2>
<p>By default, the pickers root element is inserted right after the <code class="keyword">input</code> element. Specify where to insert the root element by passing any valid CSS selector to this option:</p>
<div id="root-outlet" style="position:relative"></div>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
container: '#root-outlet'
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__container" class="fieldset__input " type=text placeholder="Try me&hellip;"></div></fieldset>
<div class="section__block section__block--notification">
<p>This is especially important when the <code class="keyword">input</code> falls within a <code class="keyword">label</code> element because click events bubble up to the <code class="keyword">label</code> element and re-open the picker.</p>
</div>
</div> <!-- .section__block -->
</section> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--divide"><span class="heading__text">events<a class="heading__anchor" name="events" href="#events">&sect;</a></span></h2>
<p>Fire off events as the user interacts with the picker:</p>
<pre class="pre--demo"><code data-language="javascript">$('.datepicker').pickadate({
onStart: function() {
console.log('Hello there :)')
},
onRender: function() {
console.log('Whoa.. rendered anew')
},
onOpen: function() {
console.log('Opened up')
},
onClose: function() {
console.log('Closed now')
},
onStop: function() {
console.log('See ya.')
},
onSet: function(context) {
console.log('Just set stuff:', context)
}
})</code></pre>
<fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><input id="date_demo__events" class="fieldset__input " type=text placeholder="Open your console and try me&hellip;"></div></fieldset>
<p>The <code class="function">onSet</code> event is the only callback that is passed a <code>context</code> argument that provides details as to which properties are being “set”.</p>
<p>Within scope of all six of these events, <code class="keyword">this</code> refers to <a href="api.htm">the picker</a>.</p>
<p>To learn more on how to use the picker object, read the <a href="api.htm">API</a> documentation.</p>
</div> <!-- .section__block -->
</section> <!-- .section -->
<footer class="section section--footer">
<div class="section__block section__block--scoped text-center">
<h2 class="heading heading--one heading--divide-center"><span class="heading__text peace">&#x270C;</span></h2>
<p class="heading heading--three heading--thin">Made by <a href="http://twitter.com/amsul_">Amsul</a></p>
<p>Code licensed under <a href="http://amsul.ca/MIT">MIT</a></p>
<div class="text-tiny text-dimmed">
<p>Pattern from <a href="http://subtlepatterns.com/">Subtle Patterns</a>&nbsp;&nbsp;&nbsp;&nbsp;Syntax highlighting with <a href="http://craig.is/making/rainbows">Rainbow.js</a></p>
<p><a href="http://selz.co/1g80kCZ">Share some &hearts;</a></p>
</div>
</div> <!-- .section__block -->
</footer> <!-- .section -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>window.jQuery||document.write('<script src="tests/jquery.2.0.0.js"><\/script>')</script>
<script src="lib/picker.js"></script>
<script src="lib/picker.date.js"></script>
<script src="lib/picker.time.js"></script>
<script src="lib/legacy.js"></script>
<script src="demo/scripts/demo.js"></script>
<script src="demo/scripts/rainbow.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36321179-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?> <!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg id="p.fw-Page%201" viewBox="0 0 40 40" style="background-color:#ffffff00" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" width="40px" height="40px" > <g id="Layer%201"> <path d="M 22.6709 23.2383 C 23.3799 22.8237 23.9536 22.2827 24.3916 21.6157 C 24.8291 20.9492 25.1392 20.1714 25.3203 19.2827 C 25.501 18.3936 25.5918 17.4902 25.5918 16.5713 C 25.5918 15.6533 25.4937 14.749 25.2974 13.8604 C 25.1006 12.9717 24.7769 12.1792 24.3237 11.4824 C 23.8711 10.7866 23.2896 10.2236 22.5806 9.7935 C 21.8706 9.3643 21.0024 9.1494 19.9766 9.1494 C 18.9194 9.1494 18.0366 9.3643 17.3276 9.7935 C 16.6182 10.2236 16.0439 10.7788 15.6069 11.4604 C 15.1689 12.1421 14.8599 12.9268 14.6787 13.8159 C 14.4976 14.7046 14.4067 15.6235 14.4067 16.5713 C 14.4067 17.4902 14.5044 18.3936 14.7012 19.2827 C 14.897 20.1714 15.2144 20.9492 15.6523 21.6157 C 16.0894 22.2827 16.6709 22.8237 17.3955 23.2383 C 18.1201 23.6533 18.9956 23.8604 20.022 23.8604 C 21.0786 23.8604 21.9614 23.6533 22.6709 23.2383 ZM 14.3164 5.0156 L 14.3164 7.9492 L 14.4067 7.9492 C 15.1914 6.7046 16.188 5.8013 17.3955 5.2383 C 18.6025 4.6758 19.9312 4.3936 21.3804 4.3936 C 23.2217 4.3936 24.8062 4.7349 26.1353 5.416 C 27.4634 6.0977 28.5649 7.0015 29.4409 8.127 C 30.3159 9.2534 30.9648 10.5645 31.3882 12.0605 C 31.8105 13.5566 32.022 15.1201 32.022 16.749 C 32.022 18.29 31.8105 19.7715 31.3882 21.1938 C 30.9648 22.6157 30.3237 23.8755 29.4634 24.9717 C 28.603 26.0679 27.5313 26.9424 26.2485 27.5938 C 24.9648 28.2451 23.4634 28.5713 21.7427 28.5713 C 20.2935 28.5713 18.958 28.2827 17.7354 27.7046 C 16.5127 27.127 15.5088 26.2754 14.7236 25.1494 L 14.6333 25.1494 L 14.6333 35.978 L 8.0156 35.978 L 8.0156 5.0156 L 14.3164 5.0156 Z" fill="#000000"/> </g> </svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Some files were not shown because too many files have changed in this diff Show More