**Pure Angular Day & Date Range Pickers** =================== A pure Angular (moment.js is the only dependency) day & date range picker, inspired by Dan Grossman's bootstrap-daterangepicker.
npm install ob-daterangepickerPure Angular Day & Date Range Pickers
===================
A pure Angular (moment.js is the only dependency) day & date range picker, inspired by Dan Grossman's bootstrap-daterangepicker.
----------
Installation
-------------
bower: bower install --save ob-daterangepicker
npm: npm install --save ob-daterangepicker
----------
Date Range Picker
===================
Usage
-------------
a. Add the directive js & css to your index.html file:
```
b. Inject obDateRangePicker to your main module: ``
angular.module('yourModule', ['obDateRangePicker'])
c. Add the ob-daterange-picker directive to your html: ``
----------
Configurations
-------------
All configurations are set through the ob-daterange-picker directive attributes or via the dateRangePickerConfProvider (see details here). Here is the list of configurations:
#### range:
Sets the initial range that would be displayed on the date-range-picker. When, range will be updated this object will be muted accordingly.
type:
Object``
{
start: Moment | String,
end: Moment | String
} `
default: `
{
start: moment(),
end: moment()
}start
Note: and end have to be of same type (Moment object or a String). If you choose to provide the attributes as strings, then you will have to provide the format of the date, for example: `
JS: `
this.range = {
start: '27-08-2014',
end: '30-08-2014'
};
this.format = 'DD-MM-YYYY'; `
HTML: `
#### format:
If provided then the range object start and end attributes are of String type. You can find the available formats here. String
type: undefined
default:
#### min-day:
The earliest selectable date, dates before this date will be disabled.
type:
String or Moment String
Note:
If you choose to provide the attribute as you will have to provide the format of the day. undefined
default:
#### max-day:
The latest selectable date, dates after this date will be disabled.
type:
String or Moment String
Note:
If you choose to provide the attribute as you will have to provide the format of the day. undefined
default:
#### linked-calendars:
When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars. When disabled, the two calendars can be individually advanced and display any month/year.
type:
Boolean true
default:
#### week-start:
Specifies the first day of week (i.e. Sunday, Monday). Has to be one of following:
'su', 'mo', 'tu', 'we', 'th', 'fr', 'sa' moment.weekdaysMin()
note:
If you are using a locale, then you will have to provide one of the values generated by
in lower case
type:
String su
default:
#### week-days-name:
Specifies the week days names
type:
Array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
default:
#### on-apply:
Callback function which be invoked when range is applied.
type:
Function(start,end) undefined
default: `
example: `
js:
this.onApply(start, end) {
...
}
html:
start
Note:
You must to provide the and end parameters as seen in the above example.Boolean
#### auto-apply:
Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates or a predefined range is selected
type: false
default:
example:
#### disabled:
When set to true, it specifies that the picker element should be disabled.
type:
Boolean false
default:
#### calendars-always-on:
When present, the calendars always will be shown when date range picker is open.
type:
Boolean false
default:
#### range-window:
When present, will limit the range of selected days,
type:
Number undefined
default:
----------
Position - Configurations
-------------
The picker position can be set by css classes, here are the available configurations:
#### drops:
Whether the picker appears below or above the ob-daterangepicker directive. Has to be one of following up or down. down
type:
css class
default: `
example: `
#### opens:
Whether the picker appears aligned to the left, to the right, or centered relative to the ob-daterangepicker directive. Has to be one of following right, left or center. left
type:
css class
default: `
example: `
Note:
You can combine the class to achieve combined positioning. For example:
``
----------
Picker API
-------------
You can also pass an object to the component via the api attribute, the component will put some methods on this object.
#### api:
When set to true, it specifies that the picker element should be disabled.
type:
object undefined
default: render()
added functions: - re-renders the component. togglePicker() - opens/closes the picker. setRange({start: Moment, end: Momet}) - sets the requred date range. `
example: `
js:
this.api = {};
html:
----------
Date Range Picker Provider
-------------
All settings can be configured by using the dateRangePickerConfProvider here is an example: ``
angular.module('demo', ['obDateRangePicker'])
.config(['dateRangePickerConfProvider', function(dateRangePickerConf) {
dateRangePickerConf.setConfig({
weekStart: 'mo'
});
}])
Note: all the configurations can be set both through attribute and the provider. If both are set (via provider and attribute) the attribute configuration will be used.
Day Picker
===================
Usage
-------------
a. Add the directive js & css to your index.html file:
``
b. Inject obDateRangePicker to your main module: ``
angular.module('yourModule', ['obDateRangePicker'])
c. Add the ob-daypicker directive to your html: ``
----------
Configurations
-------------
All configurations are set through the ob-daypicker directive attributes or via the datePickerConfProvider (see details here). Here is the list of configurations:
#### selected:
Sets the initial day that would be displayed on the day-picker. When, day will be updated this value will be muted accordingly.
type:
Moment or String`
default: `
selected-day: moment()`
Note:
If you choose to provide the attribute as string, then you will have to provide the format of the date, for example:
JS: `
this.selectedDay = '27-08-2014';
this.format = 'DD-MM-YYYY'; `
HTML: `
#### format:
If provided then the selected-day attribute is of String type. You can find the available formats here. String
type: undefined
default:
#### min-day:
The earliest selectable date, dates before this date will be disabled.
type:
String or Moment String
Note:
If you choose to provide the attribute as you will have to provide the format of the day. undefined
default:
#### max-day:
The latest selectable date, dates after this date will be disabled.
type:
String or Moment String
Note:
If you choose to provide the attribute as you will have to provide the format of the day. undefined
default:
#### week-start:
Specifies the first day of week (i.e. Sunday, Monday). Has to be one of following:
'su', 'mo', 'tu', 'we', 'th', 'fr', 'sa' moment.weekdaysMin()
note:
If you are using a locale, then you will have to provide one of the values generated by
in lower case
type:
String su
default:
#### week-days-name:
Specifies the week days names
type:
Array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
default:
#### on-apply:
Callback function which be invoked when range is applied.
type:
Function(day) undefined
default: `
example: `
js:
this.onApply(day) {
...
}
html:
day
Note:
You must to provide the parameter as seen in the above example.
#### auto-apply:
Will trigger the onApply callback and update the selectedDay value as soon as user enters a valid date.
type:
Boolean false
default:
#### name:
The name of the section in the form. If you want your day picker to be part of form, you should put this attribute in order to get validation errors. You should also add valid-date="true" (the only validation available for now). Then you will be able to receive validation status .string
Note that if the component is disabled the form will be valid - No validations will made.
type: dayPickerInput
default:
#### valid-day:
If provided will trigger the validation mechanism of the component. When the user will enter an invalid date (or will put a date outside of min and max dates) the component will pollute the form it placed in.
type:
boolean false
default:
#### disabled:
When present, it specifies that the picker element should be disabled.
type:
Boolean false
default:
Position - Configurations
-------------
The picker position can be set by css classes, here are the available configurations:
#### opens:
Whether the picker appears aligned to the left, to the right, or centered relative to the ob-daterangepicker directive. Has to be one of following right, left or center. left
type:
css class
default: `
example: `
----------
Picker API
-------------
You can also pass an object to the component via the api attribute, the component will put some methods on this object.
#### api:
When set to true, it specifies that the picker element should be disabled.
type:
object undefined
default: render
added functions: - re-renders the component. `
example: `
js:
this.api = {};
html:
----------
Date Picker Provider
-------------
All settings can be configured by using the datePickerConfProvider here is an example: ``
angular.module('demo', ['obDatePicker'])
.config(['datePickerConfProvider', function(datePickerConf) {
datePickerConf.setConfig({
weekStart: 'mo'
});
}])
Note: all the configurations can be set both through attribute and the provider. If both are set (via provider and attribute) the attribute configuration will be used.
Contribution
-------------
- Fork the project in your account and create a branch with your fix: some-great-feature or some-issue-fix`.
- Commit your changes in that branch, don't forget to add tests.
- Open a pull request, and reference the initial issue in the pull request message (e.g. fixes #
- Finally, your contributions will be merged! Contributions are more than welcome!