https://github.com/jacklam718/angular-datepicker

https://github.com/jacklam718/angular-datepicker

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/jacklam718/angular-datepicker
• Owner: jacklam718
• License: mit
• Created: 2015-08-17T06:43:04.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-08-17T08:05:41.000Z (over 9 years ago)
• Last Synced: 2024-12-28T13:17:28.445Z (about 2 months ago)
• Language: JavaScript
• Size: 143 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# angular-datepicker

The mobile-friendly, responsive, and lightweight Angular.js date & time input picker. Perfect for Ionic apps!

![datepicker](https://dl.dropboxusercontent.com/u/16304603/datepicker.PNG), ![datepicker](https://dl.dropboxusercontent.com/u/16304603/timepicker.PNG)

This is basically a [pickadate.js](https://github.com/amsul/pickadate.js) fork that completely removes the jQuery dependency and adds Angular.js directives.

### Bower

`bower install angular-datepicker`

### Usage

Include `build/angular-datepicker.js` in your application:

```HTML

```

    

Add the module `angular-datepicker` as a dependency to your app module:

```JavaScript

var myapp = angular.module('myapp', ['angular-datepicker']);

```

    

To create a date or time picker, add the `pick-a-date` or `pick-a-time` directive to your input tag:

```HTML

 {{ date }}

 {{ time }}

```

You can also provide an options object to the directive which will be passed

into the `pickadate` or `pickatime` constructor.

```javascript

// somewhere in your controller

$scope.options = {

  format: 'yyyy-mm-dd', // ISO formatted date

  onClose: function(e) {

    // do something when the picker closes   

  }

}

```

```HTML

 {{ date }}

 {{ time }}

```

If you don't need to provide any callbacks (like `onClose`) you can specify the

options object as an angular expression:

```HTML

```

For a full list of available options please refer to the pickadate documentation

for [datepicker options](http://amsul.ca/pickadate.js/date.htm) and 

[timepicker options](http://amsul.ca/pickadate.js/time.htm).