Description

This directive allows you to enhance your input elements with behaviour from the bootstrap-datepicker library.

Demo: http://polyptychon.github.io/poly-form-datepicker

Requirements

• AngularJS
• JQuery
• Bootstrap

Install

You can install this package either with npm or with bower.

npm

npm install --save polyptychon/poly-form-datepicker

Add a stylesheet to your index.html head:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/node_modules/poly-form-datepicker/lib/css/poly-form-datepicker.css">

Add a <script> to your index.html:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

<script src="/node_modules/poly-form-datepicker/lib/js/poly-form-datepicker.min.js"></script>

Then add poly-form-datepicker as a dependency for your app:

angular.module('myApp', ['poly-form-datepicker']);

Note that this package is in CommonJS format, so you can require('poly-form-datepicker')

bower

bower install polyptychon/poly-form-datepicker

Add a stylesheet to your index.html head:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/poly-form-datepicker/lib/css/poly-form-datepicker.css">

Add a <script> to your index.html:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

<script src="/bower_components/poly-form-datepicker/lib/js/poly-form-datepicker.min.js"></script>

Then add poly-form-datepicker as a dependency for your app:

angular.module('myApp', ['poly-form-datepicker']);

Documentation

A flexible datepicker directive in the Twitter bootstrap style.

Attributes

Name	Type	Default	Description
multidate	Boolean	false	Enable multidate picking. Each date in month view acts as a toggle button, keeping track of which dates the user has selected in order. If a number is given, the picker will limit how many dates can be selected to that number, dropping the oldest dates from the list when the number is exceeded. true equates to no limit. The input’s value (if present) is set to a string generated by joining the dates, formatted, with multidateSeparator.
force-parse	Boolean	true	Whether or not to force parsing of the input value when the picker is closed. That is, when an invalid date is left in the input field by the user, the picker will forcibly parse that value, and set the input’s value to the new, valid date, conforming to the given format.
clear-btn	Boolean	false	If true, displays a “Clear” button at the bottom of the datepicker to clear the input value. If “autoclose” is also set to true, this button will also close the datepicker.
today-highlight	Boolean	true	If true, highlights the current date.
autoclose	Boolean	true	Whether or not to close the datepicker immediately when a date is selected.
multidate-separator	String	','	The string that will appear between dates when generating the input’s value. When parsing the input’s value for a multidate picker, this will also be used to split the incoming string to separate multiple formatted dates; as such, it is highly recommended that you not use a string that could be a substring of a formatted date (eg, using ‘-‘ to separate dates when your format is ‘yyyy-mm-dd’).
format	String	'dd/mm/yyyy'	The date format, combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy.
language	String	'el'	The IETF code (eg “en” for English, “pt-BR” for Brazilian Portuguese) of the language to use for month and day names. These will also be used as the input’s value (and subsequently sent to the server in the case of form submissions). If a full code (eg “de-DE”) is supplied the picker will first check for an “de-DE” language and if not found will fallback and check for a “de” language. If an unknown language code is given, English will be used. See I18N.

Example

<date-input format="dd/mm/yyyy">
  <input name="dateInput" id="dateInput_id" ng-model="myForm.variable" type="dateInput" ng-required="true" class="form-control">
</date-input>