Angular Datetime Picker

Native AngularJS datetime picker directive styled by Twitter Bootstrap

Code on Github Download (latest release)

Examples

Embedded calendar

Display a calendar embedded in the page.

Selected Date: {{ data.embeddedDate | date:'yyyy-MMM-dd' }}

Why?

Allows the user to select a date/time directly on the page

How?

You can pass configuration options as a function or an object.

  1. Selected Date: {{ data.date | date:'yyyy-MM-dd a' }}
  2.  
  3. <datetimepicker data-ng-model="data.embeddedDate"
  4.     data-datetimepicker-config="{ startView:'day', minView:'day' }" />

Date Range Picker

Use two date pickers to create a date range picker.

Why?

Prevent the user from accidentally selecting an end date that is before the start date.

How?

See the Read me file

Callback functions

before-render

Attribute on datetimepicker element

Function. Default: null

If the value of the before-render attribute is a function, the date time picker will call this function before rendering a new view, passing in data about the view.

<datetimepicker data-ng-model="data.date" data-before-render="beforeRender($view, $dates, $leftDate, $upDate, $rightDate)"></datetimepicker>

This function will be called every time a new view is rendered.

$scope.beforeRender = function ($view, $dates, $leftDate, $upDate, $rightDate) {
    var index = Math.floor(Math.random() * $dates.length);
    $dates[index].selectable = false;
}

The following parameters are supplied by this directive :

DateObject {
    utcDateValue: Number - UTC time value of this date object. It does NOT contain time zone information so take that
    into account when comparing to other dates (or use localDateValue function).
    localDateValue: FUNCTION that returns a Number - local time value of this date object - same as moment.valueOf() or
    Date.getTime().
    display: String - the way this value will be displayed on the calendar.
    active: true | false | undefined - indicates that date object is part of the model value.
    selectable: true | false | undefined - indicates that date value is selectable by the user.
    past: true | false | undefined - indicates that date value is prior to the date range of the current view.
    future: true | false | undefined - indicates that date value is after the date range of the current view.
}

Setting the .selectable property of a DateObject to false will prevent the user from being able to select that date value.

on-set-time

Attribute on datetimepicker element

Function. Default: null

If the value of the on-set-time attribute is a function, the date time picker will call this function passing in the selected value and previous value.

<datetimepicker data-ng-model="data.date" data-on-set-time="onTimeSet(newDate, oldDate)"></datetimepicker>

This function will be called when the user selects a value on the minView.

$scope.onTimeSet = function (newDate, oldDate) {
    console.log(newDate);
    console.log(oldDate);
}

data-on-set-time="onTimeSet()" <-- This will work

data-on-set-time="onTimeSet" <-- This will NOT work, the ()'s are required

Configuration Options

The datetimepicker-config attribute defines the configuration options.

This attribute can be an object or a function.

minView

String. Default: 'minute'

The view that will trigger date selection when the user clicks on one of the date/time values.

minuteStep

Number. Default: 5

The increment used to build the hour view. A button is created for each minuteStep minutes.

startView

String. Default: 'day'

The view that the datetimepicker should show when it is opened.

Accepts values of :

minute
for the minute view
hour
for the hour view
day
for the day view (the default)
month
for the month view (12-months of the selected year)
year
for the year view (12-year range)

dropdownSelector

String. Default: null

When used within a Bootstrap dropdown, the selector specified in dropdownSelector will toggle the dropdown when a date/time is selected.

configureOn

String. Default: null

Accepts any string value

Causes the date/time picker to re-read its configuration when the specified event is received.

For example, perhaps the startView option in the configuration has changed and you would like the new configuration to be used. You can $broadcast the event to cause this directive to use the new configuration.

renderOn

String. Default: null

Accepts any string value

Causes the date/time picker to re-render its view when the specified event is received.

For example, if you want to disable any dates or times that are in the past. You can $broadcast the event at an interval to disable times in the past (or any other time valid dates change).

License FAQs

angularjs-bootstrap-datetimepicker is released under the MIT license and is copyright 2015 Knight Rider Consulting, Inc.. Boiled down to smaller chunks, it can be described with the following conditions.

It requires you to:

It permits you to:

It forbids you to:

It does not require you to:

The full angularjs-bootstrap-datetimepicker license is located in the project repository for more information.

This project is maintained by dalelotts