Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amittkSharma/extended-datetimepicker
An Angular Material based, an Android style date-time picker, with ability to disable set of continuous or non-continuous date sets.
https://github.com/amittkSharma/extended-datetimepicker
android-style angular angular-material angularjs calendar calendar-widget calendardirective datetimepicker extended-datetimepicker moment picker
Last synced: about 2 months ago
JSON representation
An Angular Material based, an Android style date-time picker, with ability to disable set of continuous or non-continuous date sets.
- Host: GitHub
- URL: https://github.com/amittkSharma/extended-datetimepicker
- Owner: amittkSharma
- License: mit
- Created: 2016-11-20T23:30:00.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-26T15:49:54.000Z (almost 7 years ago)
- Last Synced: 2024-10-19T00:24:22.590Z (3 months ago)
- Topics: android-style, angular, angular-material, angularjs, calendar, calendar-widget, calendardirective, datetimepicker, extended-datetimepicker, moment, picker
- Language: JavaScript
- Homepage: http://rawgit.com/amittkSharma/extended-datetimepicker/master/index.html
- Size: 227 KB
- Stars: 10
- Watchers: 2
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Material DateTimePicker
[](https://www.npmjs.com/package/extended-datetimepicker)
[](https://www.npmjs.com/package/extended-datetimepicker)
An Angular Material based, an Android style date-time picker. Some basic functionalities are:
- Double click to select date or time
- Swipe left to go to next month or Swipe right to go to previous month.
- Disable the set of continous or non-continous date sets.
- Jump to current day
- Highlight Week days (Business Days)
- Display week number (in header)
- Weekdays as per browser language
## Updates
| Date | Author | Description |
| ----------------- | ----------------- | --------------------------------------------------- |
| 2016-11-21 | AmittK | Extended version of angular-material-datetimepicker |
| 2017-04-14 | AmittK | Changes to the display structure of date and month |
| 2017-07-26 | AmittK | Jump to today date is introduced |
| 2017-07-28 | AmittK | Highlight only week-days (working business days) |
| 2017-07-30 | AmittK | Displaying the week number in header, UI updated |
| 2017-07-30 | AmittK | UI updated with icons and tooltips |
### Dependencies
Depends on the following library:
- Angular Material & it's dependencies
- Angular Touch
- MomentJS
## Installing via Bower
```
bower install extended-datetimepicker
```
## Installing via Npm
```
npm install extended-datetimepicker
```
## Live Example
Click [here] (http://rawgit.com/amittkSharma/extended-datetimepicker/master/index.html) to visualize live examples.
## Usage
Add the plugin module as a dependency to your AngularJS module:
```js
angular.module('myAwesomeModule', [
//other dependencies ignored
'ngMaterialDatePicker'
]);
```
This plugin exposes a directive which should be used as an attribute for an input element. The directive is
`mdc-datetime-picker`. An example of this is given below:
```html
Timepicker Only
```
### Directive Attributes
The directive accepts several attributes which are described below:
| Name | Type | Description |
| ----------------- | ----------------------------- | --------------------------------------------- |
| **ng-model** | (String\|Date\|Moment) | Initial Date or model to assign the date to|
| **format** | String | [MomentJS Format](momentjs.com/docs/#/parsing/string-format/),defaults to `HH:mm` for time picker only, `YYYY-MM-DD` for date picker only and `YYYY-MM-DD HH:mm` for both timepicker and date picker |
| **short-time** | Boolean | true => Display 12 hours AM\|PM |
| **min-date** | (String\|Date\|Moment) | Minimum selectable date |
| **max-date** | (String\|Date\|Moment) | Maximum selectable date |
| **date** | Boolean | true => Has Datepicker (default: true) |
| **time** | Boolean | true => Has Timepicker (default: true) |
| **cancel-text** | String | Text for the cancel button (default: Cancel) |
| **ok-text** | String | Text for the OK button (default: OK) |
| **disable-dates** | Date[] | Dates to be disabled or not selectable by user. |
| **week-days** | Boolean | true => Highlight only working days (default: false). |