Angular Material DateTimePicker – angular-material-datetimepicker demo

onlinecode

2 years ago

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 module`myDateTimePickerModule`:

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