Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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'
});
You can’t perform that action at this time.