ng-multidaterangepicker
v0.0.5
Published
A dependency-free calendar directive for Angular
Downloads
2
Readme
Daterangepicker
A simple and fluid inline date range picker for AngularJS with lodash/underscore only as a dependency. It works both as a simple date picker or as a date range picker and provides a lot of flexibility.
Quick Find:
- [Installation] (#installation)
- [Daterangepicker options] (#daterangepicker-options)
- [Changing the templates] (#changing-the-templates)
- [Translating the date names] (#translating-the-date-names)
- [Examples] (#examples)
Installation
- Add the
daterangepicker
module to your dependencies
angular.module('myApp', ['daterangepicker']);
- Use the
daterangepicker
directive in any element
<div daterangepicker></div>
Daterangepicker is fluid, so it will take the width of the parent container.
Daterangepicker options
date-ranges
Flag some dates/ranges on the calendar. Simply pass an array of dates or ranges with the classes you need. To disable dates/ranges add them to your date-ranges array with the daterangepicker-disabled
class.
<div daterangepicker date-ranges="dateRanges"></div>
DateRange is a list of range with the following format
var dateRange = [
{ start_date: '2014-12-01', end_date: '2014-12-10', css_classes: 'blocked' }
];
If a class is provided, it will be added to the date on the calendar. Multiple classes separated by a space ('blocked disabled').
By default the calendar uses the following classes, which can be easily overwritten:
daterangepicker-enabled
daterangepicker-today
daterangepicker-active
daterangepicker-disabled
min-date, max-date
<div daterangepicker date-ranges="dateRanges" min-date="minDate" max-date="maxDate"></div>
function MyAppController($scope) {
$scope.minDate = '2013-11-10';
$scope.maxDate = '2013-12-31';
}
min-date
and max-date
take angular expressions, so if you want to specify the values inline, don't forget the quotes!
<div daterangepicker min-date="'2013-11-10'" max-date="'2013-12-31'"></div>
default-date
Allows you to preset the calendar to a particular month without setting the chosen date.
<div daterangepicker default-date="presetDate"></div>
function MyAppController($scope) {
$scope.presetDate = '2013-12-01';
}
start-today
Sets the first day of the calendar as today's date. If set to true, minDate will be today and the default-date will be overwritten.
week-starts-on
Sets the first day of the week. The default is 0 for Sunday.
<div daterangepicker week-starts-on="1"></div>
no-extra-rows
The calendar will have between 4 and 6 rows if this attribute is present. By default it will always have 6 rows.
<div daterangepicker no-extra-rows></div>
onDateClick
The calendar will call the provided function everytime a date is clicked. It will receive a factory object activeRange
which enables you to update the calendar based on the users' actions.
activeRange has 4 fields on interest:
activeRange.first_date: It is set to the first date clicked on by the user
activeRange.second_date:
If isPendingClick
has been set to true, second_date receives the second date the user has clicked on. Its main purpose is to use the directive as a "date range picker" rather than a simple "date picker"
activeRange.start_date() and activeRange.end_date(): These functions return the starting date and the ending date of the range (chronologically speaking), they are to be used to set an active range in date-ranges for example:
var firstDate = $filter('date')(activeRange.start_date(), 'yyyy-MM-dd');
var secondDate = $filter('date')(activeRange.end_date(), 'yyyy-MM-dd');
// highlight selected dates
$scope.dateRanges = [
{ start_date: firstDate, end_date: secondDate }
];
activeRange.isPendingClick:
If set to true
on response to the first click, activeRange stores the first_date value and waits for the user to make a second click
activeRange.isLocked: If set to true, the directive ignores any mouse event on the calendar
Changing the templates:
the calendar template is stored in the $templateCache
under the route 'calendar/daterange_picker.html'
. To overwrite it, simply add a new template during your run
phase:
angular.module('myApp', [])
.run(function($templateCache) {
$templateCache.put('calendar/daterange_picker.html',
'<my-awesome-template></my-awesome-template>'
)
})
Here is the initial template:
<div class="daterangepicker">
<div class="daterangepicker-header">
<div class="daterangepicker-controls">
<div class="daterangepicker-month">
<a href="" ng-click="changeMonth(-1)" ng-show="allowPrevMonth" translate="translate"
lass="daterangepicker-prevmonth">
<i class="icon-chevron-left"></i>
</a>
<span>{{getI18nMonth(currentDate)}}</span>
<a href="" ng-click="changeMonth(1)" ng-show="allowNextMonth" translate="translate"
lass="daterangepicker-nextmonth">
<i class="icon-chevron-right"></i>
</a>
</div>
<div class="daterangepicker-year">
<a href="" ng-click="changeMonth(-12)" ng-show="allowPrevMonth"
lass="daterangepicker-prevmonth">
<i class="icon-chevron-left"></i>
</a>
<span>{{currentDate | date:"yyyy"}}</span>
<a href="" ng-click="changeMonth(12)" ng-show="allowNextMonth" class="daterangepicker-nextyear">
<i class="icon-chevron-right"></i>
</a>
</div>
</div>
</div>
<div class="daterangepicker-body">
<div class="daterangepicker-main">
<ul class="daterangepicker-cell">
<li ng-repeat="dayName in dayNames" class="daterangepicker-head">{{dayName}}</li>
</ul>
<ul class="daterangepicker-cell">
<li ng-class="getClass(date)" ng-repeat="date in dates" ng-click="setDate(date)"
g-mouseenter="mouseEnter(date)" ng-mouseleave="mouseLeave(date)"
tartToday="true">
{{date | date:"d"}}
</li>
</ul>
</div>
</div>
</div>
Translating the date names:
By default the date names are in english. However a provider is exposed to simply change the date names during the config
phase:
myApp.config(["calendarData", function(calendarData) {
var frenchDays = [
"Lundi",
"Mardi",
"Mercredi",
"Jeudi",
"Vendredi",
"Samedi",
"Dimanche"
];
calendarData.setDays(frenchDays)
}]);
Examples
Date Picker:
When used as a date picker, users can only select a single date. To achieve this behavior, pass a function looking like the following one:
$scope.onDateClick = function (activeRange) {
activeRange.isLocked = true;
// activeRange.first_date contains a Date Object which you can save, pass to your server or do whatever you want
};
Date Range Picker:
When used as a date range picker, users can only select a date range in 2 clicks. To achieve this behavior, pass a function looking like the following one:
$scope.onDateClick = function (activeRange) {
if (activeRange.isPendingClick === true) {
// Mark the active range as being under treatment so that we can ignore mouse events:
activeRange.isLocked = true;
// It is the second click:
// The range is now defined by [activeRange.first_date, activeRange.second_date
} else {
// If pending is false, the user has clicked only once
// so start date should be frozen by setting pending to true.
activeRange.isPendingClick = true;
}
};
License
Copyright (c) 2015 Nightswapping
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.