Attached to a field with the format specified via options. Initial date is set with initialDate option or with value attribute on the input tag.
Attached to a field with the format specified via data tag and close button enabled. See source of
With time picking enabled and vietnamese language used.
Limit the view mode to months
Attached to other element then field and using events to work with the date values.
| Start date Change | End date Change |
|---|---|
| 2012-02-20 | 2012-02-25 |
Disabling dates in the past and dependent disabling.
| Check in: | Check out: |
|---|
Set another icons or icon font (Material Icons in this example)
Feel free to contribute! Fork, modify, and send me a pull request.
Foundation 6 and 5 is fully supported. For Foundation 4 version, check out last compatible version: https://github.com/najlepsiwebdesigner/foundation-datepicker/releases/tag/1.2.0
How to include this in your project:
bower install foundation-datepicker
npm install foundation-datepicker
after running continue with step 3 from manual instalation. Files you should use are mentioned in step 2.
download & unzip source from GitHub repository: http://foundation-datepicker.peterbeno.com/example.html
copy the files /js/foundation-datepicker.js and /stylesheets/foundation-datepicker.css
somewhere into your project. Minified versions are also available.
<link> and <script> them into your page
to see the arrows and icons, please include font-awesome or foundation icons:
http://zurb.com/playground/foundation-icons
<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
http://fortawesome.github.io/Font-Awesome/
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
Foundation datepicker uses external files to store translation data. To use language, you have to include correct file from js/locales directory, then correctly initalize fdatepicker with iso code of language included.
Example of using slovak language:
<!-- somewhere in header -->
<script src="js/foundation-datepicker.js"></script>
<script src="js/locales/foundation-datepicker.sk.js"></script>
<!-- ... -->
<script>
$('.fdatepicker').fdatepicker({
language: 'sk'
});
</script>
65 languages are available, thanks community and bootstrap-datepicker project. For complete list, see js/locales directory.
Datepicker uses three icons. It works with foundation font and font awesome out-of-the box. If you dont want to use iconic font, you can customize buttons via classes:
fa-chevron-right fi-arrow-right - right arrowfa-remove fa-times fi-x - close signfa fa-chevron-left fi-arrow-left - left arrowVersion without Font Awesome (behind master) can be found in separate branch: https://github.com/najlepsiwebdesigner/foundation-datepicker/tree/no-font-awesome
to use foundation icon font, include:
<link rel="stylesheet" href="foundation/fonts/foundation-icons.css">
to use font-awesome, use include:
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Grunt is used.
grunt build compiles scss & minifies js and css.
Before running, you must install local grunt and npm deps via:
npm install
For integration with Angular, please see https://github.com/najlepsiwebdesigner/foundation-datepicker/issues/55#issuecomment-138681504
Foundation datepicker is jQuery plugin, so you have to use jQuery.
| Method | Description |
|---|---|
| .fdatepicker(options) | Initializes a datepicker. |
| .fdatepicker('show') | Show the datepicker. |
| .fdatepicker('hide') | Hide the datepicker. |
| .fdatepicker('place') | Updates the date picker's position relative to the element |
| .fdatepicker('update', value) | Updates the date picker's value. It can be a string in the specified format or a Date object. |
| Name | type | default | description |
|---|---|---|---|
| format | string | 'mm/dd/yyyy' | the date format, combination of d, dd, m, mm, yy, yyyy, hh, ii. |
| language | string | 'en' | two-char iso shortcut of language you want to use |
| weekStart | integer | 0 | day of the week start. 0 for Sunday - 6 for Saturday |
| startView | string|integer | month | set the start view mode. Accepts: 'decade' = 4, 'year' = 3, 'month' = 2, 'day' = 1, 'hour' = 0 |
| minView|maxView | string|integer | set a limit for view mode. Accepts: 'decade' = 4, 'year' = 3, 'month' = 2, 'day' = 1, 'hour' = 0 | |
| pickTime | boolean | false | enables hour and minute selection views, equivalent of minView = 0, else minView = 2 |
| initialDate | date string | null | sets initial date. The same effect can be achieved with value attribute on input element. |
| startDate | date | -Infinity | disables all dates before given date |
| endDate | date | Infinity | disables all dates after given date |
| keyboardNavigation | boolean | true | with input fields, allows to navigate the datepicker with arrows. However, it disables navigation inside the input itself, too |
| daysOfWeekDisabled | Array of integers | [] | disables all dates matching the given days of week (0 = Sunday, 6 = Saturday) |
| datesDisabled | Array of date strings | [] | disables the specified dates |
| Event | Description |
|---|---|
| show | This event fires immediately when the date picker is displayed. |
| hide | This event is fired immediately when the date picker is hidden. |
| changeDate | This event is fired when the date is changed. |
| outOfRange | This event is fired when user tries to select disabled date. |
By forking this project you hereby grant permission for any commits to your fork to be merged back into this repository and, with attribution, be released under the terms of the Apache License.
Before you submit a new issue, please check closed (maybe also open) issues here, maybe your problem was solved already. Thanks!