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

calendar and datepicker directives for angular
https://github.com/g00fy-/angular-datepicker

Last synced: 8 days 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 (about 11 years ago)
• Default Branch: master
• Last Pushed: 2019-10-22T14:56:45.000Z (over 4 years ago)
• Last Synced: 2024-06-19T14:02:12.768Z (9 days ago)
• Language: JavaScript
• Size: 533 KB
• Stars: 723
• Watchers: 37
• Forks: 422
• Open Issues: 165
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• 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'

});

```