Home

Awesome

Angular Date/Time input

================================

Native AngularJS directive that allows user input of a date/time value. Valid dates are displayed in specified format, but input may be in any supported format.

Join the chat at https://gitter.im/dalelotts/angular-date-time-input MIT License Build Status Coverage Status Dependency Status devDependency Status JavaScript Style Guide semantic-release Commitizen friendly PayPal donate button <a href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fabout.twitter.com%2Fresources%2Fbuttons&amp;text=Check%20out%20this%20%23AngularJS%20directive%20that%20makes%20it%20dead%20simple%20for%20users%20to%input%20dates%20%26%20times&amp;tw_p=tweetbutton&amp;url=https%3A%2F%2Fgithub.com%2Fdalelotts%2Fangular-date-time-input&amp;via=dalelotts" target="_blank"> <img src="http://jpillora.com/github-twitter-button/img/tweet.png"></img> </a>

#Dependencies

Requires:

#Testing We use karma and linting tools to ensure the quality of the code. The easiest way to run these checks is to use grunt:

npm install
npm test

The karma task will try to open Chrome as a browser in which to run the tests. Make sure this is available or change the configuration in test\test.config.js

#Usage

Bower

This project does not directly support bower. If you are using wiredep, you can dd the following to your bower.json file to allow wiredep to use this directive.

  "overrides": {
    "angular-date-time-input": {
      "main": [
        "src/dateTimeInput.js",
      ],
      "dependencies": {
        "angular": "^1.x",
        "moment": "^2.x"
      }
    }
  }

NPM

We use npm for dependency management. Add the following to your package

npm install angular-date-time-input --save

This will copy the angular-date-time-input files into your node_modules folder, along with its dependencies.

Load the script files in your application:

<script type="text/javascript" src="node_modules/moment/moment.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-date-time-input/src/dateTimeInput.js"></script>

Add this module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ui.dateTimeInput'])

Apply the directive to your form elements:

<input data-date-time-input="YYYY-MMM-DD" />

Options

The value of the date-time-input attribute is the format the date values will be displayed.

Nota bene: The value saved in the model is, by default, a JavaScript Date object, not a string. This can result in differences between what is seen in the model and what is displayed.

date-time-input

This option controls the way the date is displayed in the view, not the model.

<input data-date-time-input="YYYY-MMM-DD" />

See MomentJS documentation for valid formats.

date-formats

This option defines additional input formats that will be accepted.

<input ... data-date-formats="['YYYY-MMM-DD']" />

Nota bene: Parsing multiple formats is considerably slower than parsing a single format. If you can avoid it, it is much faster to parse a single format.

See [MomentJS documentation] (http://momentjs.com/docs/#/parsing/string-formats) for more information.

date-parse-strict

This option enables/disables strict parsing of the input formats.

<input ... data-date-parse-strict="false" />

model-type

<input ... data-model-type="Date | moment | milliseconds | [custom format]" />

Default: 'Date'

Specifies the data type to use when storing the selected date in the model.

Accepts any string value, but the following values have special meaning (these values are case sensitive) :

Any other value is considered a custom format string.

##Contributing

See [Contributing] (contributing.md) document

License

angular-date-time-input is released under the MIT license and is copyright 2016 Knight Rider Consulting, Inc.. Boiled down to smaller chunks, it can be described with the following conditions.

It requires you to:

It permits you to:

It forbids you to:

It does not require you to:

The full angular-date-time-input license is located in the project repository for more information.

Donating

Support this project and other work by Dale Lotts via gittip.

Support via Gittip