132 lines
4.6 KiB
HTML
132 lines
4.6 KiB
HTML
<html lang="en" ng-app="demo.app">
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- Angular Material style sheet -->
|
|
<link rel="stylesheet" href="./angular-material/angular-material.css">
|
|
<link rel="stylesheet" href="./md-date-range-picker.css">
|
|
</head>
|
|
|
|
<body ng-cloak layout="row" ng-controller="ctrl">
|
|
<div style="width: 270px" layout="column">
|
|
<md-list>
|
|
<md-subheader>Demo</md-subheader>
|
|
<md-list-item ng-click="page = 'calendar'">
|
|
<p>Calendar</p>
|
|
<span ng-if="page == 'calendar'">></span>
|
|
</md-list-item>
|
|
<md-list-item ng-click="page = 'picker'">
|
|
<p>Picker</p>
|
|
<span ng-if="page == 'picker'">></span>
|
|
</md-list-item>
|
|
<md-list-item ng-click="page = 'service'">
|
|
<p>Service</p>
|
|
<span ng-if="page == 'service'">></span>
|
|
</md-list-item>
|
|
<md-list-item ng-click="page = 'disabled-dates'">
|
|
<p>Disabled Dates</p>
|
|
<span ng-if="page == 'disabled-dates'">></span>
|
|
</md-list-item>
|
|
<md-list-item ng-click="page = 'selected-dates'">
|
|
<p>Selected Dates</p>
|
|
<span ng-if="page == 'selected-dates'">></span>
|
|
</md-list-item>
|
|
<md-list-item ng-click="page = 'advanced'">
|
|
<p>Advanced</p>
|
|
<span ng-if="page == 'advanced'">></span>
|
|
</md-list-item>
|
|
</md-list>
|
|
<md-button class="md-primary md-raised" ng-click="clearAll()">Clear All</md-button>
|
|
</div>
|
|
<div flex layout="column">
|
|
<md-content class="md-padding" layout flex>
|
|
<div ng-include="page+'.html'" flex></div>
|
|
</md-content>
|
|
</div>
|
|
<!-- Angular Material requires Angular.js Libraries -->
|
|
<script src="./angular/angular.js"></script>
|
|
<script src="./angular-animate/angular-animate.js"></script>
|
|
<script src="./angular-aria/angular-aria.js"></script>
|
|
<script src="./angular-messages/angular-messages.js"></script>
|
|
|
|
<!-- Angular Material Library -->
|
|
<script src="./angular-material/angular-material.js"></script>
|
|
|
|
<!-- Angular Material Date Range Picker Library -->
|
|
<script src="./md-date-range-picker.js"></script>
|
|
|
|
<!-- Your application bootstrap -->
|
|
<script type="text/javascript">
|
|
/**
|
|
* You must include the dependency on 'ngMaterial'
|
|
*/
|
|
angular.module('demo.app', ['ngMaterial', 'ngMaterialDateRangePicker']).controller('ctrl', function ($scope, $mdDateRangePicker) {
|
|
$scope.page = 'calendar';
|
|
|
|
var lessThan3Day = new Date();
|
|
lessThan3Day.setDate(lessThan3Day.getDate() - 2);
|
|
$scope.customTemplates = [
|
|
{
|
|
name: 'Last 3 Days',
|
|
dateStart: lessThan3Day,
|
|
dateEnd: new Date(),
|
|
}
|
|
];
|
|
|
|
$scope.calendarModel = { selectedTemplate: 'Last 3 Days' };
|
|
$scope.pickerModel = { selectedTemplate: 'Last 3 Days' };
|
|
$scope.advancedModel = { selectedTemplate: 'Last 3 Days' };
|
|
$scope.serviceModel = { selectedTemplate: 'Last 3 Days' };
|
|
$scope.selectedDate = {};
|
|
$scope.selectedDates = [];
|
|
$scope.firstDayOfWeek = 0;
|
|
|
|
$scope.selectDateRange = function ($event, autoConfirm) {
|
|
$mdDateRangePicker.show({
|
|
model: $scope.serviceModel,
|
|
autoConfirm: autoConfirm,
|
|
targetEvent: $event,
|
|
customTemplates: $scope.customTemplates,
|
|
}).then(function (result) {
|
|
Object.assign($scope.serviceModel, result);
|
|
}).catch(function () {
|
|
console.log('Cancelled');
|
|
});
|
|
}
|
|
|
|
$scope.format = function (dateStart, dateEnd, template, templateName) {
|
|
return template ? 'Range of ' + (templateName || template) : (dateStart && dateEnd && (dateStart.toLocaleDateString() + ' to ' + dateEnd.toLocaleDateString()));
|
|
}
|
|
$scope.isDisabledDate = function (d) {
|
|
return d.getDay() === 0 || d.getDay() === 6;
|
|
}
|
|
|
|
$scope.showAdvanced = function ($event) {
|
|
$mdDateRangePicker.show({
|
|
model: $scope.advancedModel,
|
|
autoConfirm: true,
|
|
showTemplate: true,
|
|
customTemplates: $scope.customTemplates,
|
|
onePanel: true,
|
|
targetEvent: $event,
|
|
format: $scope.format,
|
|
isDisabledDate: $scope.isDisabledDate,
|
|
}).then(function (result) {
|
|
Object.assign($scope.advancedModel, result);
|
|
}).catch(function () {
|
|
console.log('Cancelled');
|
|
});
|
|
}
|
|
|
|
|
|
$scope.clearAll = function () {
|
|
$scope.calendarModel = { dateStart: null };
|
|
$scope.pickerModel = { dateStart: null };
|
|
$scope.serviceModel = { dateStart: null };
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |