md-date-range-picker
Version:
Angular Material Date Range Picker
132 lines (118 loc) • 4.75 kB
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>