### About

Foundation jQuery datepicker plugin!

- project website
- forked project @github

Based on best available datepicker in this galaxy - bootstrap-datepicker:

- website
- github

#### Description:

- can be used as a component
- formats: dd, d, mm, m, yyyy, yy
- separators: -, /, .

###### Warning!

This plugin uses really robust, tested base bootstrap-datepicker plugin, projects are now not in sync. This datepicker is based on old version of bootstrap-datepicker, but it works well. If you find an error, please report it to github. Thanks! :)

Tweet

## Example

Attached to a field with the format specified via options.

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

As component.

With large margin

Limit the view mode to months

Attached to other element then field and using events to work with the date values.

Oh snap!

Start date Change | End date Change
--- | ---
2012-02-20 | 2012-02-25

Disabling dates in the past and dependent disabling.

Check in: | Check out:
--- | ---

## Using foundation-datepicker.js

Call the datepicker via javascript:

    $('.fdatepicker').fdatepicker()

### Options

Name | type | default | description
--- | --- | --- | ---
format | string | 'mm/dd/yyyy' | the date format, combination of d, dd, m, mm, yy, yyyy.
weekStart | integer | 0 | day of the week start. 0 for Sunday - 6 for Saturday
viewMode | string|integer | 0 = 'days' | set the start view mode. Accepts: 'days', 'months', 'years', 0 for days, 1 for months and 2 for years
minViewMode | string|integer | 0 = 'days' | set a limit for view mode. Accepts: 'days', 'months', 'years', 0 for days, 1 for months and 2 for years

### Markup

Format a component.

    <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
      <input class="span2" size="16" type="text" value="12-02-2012">
      <span class="add-on"><i class="fa fa-th"></i></span>
    </div>

### Methods

#### .fdatepicker(options)

Initializes an 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.

### Events

Datepicker class exposes a few events for manipulating the 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.

    $('#dp5').fdatepicker()
      .on('changeDate', function(ev){
        if (ev.date.valueOf() < startDate.valueOf()){
          ....
        }
      });