MrFranke / angular-js-bootstrap-datetimepicker

Angular UI Bootstrap Date Time Picker

Angular UI
Bootstrap Date Time Picker

Demo: http://plnkr.co/edit/LJCTeX?p=preview

The control is based on AngularUI Datepicker and Timepicker.

Date is formatted using the date filter and is localized.

##Bower Install

Run bower install angular-ui-bootstrap-datetimepicker --save to persist it to bower.json

Include the ui.bootstrap.datetimepicker module in your app.js file. You must be using the ui.bootstrap module as well.

###Usage Sample

// Disable weekend selection
$scope.isDisabledDate = function(currentDate, mode) {
  return mode === 'day' && (currentDate.getDay() === 0 || currentDate.getDay() === 6);
};

<datetimepicker ng-model="date" 
                date-format="dd-MMM-yyyy" 
                date-options="dateOptions" 
                date-disabled="isDisabledDate(date, mode)">
</datetimepicker>

Datetimepicker Settings

• ng-model : The date and time object.

• min-date (Default: null) : Defines the minimum available date and time.

• max-date (Default: null) : Defines the maximum available date.

• date-disabled (date, mode) (Default: null) : An optional expression to disable visible options based on passing date and current mode (day|month|year).

• day-format (Default: 'dd') : Format of day in month.

• month-format (Default: 'MMMM') : Format of month in year.

• year-format (Default: 'yyyy') : Format of year in year range.

• year-range (Default: 20) : Number of years displayed in year selection.

• day-header-format (Default: 'EEE') : Format of day in week header.

• day-title-format (Default: 'MMMM yyyy') : Format of title when selecting day.

• month-title-format (Default: 'yyyy') : Format of title when selecting month.

• date-format (Default: 'yyyy-MM-dd') : The format for displayed dates.

• date-options attribute. (Default: {}) : Options for datepicker in JSON format

• hour-step (Defaults: 1) : Number of hours to increase or decrease when using a button.

• minute-step (Defaults: 1) : Number of minutes to increase or decrease when using a button.

• show-meridian (Defaults: true) : Whether to display 12H or 24H mode.

• meridians (Defaults: ['AM', 'PM']) : Meridian labels

• readonly-time (Defaults: false) : Whether a user can type inside the hours & minutes input.

• readonly-date (Defaults: false) : Whether a user can type inside the date input.

• hidden-time (Defaults: false) : Whether a user can see the hours & minutes input.

• hidden-date (Defaults: false) : Whether a user can see the date input.

• mousewheel (Defaults: true) : Whether user can scroll inside the hours & minutes input to increase or decrease it's values.

• show-spinners (Defaults: true) : Shows spinner arrows above and below the inputs.

• current-text (Default: 'Today') : The text to display for the current day button.

• clear-text (Default: 'Clear') : The text to display for the clear button.

• close-text (Default: 'Done') : The text to display for the close popup button.