Wondering what’s next for npm?Check out our public roadmap! »

    @zewkin/ob-daterangepicker-fork

    0.15.0 • Public • Published

    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.


    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:

      <link rel="stylesheet" href="bower_components/ob-daterangepicker/dist/styles/ob-daterangepicker.css">
      <script src="bower_components/ob-daterangepicker/dist/scripts/ob-daterangepicker.js"></script>
    

    b. Inject obDateRangePicker to your main module:

      angular.module('yourModule', ['obDateRangePicker'])
    

    c. Add the ob-daterange-picker directive to your html:

      <ob-daterangepicker range="vm.range"></ob-daterangepicker>
    

    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 | null,
            end: Moment | String | null
        }
    

    default:

        {
            start: moment(),
            end: moment()
        }
    

    Note:
    start 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:

        <ob-daterangepicker range="vm.range" format="vm.format"></ob-daterangepicker>
    

    format:

    If provided then the range object start and end attributes are of String type. You can find the available formats here.
    type:
    String
    default:
    undefined

    min-day:

    The earliest selectable date, dates before this date will be disabled.
    type:
    String or Moment
    Note:
    If you choose to provide the attribute as String you will have to provide the format of the day.
    default:
    undefined

    max-day:

    The latest selectable date, dates after this date will be disabled.
    type:
    String or Moment
    Note:
    If you choose to provide the attribute as String you will have to provide the format of the day.
    default:
    undefined

    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
    default:
    true

    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'
    note:
    If you are using a locale, then you will have to provide one of the values generated by moment.weekdaysMin()
    in lower case

    type:
    String
    default:
    su

    week-days-name:

    Specifies the week days names
    type:
    Array<String>
    default:
    ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

    on-apply:

    Callback function which be invoked when range is applied.
    type:
    Function(start,end)
    default:
    undefined
    example:

    js:
        this.onApply(start, end) {
            ...
        }
    html:
        <ob-daterangepicker on-apply="vm.onApply(start, end)"></ob-daterangepicker>
    

    Note:
    The start and end parameters are optional.

    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:
    Boolean
    default:
    false
    example:

    disabled:

    When set to true, it specifies that the picker element should be disabled. type:
    Boolean
    default:
    false

    calendars-always-on:

    When present, the calendars always will be shown when date range picker is open.
    type:
    Boolean
    default:
    false

    range-window:

    When present, will limit the range of selected days,
    type:
    Number
    default:
    undefined


    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.
    type:
    css class
    default:
    down
    example:

    <ob-daterangepicker range="vm.range" class="up"></ob-daterangepicker>
    

    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.
    type:
    css class
    default:
    left
    example:

    <ob-daterangepicker range="vm.range" class="left"></ob-daterangepicker>
    

    Note:
    You can combine the class to achieve combined positioning. For example:

    <ob-daterangepicker range="vm.range" class="up center"></ob-daterangepicker>
    

    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
    default:
    undefined
    added functions:
    render() - re-renders the component.
    togglePicker() - opens/closes the picker.
    setRange({start: Moment, end: Momet}) - sets the requred date range.
    example:

    js:
        this.api = {};
        
    html:
        <ob-daterangepicker api="vm.api"></ob-daterangepicker>
        <button ng-click="vm.api.togglePicker()">Toggle<button>
    

    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:

      <link rel="stylesheet" href="bower_components/ob-daterangepicker/dist/styles/ob-daterangepicker.css">
      <script src="bower_components/ob-daterangepicker/dist/scripts/ob-daterangepicker.js"></script>
    

    b. Inject obDateRangePicker to your main module:

      angular.module('yourModule', ['obDateRangePicker'])
    

    c. Add the ob-daypicker directive to your html:

      <ob-daypicker selected-day="vm.selectedDay"></ob-daypicker>
    

    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:

        <ob-daypicker selected-day="vm.selectedDay" format="vm.format"></ob-daypicker>
    

    format:

    If provided then the selected-day attribute is of String type. You can find the available formats here.
    type:
    String
    default:
    undefined

    min-day:

    The earliest selectable date, dates before this date will be disabled.
    type:
    String or Moment
    Note:
    If you choose to provide the attribute as String you will have to provide the format of the day.
    default:
    undefined

    max-day:

    The latest selectable date, dates after this date will be disabled.
    type:
    String or Moment
    Note:
    If you choose to provide the attribute as String you will have to provide the format of the day.
    default:
    undefined

    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'
    note:
    If you are using a locale, then you will have to provide one of the values generated by moment.weekdaysMin()
    in lower case

    type:
    String
    default:
    su

    week-days-name:

    Specifies the week days names
    type:
    Array<String>
    default:
    ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

    on-apply:

    Callback function which be invoked when range is applied.
    type:
    Function(day)
    default:
    undefined
    example:

    js:
        this.onApply(day) {
            ...
        }
    html:
        <ob-daypicker on-apply="vm.onApply(day)"></ob-daypicker>
    

    Note:
    You must to provide the day 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
    default:
    false

    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 <yourFormName>.<name>. Note that if the component is disabled the form will be valid - No validations will made.
    type:
    string
    default:
    dayPickerInput

    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
    default:
    false

    disabled:

    When present, it specifies that the picker element should be disabled. type:
    Boolean
    default:
    false

    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.
    type:
    css class
    default:
    left
    example:

    <ob-daypicker selected-day="vm.selectedDay" class="left"></ob-daypicker>
    

    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
    default:
    undefined
    added functions:
    render - re-renders the component.
    example:

    js:
        this.api = {};
        
    html:
        <ob-daterangepicker api="vm.api"></ob-daterangepicker>
        <button ng-click="vm.api.render()">Render<button>
    

    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 #). Write a good description and title, so everybody will know what is fixed/improved.
    • Finally, your contributions will be merged! Contributions are more than welcome!

    Install

    npm i @zewkin/ob-daterangepicker-fork

    DownloadsWeekly Downloads

    2

    Version

    0.15.0

    License

    ISC

    Unpacked Size

    4.62 MB

    Total Files

    59

    Last publish

    Collaborators

    • avatar