ng-material-datetimepicker
Version:
A datetime picker for AngularJS Material
296 lines (272 loc) • 15.4 kB
HTML
<html ng-app="mdDatetimePickerDemo">
<head>
<title>Angular-Material DateTimePicker</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="icon" type="image/png" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com/">
<link rel="dns-prefetch" href="https://code.angularjs.org/">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/github.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.2.5/angular-material.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="./css/material-datetimepicker.css" type="text/css"/>
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.2/angular-animate.min.js"></script>
<script src="https://code.angularjs.org/1.8.2/angular-messages.min.js"></script>
<script src="https://code.angularjs.org/1.8.2/angular-aria.min.js"></script>
<script src="https://code.angularjs.org/1.8.2/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.2.5/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.19.0/angular-translate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.8.2/i18n/angular-locale_fr.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.8.2/i18n/angular-locale_en.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script type="text/javascript" src="./beautifier.js"></script>
<script type="text/javascript" src="./js/angular-material-datetimepicker.js"></script>
<script type="text/javascript" src="./js/demo.js"></script>
</head>
<body ng-controller="DemoCtrl" layout="column" ng-csp>
<md-content class="md-padding">
<div layout="column">
<h1>Angular Material DateTimePicker</h1>
</div>
<md-card layout="column">
<md-toolbar class="md-primary">
<div class="md-toolbar-tools">
<h2>Datetime Pickers</h2>
<div flex></div>
<md-select ng-model="selectedLang" ng-change="changeLanguage()" aria-label="change language">
<md-option ng-repeat="lang in langs" ng-value="lang.value" ng-selected="$first">{{lang.label}}</md-option>
</md-select>
<div flex></div>
<md-button class="md-raised" ng-click="changeDir()">{{txtdir}}</md-button>
</div>
</md-toolbar>
<md-card-content class="md-padding">
<p>
<span translate>INSTRUCTION</span>
</p>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Datepicker Only</label>
<input time="false" date="true" mdc-datetime-picker type="text" id="date" day-of-week-len="3"
placeholder="Date" click-outside-to-close="true" show-todays-date today-btn="false"
ng-model="date" min-date="minDate" max-date="maxDate">
</md-input-container>
<div flex-gt-md="grow" flex-md="initial" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Timepicker Only | 12-hour</label>
<input mdc-datetime-picker date="false" time="true"
placeholder="Time" minutes="true"
min-date="minDate" type="text" id="time"
format="hh:mm a" short-time="true"
ng-model="time">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<div layout="column" flex-gt-md="30">
<md-input-container>
<label>Timepicker Only | 24-hour | Timezone utc | edit input</label>
<input mdc-datetime-picker date="false" time="true"
placeholder="Time" minutes="true" ng-model-options="{timezone: 'utc'}"
min-date="minDate" type="text" id="timez"
format="HH:mm" edit-input="true" show-icon="true"
ng-model="timez">
</md-input-container>
{{timez.toDate()}}
</div>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Timepicker Only | 12-hour | step 15 | auto-ok</label>
<input mdc-datetime-picker date="false" time="true" type="text" id="time15"
placeholder="Time" minutes="true" minute-steps="15"
min-date="minDate" auto-ok="true"
format="hh:mm a" short-time="true"
ng-model="time">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<div layout="column" flex-gt-md="30">
<md-input-container>
<label>Timepicker Only | 24-hour | UTC</label>
<input mdc-datetime-picker date="false" time="true"
placeholder="Time" minutes="true"
min-date="minDate" type="text" id="time2"
format="HH:mm" short-time="false"
ng-model="timeutc">
</md-input-container>
moment: {{timeutc._isAMomentObject}}
</div>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Timepicker Only with seconds and auto ok | 24-hour</label>
<input mdc-datetime-picker date="false" time="true" seconds="true" type="text" id="time3"
placeholder="Time" minutes="true" auto-ok="true"
min-date="minDateNow" minute-steps="1"
format="HH:mm:ss" short-time="false"
ng-model="time">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Date/Time Picker</label>
<input mdc-datetime-picker date="true" time="true" type="text" id="datetime"
placeholder="Date" show-todays-date minutes="true"
min-date="date" show-icon="true"
ng-model="dateTime">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Date/Time Picker with no clear</label>
<input mdc-datetime-picker date="true" time="true" type="text" id="datetimenoclear"
placeholder="Date" show-todays-date minutes="true"
min-date="date" show-icon="true" show-clear="false"
ng-model="dateTime">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<form name="frm">
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<div layout="column" flex-gt-md="30">
<md-input-container>
<label>Date/Time Picker edit input</label>
<input mdc-datetime-picker date="true" time="true" type="text" id="datetimeedit"
placeholder="YYYY-MM-DD HH:MM" show-todays-date minutes="true" short-time="true"
min-date="minDate" max-date="maxDateNow" edit-input="true" show-icon="true"
ng-model="dateTimeEdit" name="datetimeedit">
</md-input-container>
<div ng-messages="frm.datetimeedit.$error" style="color:red" role="alert">
<div ng-message="format">invalid date format</div>
<div ng-message="min">less than min date</div>
<div ng-message="max">greater than max date</div>
</div>
</div>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
</form>
<form name="frmreq">
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<div layout="column" flex-gt-md="30">
<md-input-container>
<input mdc-datetime-picker class="md-input" today-text="Today" am-text="am" pm-text="pm" cancel-text="cancel"
ok-text="ok" date="true" time="true" type="text" placeholder="Date Time required"
show-todays-date="true" minutes="true" min-date="minDate" auto-ok="true" short-time="true"
ng-model="dateTimeRequired" name="datetimereq" required>
</md-input-container>
<div ng-messages="frmreq.datetimereq.$error" style="color:red" role="alert">
<div ng-message="required">date time required</div>
</div>
<p>Frm dirty: {{frmreq.$dirty}}, Frm invalid: {{frmreq.$invalid}}</p>
</div>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
</form>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Time Picker edit input</label>
<input mdc-datetime-picker date="false" time="true" type="text" id="timeedit"
placeholder="HH:MM" show-todays-date minutes="true"
min-date="date" edit-input="true" show-icon="true"
ng-model="timeEdit">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Date/Time Picker auto ok</label>
<input mdc-datetime-picker date="true" time="true" type="text" id="datetimeauto"
placeholder="Date" show-todays-date minutes="true"
min-date="date" auto-ok="true" short-time="true"
ng-model="dateTime">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Date/Time Picker no minutes</label>
<input mdc-datetime-picker date="true" time="true" minutes="false" type="text" id="datetimenomin"
placeholder="Date" show-todays-date min-date="date" ng-model="dateTimeNoMin">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Date/Time Picker seconds</label>
<input mdc-datetime-picker date="true" time="true" minutes="true" seconds="true" type="text" id="datetimesecond"
placeholder="Date" show-todays-date min-date="date" ng-model="dateTimeNoMin">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<div layout="column" flex-gt-md="30" class="range">
<md-input-container>
<label>Start Date/Time</label>
<input mdc-datetime-picker date="true" time="true" type="text"
placeholder="Date" minutes="true" edit-input="true"
max-date="dateTimeEnd" show-icon="true"
ng-model="dateTimeStart"/>
</md-input-container>
<md-input-container>
<label>End Date/Time</label>
<input mdc-datetime-picker date="true" time="true" type="text"
placeholder="Date" minutes="true" edit-input="true"
min-date="dateTimeStart" show-icon="true"
ng-model="dateTimeEnd">
</md-input-container>
</div>
<div flex-gt-md="70" ex-source-code target="div.range" title="DateRange Example"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Disable Certain Dates</label>
<input time="false" date="true" mdc-datetime-picker type="text" id="date-2"
placeholder="Date"
ng-model="date" min-date="minDate" max-date="maxDate" disable-dates="dates">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Highlight Weekdays Only</label>
<input time="false" date="true" mdc-datetime-picker type="text" id="weekdaysdate"
placeholder="Date" ng-model="date" min-date="minDate" max-date="maxDate" week-days="true">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Custom Picker template</label>
<input mdc-datetime-picker date="true" time="true" minutes="true" type="text" id="datetimetmpl" has-backdrop="false"
placeholder="Date" show-todays-date min-date="date" ng-model="dateTimeNoMin" template-url="customTemplate.html">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<div flex-gt-md="30">
<p>mdcDateTimeDialog Service</p>
<md-button id="pickerbutton" class="md-raised md-primary" ng-click="displayDialog($event)">
Display Picker
</md-button>
<p ng-if="selectedDateTime">Date: {{selectedDateTime|date:'medium'}}</p>
</div>
<div flex-gt-md="grow" ex-source-code target="button"></div>
</div>
</md-card-content>
</md-card>
</md-content>
</body>
</html>