datetimepicker

  1. - component in module bootstrap-datetimepicker

Native AngularJS date & time picker directive styled by Twitter Bootstrap. Based on dalelotts/angularjs-bootstrap-datetimepicker.

! It is important to set locale in Luxon !

import {DateTime, Settings} from 'luxon';
Settings.defaultLocale = DateTime.local().resolvedLocaleOpts().locale;

Dependencies

Usage

<datetimepicker
    [before-render="expression"]
    [on-set-time="expression"]
    [view-format="string"]
    [datetimepicker-config="DateTimePickerConfiguration"]>
</datetimepicker>

Arguments

Param Type Details
beforeRender
(optional)
expression

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) {
    const index = Math.floor(Math.random() * $dates.length);
    $dates[index].selectable = false;
}

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

Param Type Details
$view String

the name of the view to be rendered

$dates Array.<DateObject>

a (possibly empty) array of DateObject's (see source) that the user can select in the view.

$leftDate DateObject

the DateObject selected if the user clicks the left arrow.

$upDate DateObject

the DateObject selected if the user clicks the text between the arrows.

$rightDate DateObject

the DateObject selected if the user clicks the right arrow.

onSetTime
(optional)
expression

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

Param Type Details
newDate Date

New date. Probably JS Date object.

oldDate Date

Old date. Probably JS Date object.

viewFormat
(optional)
String

Luxon format. If defined, ngModel will be formatted to this format. By default ngModel is formatted to ISO standard.

datetimepickerConfig
(optional)
DateTimePickerConfiguration

Datetime picker configuration.

Example

<main class="container-fluid">
     <datetimepicker ng-model="datetime"></datetimepicker>
     <div class="row">
         <div class="col-lg-3">
             <input class="form-control" disabled="true" ng-model="datetime">
         </div>
     </div>
</main>
luxon.Settings.defaultLocale = luxon.DateTime.local().resolvedLocaleOpts().locale;
angular.module('bootstrapDatetimePickerExample', ['bootstrap-datetimepicker']);