Skip to content

Instantly share code, notes, and snippets.

@mbildner

mbildner/daterangepicker.html

Created March 9, 2014 05:38
Show Gist options
  • Save mbildner/9443318 to your computer and use it in GitHub Desktop.
Save mbildner/9443318 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
daterangepicker.html
<html ng-app="app">
<head>
<title>Datepicker</title>
</head>
<body>
<date-range-picker
startDate="04-15-1989"
endDate="06-12-2001"
>
</date-range-picker>
<script>
var datepickerDayHtml = [
'<span>DAY</span>'
].join('\n');
var datepickerWeekHtml = [
'<div>',
"<datepicker-day>{{ test }}</datepicker-day>",
"<datepicker-day>{{ test }}</datepicker-day>",
"<datepicker-day>{{ test }}</datepicker-day>",
"<datepicker-day>{{ test }}</datepicker-day>",
"<datepicker-day>{{ test }}</datepicker-day>",
"<datepicker-day>{{ test }}</datepicker-day>",
"<datepicker-day>{{ test }}</datepicker-day>",
'</div>'
].join('\n');
var datepickerMonthHtml = [
'<div>',
'<div>{{monthName}}</div>',
'<span>Mon</span>',
'<span>Tue</span>',
'<span>Wed</span>',
'<span>Thu</span>',
'<span>Friday</span>',
'<span>Sat</span>',
'<span>Sun</span>',
'</div>',
'<datepicker-week></datepicker-week>',
'<datepicker-week></datepicker-week>',
'<datepicker-week></datepicker-week>',
'<datepicker-week></datepicker-week>'
].join('\n');
var daterangepickerHtml = [
'<div>',
'<span>',
'<datepicker-month begin-month></datepicker-month>',
'</span>',
'<br />',
'<span>',
'<datepicker-month end-month></datepicker-month>',
'</span>',
'</div>'
].join('\n');
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.directive('beginMonth', function () {
return {
restrict: 'A',
require: '^datepickerMonth',
scope: {
monthName: '=monthName'
},
controller: function ($scope, $attrs) {
$scope.monthName = "may";
}
}
});
app.directive('endMonth', function () {
return {
restrict: 'A',
require: '^datepickerMonth',
scope: {
monthName: '=monthName'
},
controller: function ($scope, $attrs) {
$scope.monthName = "december";
}
}
});
app.directive('datepickerDay', function () {
return {
restrict: 'E',
require: '^datepickerWeek',
template: datepickerDayHtml,
}
});
app.directive('datepickerWeek', function () {
return {
restrict: 'E',
require: '^datepickerMonth',
template: datepickerWeekHtml,
}
});
app.directive('datepickerMonth', function () {
return {
restrict: 'E',
template: datepickerMonthHtml,
require: '^dateRangePicker',
controller: function ($scope, $attrs) {
var dateModel = {
}
}
}
});
app.directive('dateRangePicker', function () {
return {
restrict: 'E',
template: daterangepickerHtml,
controller: function ($scope, $attrs) {
var startDate = $attrs['startdate'];
var endDate = $attrs['enddate'];
var startDate = moment(startDate);
var endDate = moment(endDate);
var startMonth = startDate.month();
var endMonth = endDate.month();
$scope.startMonth = startMonth;
$scope.startdate = startDate;
$scope.enddate = endDate;
}
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment