ng-daterangepicker 
Date range picker for Angular.js
Demo
http://yuyaohshimo.github.io/ng-daterangepicker
Installation
$ bower install ng-daterangepicker
Usage
You should write script and link tag in HTML header:
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="daterangepicker.css"/>You should write date-range-picker tag as an angular directive:
<date-range-picker use-browser-default="useBrowserDefault" options="options" initial-range="initialRange" locale="locale" format="format" apply-button-label="applyButtonLabel" apply-date-range="applyDateRange(start, end)"></date-range-picker>Options
-
use-browser-default: if you want to use a browser's calendar, settrue -
options: range options -
initial-range: initial range -
locale: locale formoment -
format: format to display date -
apply-button-label: label of custom button (optional) -
apply-date-range: callback function
Example:
options = [
// if you want to set date with calendar, put custom
{
label: 'Custom',
value: 'custom'
},
// if you want to set all range option, put all
{
label: 'All',
value: 'all',
selected: true
},
{
label: 'Today',
value:'today',
start: moment(),
end: moment()
},
{
label: 'This week',
value:'thisWeek',
start: moment().startOf('week'),
end: moment().endOf('week')
},
{
label: 'This month',
value:'thisMonth',
start: moment().startOf('month'),
end: moment().endOf('month')
}
];
initialRange = {
start: moment(), // today
end: moment().add(1, 'days') // tomorrow
};
locale = {
year: 'YYYYๅนด',
months : '1ๆ_2ๆ_3ๆ_4ๆ_5ๆ_6ๆ_7ๆ_8ๆ_9ๆ_10ๆ_11ๆ_12ๆ'.split('_'),
weekdaysShort: 'ๆฅ_ๆ_็ซ_ๆฐด_ๆจ_้_ๅ'.split('_')
};
format = {
date: 'YYYY/MM/DD',
to: '~'
};
applyDateRange = function(start, end, option) {
console.log(start);
console.log(end);
console.log(option);
};Development
Please run gulp.
$ gulp
Test
E2E Test
We can do E2E test using protractor.
$ npm run update-webdriver
$ gulp test:e2e
