<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://rawgit.com/g00fy-/angular-datepicker/master/app/styles/bootstrap.css">
<link rel="stylesheet" href="https://rawgit.com/g00fy-/angular-datepicker/master/app/styles/style.css" />
<link rel="stylesheet" href="https://rawgit.com/g00fy-/angular-datepicker/master/dist/angular-datepicker.css" />
</head>
<body ng-app="sample">
<div class="row-fluid" ng-controller="DemoController">
<div class="span4">
<div>
<h2>Timezones</h2>
<div ng-repeat="timezone in timezones">
<h4>{{timezone[0]}}</h4>
<div date-picker="dates.today" timezone="{{timezone[1]}}" view="hours" min-view="hours" watch-direct-changes="true"></div>
<hr />
</div>
<h4>No timezone (Uses local)</h4>
<div date-picker="dates.today" view="hours" min-view="hours" watch-direct-changes="true"></div>
</div>
<hr />
<h2>Custom formats</h2>
<div ng-repeat="format in formats">
<h5>{{format}}</h5>
<input type="text" date-time ng-model="dates.today" view="hours" format="{{format}}">
</div>
</div>
<div class="span4">
<h2>Minimum / Maximum dates</h2>
<div>
<h4>Always open div (date-picker directive)</h4>
<div>
<h5>Minimum</h5>
<div date-picker="dates.today" id="pickerMinDateDiv" min-date="minDate" view="date" min-view="hours" timezone="UTC" watch-direct-changes="true"></div>
</div>
<div>
<h5>Maximum</h5>
<div date-picker="dates.today" id="pickerMaxDateDiv" max-date="maxDate" view="date" min-view="hours" timezone="UTC" watch-direct-changes="true"></div>
</div>
<div>
<h5>Minimum + maximum</h5>
<div date-picker="dates.today" id="pickerBothDatesDiv" min-date="minDate" max-date="maxDate" view="date" min-view="hours" timezone="UTC" watch-direct-changes="true"></div>
</div>
</div>
<div>
<h4>Input with popup (date-time directive)</h4>
<form name="demoForm">
<div>
<h5>Min ({{demoForm.pickerMinDate.$error.min ? 'Min: invalid' : 'Min: valid'}})</h5>
<input date-time name="pickerMinDate" ng-model="dates.today" id="pickerMinDate" min-date="minDate" view="date" min-view="hours" timezone="UTC" format="lll">
</div>
<div>
<h5>Max ({{demoForm.pickerMaxDate.$error.max ? 'Max: invalid' : 'Max: valid'}})</h5>
<input date-time name="pickerMaxDate" ng-model="dates.today" id="pickerMaxDate" max-date="maxDate" view="date" min-view="hours" timezone="UTC" format="lll">
</div>
<div>
<h5>Min + max ({{demoForm.pickerBothDates.$error.min ? 'Min: invalid, ' : 'Min: valid, '}} {{demoForm.pickerBothDates.$error.max ? 'max: invalid' : 'max: valid'}})</h5>
<input date-time name="pickerBothDates" ng-model="dates.today" id="pickerBothDates" min-date="minDate" max-date="maxDate" view="date" min-view="hours" timezone="UTC" format="lll">
</div>
</form>
</div>
<div>
<h2>Range</h2>
<div date-range id="pickerRange" start="dates.minDate" end="dates.maxDate" date-change="changeDate" view="date" min-view="date" timezone="UTC"></div>
</div>
</div>
<div class="span4">
<h2>Update events</h2>
<div>
<h4>Minimum date</h4>
<input date-time ng-model="dates.minDate" id="pickerMinSelector" date-change="changeMinMax" max-date="maxDate" view="date" timezone="UTC" format="lll">
</div>
<div>
<h4>Maximum date</h4>
<input date-time ng-model="dates.maxDate" id="pickerMaxSelector" date-change="changeMinMax" min-date="minDate" view="date" timezone="UTC" format="lll">
</div>
<div>
<h4>Default view</h4>
<select ng-change="changeData('view')"
ng-options="view for view in views"
ng-model="options.view"></select>
</div>
<div>
<h4>Min view</h4>
<select ng-change="changeData('minView')"
ng-options="view for view in views"
ng-model="options.minView">
<option value="">Disabled</option>
</select>
</div>
<div>
<h4>Max view</h4>
<select ng-change="changeData('maxView')"
ng-options="view for view in views"
ng-model="options.maxView">
<option value="">Disabled</option>
</select>
</div>
<div>
<h4>Format</h4>
<select ng-change="changeData('format')"
ng-options="format for format in formats"
ng-model="options.format">
<option value="">Disabled</option>
</select>
</div>
<h2>Callback</h2>
<div>
<h4>Select a date from either picker</h4>
<div ng-bind="callbackState"></div>
<button ng-click="callbackState = 'Callback: Not fired'">Reset state</button>
</div>
<input type="text" date-time ng-model="dates.today" view="hours" date-change="changeDate">
<div date-picker="dates.today" view="date" date-change="changeDate" timezone="UTC" watch-direct-changes="true"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.4.1/moment-timezone-with-data.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://rawgit.com/g00fy-/angular-datepicker/master/dist/angular-datepicker.js"></script>
<script>
var demoApp = angular.module('sample', ['datePicker', 'ui.bootstrap']);
demoApp.controller('DemoController', function ($scope) {
$scope.dates = {
today: moment.tz('UTC').hour(12).startOf('h'), //12:00 UTC, today.
minDate: moment.tz('UTC').add(-4, 'd').hour(12).startOf('h'), //12:00 UTC, four days ago.
maxDate: moment.tz('UTC').add(4, 'd').hour(12).startOf('h'), //12:00 UTC, in four days.
};
$scope.options = {
view: 'date',
format: 'lll',
maxView: false,
minView: 'hours',
};
$scope.minDate = $scope.dates.minDate;
$scope.maxDate = $scope.dates.maxDate;
$scope.formats = [
"MMMM YYYY",
"DD MMM YYYY",
"ddd MMM DD YYYY",
"D MMM YYYY HH:mm",
"lll",
];
$scope.timezones = [
['London, UK', 'Europe/London'],
['Hong Kong, China', 'Asia/Hong_Kong'],
['Vancouver, Canada', 'America/Vancouver'],
];
$scope.views = ['year', 'month', 'date', 'hours', 'minutes'];
$scope.callbackState = 'Callback: Not fired';
$scope.changeDate = function (modelName, newDate) {
console.log(modelName + ' has had a date change. New value is ' + newDate.format());
$scope.callbackState = 'Callback: Fired';
}
$scope.changeMinMax = function (modelName, newValue) {
//minDate or maxDate updated. Generate events to update relevant pickers
var values = {
minDate: false,
maxDate: false,
}
if (modelName === 'dates.minDate') {
values.minDate = newValue;
$scope.$broadcast('pickerUpdate', ['pickerMinDate', 'pickerMinDateDiv', 'pickerMaxSelector'], values);
values.maxDate = $scope.dates.maxDate;
} else if (modelName === 'dates.maxDate') {
values.maxDate = newValue;
$scope.$broadcast('pickerUpdate', ['pickerMaxDate', 'pickerMaxDateDiv', 'pickerMinSelector'], values);
values.minDate = $scope.dates.minDate;
}
//For either min/max update, update the pickers which use both.
$scope.$broadcast('pickerUpdate', ['pickerBothDates', 'pickerBothDatesDiv'], values);
}
$scope.changeData = function (type) {
var values = {},
pickersToUpdate = ['pickerMinDate', 'pickerMaxDate', 'pickerBothDates', 'pickerMinDateDiv', 'pickerMaxDateDiv', 'pickerBothDatesDiv', 'pickerRange'];
switch (type) {
case 'view':
values.view = $scope.options.view;
break;
case 'minView':
values.minView = $scope.options.minView;
break;
case 'maxView':
values.maxView = $scope.options.maxView;
break;
case 'format':
values.format = $scope.options.format;
break;
}
if (values) {
$scope.$broadcast('pickerUpdate', pickersToUpdate, values);
}
}
});
</script>
</body>
</html>
/* Put your css in here */