Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/g00fy-/angular-datepicker
calendar and datepicker directives for angular
https://github.com/g00fy-/angular-datepicker
Last synced: 2 months ago
JSON representation
calendar and datepicker directives for angular
- Host: GitHub
- URL: https://github.com/g00fy-/angular-datepicker
- Owner: g00fy-
- License: mit
- Created: 2013-06-08T08:21:19.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2019-10-22T14:56:45.000Z (about 5 years ago)
- Last Synced: 2024-11-02T10:05:54.200Z (3 months ago)
- Language: JavaScript
- Size: 533 KB
- Stars: 719
- Watchers: 37
- Forks: 420
- Open Issues: 165
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - angular-datepicker - | 724 | (JavaScript)
README
# AngularJS datepicker directives
#### Requirements
- Angular v1.2+
- MomentJS
- Moment Timezone (If timezones are being used)
## Installation
### via bower
```
bower install angular-datepicker --save
```
### via npm
```
npm install angular-datepicker --save
```
After the install add the js, css and the moment files to your page.
Add the following module to your page : `datePicker`
## Usage Example
[Live demo](https://rawgithub.com/g00fy-/angular-datepicker/master/app/index.html)
## New features
This fork of angular-datepicker contains several features.
### Timezone Support
* The directive will work with or without a specified timezone.
* If the timezone is known, it can be assigned to the datepicker via the `timezone` attribute.
* If no timezone is provided, then the local time will be used.
##### No timezone information
```html
```
##### Specific timezone (London, UK)
```html
```
##### Specific timezone (Hong Kong, CN)
```html
```
### Maximum / minimum dates:
* These attributes restrict the dates that can be selected.
* These work differently from the original `min-date` and `max-date` attributes, which they replace.
* The original attributes allow selecting any dates and just mark the input as invalid.
* With these attributes, if a date in the picker is outside of the valid range, then it will not be selectable.
##### Minimum date:
```html
```
##### Maximum date:
```html
```
##### Minimum and maximum date:
```html
```
### Date format (for input fields):
* A custom format for a date can be assigned via the `format` atribute.
* This format will be used to display the date on an input field.
* If not provided, a default format will be used.
* See: [format options](http://momentjs.com/docs/#/displaying/format/)
```html
```
### Callback on date change
* Adding a `date-change` attribute containing a function name will cause this function to be called when the date changes in the picker.
```html
```
### Update events
* An event can be broadcast from the parent scope which will update specific pickers with new settings. The settings which can be changed are:
* `minDate`: Earliest selectable date for this picker. Disabled if this value is falsy.
* `maxDate`: Latest selectable date for this picker. Disabled if this value is falsy.
* `minView`: Minimum zoom level for date/time selection. Disabled if this value is falsy.
* `maxView`: Maximum zoom level for date/time selection. Disabled if this value is falsy.
* `view`: Default zoom level for date/time selection. Set to default value if this value is falsy.
* `format`: Format string used to display dates on the input field. Set to default value if this value is falsy.
* See: [format options](http://momentjs.com/docs/#/displaying/format/)
* This option cannot be used on the `date-picker` directive directly, it must be used on a `date-time` input field.
* The possible for the `view`, `minView` and `maxView` fields are:
* `year`, `month`, `date`, `hours`, `minutes`.
* The event is targeted at specific pickers using their `ID` attributes.
* If a picker exists with the same `ID` then the information in this picker will be updated.
* A single `ID` can be used, or an array of `ID`s
#### Create picker with ID
```html
```
#### Update one picker.
```javascript
$scope.$broadcast('pickerUpdate', 'pickerToUpdate', {
format: 'D MMM YYYY HH:mm',
maxDate: maxSelectableDate, //A moment object, date object, or date/time string parsable by momentjs
minView: 'hours',
view: false //Use default
});
```
#### Update multiple pickers.
```javascript
$scope.$broadcast('pickerUpdate', ['pickerToUpdate', 'secondPickerToUpdate'], {
format: 'lll'
});
```