sm-daterangepicker - AngularJS (directive)

The daterangepicker component of bootstrap: http://www.daterangepicker.com/, as directive for use with AngularJS.

Installation

npm install --save sm-daterangepicker

Attention You have imported the bootstrap css into the project so that the date component is rendered correctly.

Use

Add in the module of your application:

require("sm-daterangepicker"); //return module name
angular.module("yourModuleName", ["sm-daterangepicker"]);
ou
angular.module("yourModuleName", [require("sm-daterangepicker")]);

After adding, just use the policy as follows:

<input type="text" ng-model="yourVariable" sm-daterangepicker>

ngModel

To get the beginning and end date, just get the date of the object in the model, formatted like this:

//ngModel
{
    startDate: [object Moment],
    endDate: [object Moment]
}

//Controller
$scope.yourVariable.startDate
$scope.yourVariable.endDate

Available Attributes

Attribute | Type | Description ---------- | ------------ | -------- env | String | Pass this attribute with "DEV", and soon the component will log everything that is changed. (It receives by default "PROD", however it picks up from node.js if it is "DEV") locale | Object | Definition of the translation, if you do not have in the project the angular provider translate. (If no translation is passed it assigns by default the English language.) date-time | String | Accepts values 24h or 12h, to indicate the format, when declared displays in the input the time. year | Date/Moment | It receives only a date, and it makes a limit of the beginning of the year until the end of the year, that contains in her. (When passed this parameter it ignores the minimum and maximum date) start-date | Date/Moment | Sets the selected start date. end-date | Date/Moment | Set as the preset end date. min-date | Date/Moment | Sets the minimum date. max-date | Date/Moment | Sets the maximum deadline. date-limit | String | Limits a range by days, months, years, or hours, minutes, and seconds. onshow | Function | Triggered when the calendar is shown. onhide | Function | Triggered when the calendar is closed. onapply | Function | Triggered when the apply button is clicked, or when a predefined interval is clicked. oncancel | Function | Triggered when the cancel button is clicked. suffix-translation | String | Namespace used in the translation provider's rendering file translate.

Run-time update

Variables of minimum, maximum, beginning, end, and year can all be changed at runtime, and the date component has already adapted to change.

Locale

Note: There are two ways to translate the daterangepicker, one is passing the locale attribute, with the following object:

Attribute locale

//Model
$scope.localeObject = {
    format: "MM/DD/YYYY H:mm",
    separator: " -- ",
    applyLabel: "Apply",
    cancelLabel: "Cancel",
    fromLabel: "From",
    toLabel: "To",
    customRangeLabel: "Custom",
    daysOfWeek: [   
                    "Su",
                    "Mo",
                    "Tu",
                    "We",
                    "Th",
                    "Fr",
                    "Sa"
                ],
    monthNames: [   
                    "January",
                    "February",
                    "March",
                    "April",
                    "May",
                    "June",
                    "July",
                    "August",
                    "September",
                    "October",
                    "November",
                    "December"
                ],
    firstDay: "1"
}
//View
<input type="text" locale="localeObject" sm-daterangepicker>

Another way to do translation that is more efficient by supporting multiple languages and changing at runtime is by working with the provider angular translate.

Angular translate

To better understand what I am explaining below, read about the angular translate.

Namespace (Optional): <input type="text" suffix-translation="NAMESPACE" sm-daterangepicker>

file_of_translation.js

"SM_DATERANGEPICKER: {}" ou "NAMESPACE.SM_DATERANGEPICKER: {}"

"SM_DATERANGEPICKER": {
    "FORMAT": "MM/DD/YYYY H:mm",
    "SEPARATOR": " -- ",
    "APPLYLABEL": "Apply",
    "CANCELLABEL": "Cancel",
    "FROMLABEL": "From",
    "TOLABEL": "To",
    "CUSTOMRANGELABEL": "Custom",
    "DAYSOFWEEK": {
        "SU": "Su",
        "MO": "Mo",
        "TU": "Tu",
        "WE": "We",
        "TH": "Th",
        "FR": "Fr",
        "SA": "Sa"
    },
    "MONTHNAMES": {
        "JANUARY": "January",
        "FEBRUARY": "February",
        "MARCH": "March",
        "APRIL": "April",
        "MAY": "May",
        "JUNE": "June",
        "JULY": "July",
        "AUGUST": "August",
        "SEPTEMBER": "September",
        "OCTOBER": "October",
        "NOVEMBER": "November",
        "DECEMBER": "December"
    },
    "FIRSTDAY": "1"
}

Date limit

Using the date-limit attribute is not that complicated, what it does just, is to make a limit of the date selected from the limited range, just pass it the following:

<input type="text" date-limit="parameter:value" sm-daterangepicker>
//Supported parameters: days, months, years, hours, minutes and seconds.
//For more than one parameter passed, separate them with a comma.
//Example: parameter:value,parameter:value...

Read in another language

Clique aqui e leia em português

Contribution

Contribute to the fact that daterangepicker directive is getting better and better. Just download the project and apply your changes, and after that it will be analyzed to be approved.

Licence

MIT