JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Angular Datepicker

    calendar and datepicker directives for angular
    Filed under 

    • 🔾47%Overall
    • 736
    • 21 days
    • 🕩433
    • 👥13

    AngularJS datepicker directives

    Requirements

    • Angular v1.2+
    • MomentJS
    • Moment Timezone (If timezones are being used)

    Installation

    via bower

    bower install  angular-datepicker --save
    

    via npm

    npm install  angular-datepicker --save
    

    After the install add the js, css and the moment files to your page.

    Add the following module to your page : datePicker

    Usage Example

    Live demo

    New features

    This fork of angular-datepicker contains several features.

    Timezone Support

    • The directive will work with or without a specified timezone.
    • If the timezone is known, it can be assigned to the datepicker via the timezone attribute.
    • If no timezone is provided, then the local time will be used.
    No timezone information
    <div date-picker></div>
    
    Specific timezone (London, UK)
    <div date-picker timezone="Europe/London"></div>
    
    Specific timezone (Hong Kong, CN)
    <div date-picker timezone="Asia/Hong_Kong"></div>
    

    Maximum / minimum dates:

    • These attributes restrict the dates that can be selected.
    • These work differently from the original min-date and max-date attributes, which they replace.
    • The original attributes allow selecting any dates and just mark the input as invalid.
    • With these attributes, if a date in the picker is outside of the valid range, then it will not be selectable.
    Minimum date:
    <input date-time min-date="minDate">
    
    Maximum date:
    <input date-time max-date="maxDate">
    
    Minimum and maximum date:
    <input date-time min-date="minDate" max-date="maxDate">
    

    Date format (for input fields):

    • A custom format for a date can be assigned via the format atribute.
      • This format will be used to display the date on an input field.
      • If not provided, a default format will be used.
      • See: format options
    <input date-time format="yyyy-MM-dd HH:mm">
    

    Callback on date change

    • Adding a date-change attribute containing a function name will cause this function to be called when the date changes in the picker.
    <input date-time date-change="changeDate">
    

    Update events

    • An event can be broadcast from the parent scope which will update specific pickers with new settings. The settings which can be changed are:
      • minDate: Earliest selectable date for this picker. Disabled if this value is falsy.
      • maxDate: Latest selectable date for this picker. Disabled if this value is falsy.
      • minView: Minimum zoom level for date/time selection. Disabled if this value is falsy.
      • maxView: Maximum zoom level for date/time selection. Disabled if this value is falsy.
      • view: Default zoom level for date/time selection. Set to default value if this value is falsy.
      • format: Format string used to display dates on the input field. Set to default value if this value is falsy.
        • See: format options
        • This option cannot be used on the date-picker directive directly, it must be used on a date-time input field.
    • The possible for the view, minView and maxView fields are:
      • year, month, date, hours, minutes.
    • The event is targeted at specific pickers using their ID attributes.
      • If a picker exists with the same ID then the information in this picker will be updated.
      • A single ID can be used, or an array of IDs

    Create picker with ID

    <input date-time id="pickerToUpdate">
    

    Update one picker.

    $scope.$broadcast('pickerUpdate', 'pickerToUpdate', {
        format: 'D MMM YYYY HH:mm',
        maxDate: maxSelectableDate, //A moment object, date object, or date/time string parsable by momentjs
        minView: 'hours',
        view: false //Use default
    });
    

    Update multiple pickers.

    $scope.$broadcast('pickerUpdate', ['pickerToUpdate', 'secondPickerToUpdate'], {
        format: 'lll'
    });
    
    Show All