fng-bootstrap-datetime

fng-bootstrap-datetime

Plugin for forms-angular that adds datetime picker support.

Usage

bower install fng-bootstrap-datetime

Add the following lines to your index.html (or equivalent) file.

<link rel="stylesheet" href="fng-bootstrap-datetime/fng-bootstrap-datetime.css">
<script src="fng-bootstrap-datetime/fng-bootstrap-datetime.js"></script>

Add fng.uiBootstrapDatetime to the list of servies your Angular module depends on.

In your Mongoose schemas you can set up fields like this:

interviewDate: {type: Date, form:{
  directive: 'fng-ui-bootstrap-datetime-picker', 
  fngUiBootstrapDatetimePicker:{
    'date-format': 'dd-MMM-yyyy',
    'date-options':"{'show-weeks':true}"}
    }
  }
},

Options can be added to a fngUiBootstrapDatetimePicker object within the form object as illustrated by the examples above. A complete list of setting options can be found in the Settings section below. Any setting Date options (see uib-datepicker settings can be added as a JSON string as shown above.

For (my) convenience, the following defaults have been changed from the defaults shown below:

show-button-bar: false, 
show-meridian: false,
date-format: 'dd/MM/yyyy'
showWeeks: false

###Known Limitations:

Styling in (unsupported) Bootstrap 2 applications (such as the forms-angular.org website at the time of writing) has a few issues, including inline help placing and the width of the first columnof the dropdown when weeks are not shown.

##Readme from github.com/zhaber/angular-js-bootstrap-datetimepicker (now Angular 4+ only)

The plugin is based on AngularUI Datepicker and Timepicker.

Demo: Plunker

Date is formatted using the date filter and is localized.

Install

NPM

Run npm install angular-ui-bootstrap-datetimepicker to install. Use the --save option to add it to your package.json's dependencies.

If you're using browserify, you can simply require('angular-ui-bootstrap-datetimepicker') to make it available in your angular project. Ensure that your angular module depends on ui.bootstrap.datetimepicker. You must be using the ui.bootstrap module as well - also availbe via npm.

Also include the stylesheet datetimepicker.css in your html. Note that this is the same stylesheet that the package.json's style declaration has.

Bower

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.

NuGet

See https://www.nuget.org/packages/Angular-js-bootstrap-datetimepicker/

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

• 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.

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

• datepicker-append-to-body (Default: false) : Append the datepicker popup element to body, rather than inserting after datepicker-popup.

• datepicker-popup-template-url (Default: uib/template/datepickerPopup/popup.html) : Add the ability to override the template used on the component.

• datepicker-template-url (Default: uib/template/datepicker/datepicker.html) : Add the ability to override the template used on the component (inner uib-datepicker).

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

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

• date-ng-click (Default: null) : A function called when a date input is clicked.

• date-opened (Default: false) : Whether or not to show the datepicker.

• date-options attribute. (Default: {}) : Options for datepicker in JSON format. E.g. minDate and maxDate, which define the minimum and maximum available date and time.

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

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

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

• disabled-date (Defaults: false) : Whether the date input is disabled.

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

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

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

• max-time (Defaults: ['12:59 PM']) : Maximum time for time picker (Date).

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

• min-time (Defaults: ['0:00 AM']) : Minumum time for time picker (Date).

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

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

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

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

• ng-model : The date and time object.

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

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

• required (Defaults: false) : Whether a non-empty value is required.

• show-button-bar (Defaults: true) : Whether or not to display a button bar underneath the uib-datepicker..

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

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

• timepicker-template-url (Defaults: uib/template/timepicker/timepicker.html) : Add the ability to override the template used on the component.

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

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