Foundation-datepicker.js Examples & Docs



Basic

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.



Close button and data tags

Attached to a field with the format specified via data tag and close button enabled. See source of



Time picker

With time picking enabled and vietnamese language used.



Limited picker

Limit the view mode to months



No inputs

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


Dependent pickers

Disabling dates in the past and dependent disabling.

Check in: Check out:


Docs

Feel free to contribute! Fork, modify, and send me a pull request.

Foundation version support

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:

Install via Bower or NPM

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.

Manual Installation and Setup

  1. download & unzip source from GitHub repository: http://foundation-datepicker.peterbeno.com/example.html

  2. copy the files /js/foundation-datepicker.js and /stylesheets/foundation-datepicker.css somewhere into your project. Minified versions are also available.

  3. <link> and <script> them into your page

  4. 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">

Language translations

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.

Icons

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 arrow
  • fa-remove fa-times fi-x - close sign
  • fa fa-chevron-left fi-arrow-left - left arrow

Version 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">

Build system

Grunt is used. grunt build compiles scss & minifies js and css. Before running, you must install local grunt and npm deps via: npm install

Angular

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.

Methods

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.

Options

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.

Events

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.

A note on forking:

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.

Issues

Before you submit a new issue, please check closed (maybe also open) issues here, maybe your problem was solved already. Thanks!