<commit_before># Daterangepicker

[ ![Daterangepicker Master](https://codeship.com/projects/a45b3400-b38b-0132-4b36-1257de61718a/status?branch=master)](https://codeship.com/projects/70220)

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

1) Add the `daterangepicker` module to your dependencies

```javascript
angular.module('myApp', ['daterangepicker']);
```

2) Use the `daterangepicker` directive in any element

```html
<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.

```html
<div daterangepicker date-ranges="dateRanges"></div>
```

DateRange is a list of range with the following format

```javascript
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:

```html
daterangepicker-enabled
daterangepicker-today
daterangepicker-active
daterangepicker-disabled
```

#### min-date, max-date

```html
<div daterangepicker date-ranges="dateRanges" min-date="minDate" max-date="maxDate"></div>
```

```javascript
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!

```html
<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.

```html
<div daterangepicker default-date="presetDate"></div>
```

```javascript
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.

```html
<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.

```html
<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 date clicked on by the user

**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.second_date:**
If ```isPendingClick``` has been set to true, second_date receives the second date the user has click on. Its main purpose is to use the directive as a "date range ppicker" rather than a simple "date picker"

**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:

```javascript
angular.module('myApp', [])
  .run(function($templateCache) {
    $templateCache.put('calendar/daterange_picker.html',
      '<my-awesome-template></my-awesome-template>'
    )
  })
```

Here is the initial template:
```html
     <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"<commit_msg>Add helper text to explain use of start_date and end_date vs first_date and second_date<commit_after># Daterangepicker

[ ![Daterangepicker Master](https://codeship.com/projects/a45b3400-b38b-0132-4b36-1257de61718a/status?branch=master)](https://codeship.com/projects/70220)

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

1) Add the `daterangepicker` module to your dependencies

```javascript
angular.module('myApp', ['daterangepicker']);
```

2) Use the `daterangepicker` directive in any element

```html
<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.

```html
<div daterangepicker date-ranges="dateRanges"></div>
```

DateRange is a list of range with the following format

```javascript
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:

```html
daterangepicker-enabled
daterangepicker-today
daterangepicker-active
daterangepicker-disabled
```

#### min-date, max-date

```html
<div daterangepicker date-ranges="dateRanges" min-date="minDate" max-date="maxDate"></div>
```

```javascript
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!

```html
<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.

```html
<div daterangepicker default-date="presetDate"></div>
```

```javascript
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.

```html
<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.

```html
<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 click 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:

```javascript
  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:

```javascript
angular.module('myApp', [])
  .run(function($templateCache) {
    $templateCache.put('calendar/daterange_picker.html',
      '<my-awesome-template></my-awesome-template>'
    )
  })
```

Here is the initial template:
```html
     <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"
{'fraction_non_alphanumeric': 0.12248459958932238, 'fraction_numerical': 0.019301848049281315, 'mean_word_length': 4.736749116607774, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 43, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2572311', 'n_tokens_mistral': 3044, 'n_tokens_neox': 2862, 'n_words': 1072}