Skip to content

Feature/show icon #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Feature/show icon #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1ff53db
showIcon added to mdcDatetimePicker
Erffun Jan 25, 2017
b6cabc4
sample code added to index file
Erffun Jan 25, 2017
6029285
iconName property added
Erffun Mar 20, 2017
4276415
Merge pull request #1 from logbon72/gh-pages
Erffun Mar 20, 2017
d6ab835
merged with new version
Erffun Mar 20, 2017
7c82402
show icon changed and icon-name attr added
Erffun Mar 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 123 additions & 119 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,140 +1,144 @@
<html ng-app="mdDatetimePickerDemo">

<head>
<title>Angular-Material DateTimePicker</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css" rel="stylesheet"
type="text/css"/>
<link rel="stylesheet" href="./css/material-datetimepicker.css" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css" rel="stylesheet" type="text/css"
/>
<link rel="stylesheet" href="./css/material-datetimepicker.css" type="text/css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body ng-controller="DemoCtrl" layout="column">
<md-content class="md-padding">
<div layout="column">
<h1>Angular Material DatePicker</h1>
</div>

<md-card layout="column">
<md-toolbar class="md-primary">
<div class="md-toolbar-tools">
<h2>
<span>Datetime Pickers</span>
</h2>
</div>
</md-toolbar>
<md-card-content class="md-padding">
<p>
You can double click / double tap to make selections.
</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"
placeholder="Date"
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" type="text" id="time" short-time="true"
placeholder="Time"
min-date="minDate"
format="hh:mm a"
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>Timepicker Only (24-hour)</label>
<input mdc-datetime-picker date="false" time="true" type="text" id="time2"
placeholder="Time"
min-date="minDate"
format="HH:mm"
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
min-date="date"
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">
<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"
max-date="dateTimeEnd"
ng-model="dateTimeStart"
/>
<md-content class="md-padding">
<div layout="column">
<h1>Angular Material DatePicker</h1>
</div>

<md-card layout="column">
<md-toolbar class="md-primary">
<div class="md-toolbar-tools">
<h2>
<span>Datetime Pickers</span>
</h2>
</div>
</md-toolbar>
<md-card-content class="md-padding">
<p>
You can double click / double tap to make selections.
</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" placeholder="Date" ng-model="date" min-date="minDate"
max-date="maxDate">
</md-input-container>
<md-input-container>
<label>End Date/Time</label>
<input mdc-datetime-picker date="true" time="true" type="text"
placeholder="Date"
min-date="dateTimeStart"
ng-model="dateTimeEnd"
/>
<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" type="text" id="time" short-time="true" placeholder="Time" min-date="minDate"
format="hh:mm a" 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>Timepicker Only (24-hour)</label>
<input mdc-datetime-picker date="false" time="true" type="text" id="time2" placeholder="Time" min-date="minDate" format="HH:mm"
ng-model="time">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>

<div flex-gt-md="grow" 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">

<div flex-gt-md="30">
<p>Test mdcDateTimeDialog Service</p>
<md-button class="md-raised md-primary" ng-click="displayDialog()">
Display Picker
</md-button>
<p ng-if="selectedDateTime">Date: {{selectedDateTime|date}}</p>
<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 min-date="date"
ng-model="dateTime">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>

<div flex-gt-md="grow" ex-source-code target="button"></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" max-date="dateTimeEnd" 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" min-date="dateTimeStart" ng-model="dateTimeEnd"
/>
</md-input-container>
</div>

</div>
<div flex-gt-md="grow" ex-source-code target="div.range" title="DateRange Example"></div>
</div>

</md-card-content>
<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>

</md-card>
</md-content>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/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>
<div flex-gt-md="30">
<p>Test mdcDateTimeDialog Service</p>
<md-button class="md-raised md-primary" ng-click="displayDialog()">
Display Picker
</md-button>
<p ng-if="selectedDateTime">Date: {{selectedDateTime|date}}</p>
</div>

<div flex-gt-md="grow" ex-source-code target="button"></div>

</div>

<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Datepicker Only (with icon)</label>
<input time="false" date="true" mdc-datetime-picker type="text" id="date" placeholder="Date" ng-model="date" min-date="minDate"
max-date="maxDate" show-icon="true">
</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 (Custom icon)</label>
<input time="true" date="false" mdc-datetime-picker type="text" id="date" placeholder="Date" ng-model="date" min-date="minDate"
max-date="maxDate" show-icon="true" icon-name="access_time">
</md-input-container>
<div flex-gt-md="grow" flex-md="initial" ex-source-code target="input"></div>
</div>

</md-card-content>

</md-card>
</md-content>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/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>

</body>
</html>

</html>
Loading