Angular Material DateTimePicker – angular-material-datetimepicker demo
In this post we will show you how to implement Angular Material DateTimePicker with demo and source code for implement Material DateTimePicker for Angularjs.
Angularjs Material DateTimePicker, an Android style date-time picker, with capacity to impair set of constant or non-nonstop date sets.Some fundamental functionalities are:
- Swipe left to go to one month from now or Swipe appropriate to go to past month.
- Disable the arrangement of continous or non-continous date sets.
- Double snap to choose date or time
Angular Material DateTimePicker Conditions
Relies on upon the accompanying library for Angular Material DateTimePicker:
- Angular Touch
- MomentJS
- Angular Material and it’s dependencies
Angular Material DateTimePicker for Installing via Bower
bower install extended-datetimepicker
Angular Material DateTimePicker for Installing via Npm
npm install extended-datetimepicker
Angular Material DateTimePicker for Add the plugin module as a dependency to over Angular modulemyDateTimePickerModule:
angular.module('myDateTimePickerModule', [
//other dependencies ignored
'ngMaterialDatePicker'
]);
This plugin exposes a directive that ought to be used as associate degree attribute for associate degree input part. The directive is mdc-datetime-picker. associate degree example of this is often given below:
<!-- Display Timepicker Only --> <md-input-container flex-gt-md="30"> <!-- Display Timepicker label --> <label>Display Timepicker Only</label> <!-- Display Timepicker seet value --> <input mdc-datetime-picker date="false" time="true" type="text" id="time" short-time="true" placeholder="Time" min-date="minDate" format="hh:mm a" ng-model="time"> </md-input-container>.
| Name | Type | Description |
|---|---|---|
| ok-text | String | Text for the OK catch (default: OK) |
| ng-model | (String|Date|Moment) | Initial Date or model to appoint the date to |
| cancel-text | String | Text for the drop catch (default: Cancel) |
| time | Boolean | true => Has Timepicker (default: true) |
| format | String | MomentJS Format,defaults to HH:mm for time picker just, YYYY-MM-DD for date picker just and YYYY-MM-DD HH:mm for both timepicker and date picker |
| min-date | (String|Date|Moment) | Minimum selectable date |
| short-time | Boolean | true => Display 12 hours AM|PM |
| max-date | (String|Date|Moment) | Maximum selectable date |
| date | Boolean | true => Has Datepicker (default: true) |
| disable-dates | Date[] | Dates to be handicapped or not selectable by user. |
You also like Angular Gauge chart and Angularjs Image Gallery and Angularjs pie chart and Vuejs WYSIWYG Editor and angular 2 gauge chart