dalelotts/angular-bootstrap-datetimepicker

Native Angular date/time picker component styled by Twitter Bootstrap

Angular 13+ bootstrap date & time picker

Native Angular (13+) datetime picker component styled by Twitter Bootstrap 4.

Documentation

Demo Page

Github

Read this in other languages: Spanish

On Angular 8.x-12.x?

Use version 4

npm install angular-bootstrap-datetimepicker@4

On Angular 7.x?

Use version 3

npm install angular-bootstrap-datetimepicker@3

On Angular 1.x?

See angularjs-bootstrap-datetimepicker

Support the project

I know this is a tiny component but many people use it in production (high 5 to all of us) - if you happen to use this component please click the star button (at the top of the page) - it means a lot to all the contributors.

Peer Dependencies

Peer dependencies:

• Angular 8.x or higher (1.x will not work)
• moment.js 2.22.2 or higher for date parsing and formatting
• bootstrap 4.x for css/layout
• open-iconic for the default icon's (you can use any icon library you like)

jQuery is NOT required.

Usage with Angular CLI

If you are using the Angular CLI there are a few simple steps to add this component to your project.

First, install this module and it's peer dependencies.

npm install --save angular-bootstrap-datetimepicker bootstrap moment open-iconic

Then update ./src/app/app.module.ts to include the following:

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { DlDateTimeDateModule, DlDateTimePickerModule } from 'angular-bootstrap-datetimepicker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    DlDateTimeDateModule,  // <--- Determines the data type of the model
    DlDateTimePickerModule,
  ],
  providers: [FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

Next, add the following to ./src/app/app.component.html

<dl-date-time-picker startView="day" maxView="year" minView="minute" minuteStep="5" [(ngModel)]="selectedDate"> </dl-date-time-picker>

Next, add the following to ./src/styles.css

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~open-iconic/font/css/open-iconic-bootstrap.css";

Note: This component uses open-iconic icons by default, but you can use any icon library that supports styling with classes.

Finally, run npm start and you should see the date/time picker on http://localhost:4200/

By default, the date/time picker is as wide as it's container { width:100% }. It uses bootstrap's flex row and col classes to layout the date/time picker into rows and columns. If the parent container is too narrow (less than 340px in english), the row and column layout may wrap in ways that are not attractive. Other languages/locals may require a wider container to fit the contents.

Configuration

Use the automated configuration generator (please let me know if it does not work for your use case!), or see https://dalelotts.github.io/angular-bootstrap-datetimepicker/ for the automatically generated documentation.

First day of week

The first day of the week is determined by moment's i18n settings. For example, setting the locale to 'fr' will cause Monday to be the first day of the week.

Display of year, month, day, hour, am/pm, and minute formats

The format of hours and minutes is also determined by moment's i18n settings.

hours are displayed using ll as the format. minutes are displayed using lll as the format.

I recommend you use the default locale settings from Moment (if they are incorrect, submit a PR to moment to correct the settings) If for some reason the default Moment settings will not work, you can customize the existing locale or create a custom locale with the desired formats.

Documentation

You can generate the documentation by running npm run documentation or see https://dalelotts.github.io/angular-bootstrap-datetimepicker/

Accessibility

The DlDateTimePickerComponent component adds aria-label attributes to the left, right, and up buttons in addition to all calendar cells where the text of the cell may not fully describe the value.

Keyboard Accessibility

The DlDateTimePickerComponent component supports the following keyboard shortcuts in all views:

Shortcut	Action
LEFT_ARROW	Go to the cell to the left
RIGHT_ARROW	Go to the cell to the right
UP_ARROW	Go to the cell above
DOWN_ARROW	Go to the cell below
HOME	Go to the first cell in the view
END	Go to the last cell in the view
PAGE_UP	Go to the same cell in the previous time period
PAGE_DOWN	Go to the same cell in the next time period
ENTER or SPACE	Select current cell

Screen shots

Year view

This view allows the user to select the year for the target date. If the year view is the minView, the date will be set to midnight on the first day of the year

Month view

This view allows the user to select the month in the selected year. If the month view is the minView, the date will be set to midnight on the first day of the month.

Day view (Default)

This view allows the user to select the the day of the month, in the selected month. If the day view is the minView, the date will be set to midnight on the day selected.

Hour view

This view allows the user to select the hour of the day, on the selected day. If the hour view is the minView, the date will be set to the beginning of the hour on the day selected.

Minute view

This view allows the user to select a specific time of day, in the selected hour. By default, the time is displayed in 5 minute increments. The minuteStep property controls the increments of time displayed. If the minute view is the minView, which is is by default, the date will be set to the beginning of the hour on the day selected.

Contributing

See Contributing.md

Testing

This component was written using TDD and all enhancements and changes have related tests.

We use karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use gulp:

npm install
npm test

The karma task will try to open Chrome as a browser in which to run the tests. Make sure Chrome is available or change the browsers setting in karma.config.js

Stars history

License

angular-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:

• Keep the license and copyright notice included in angular-bootstrap-datetimepicker's CSS and JavaScript files when you use them in your works

It permits you to:

• Freely download and use angular-bootstrap-datetimepicker, in whole or in part, for personal, private, company internal, or commercial purposes
• Use angular-bootstrap-datetimepicker in packages or distributions that you create
• Modify the source code
• Grant a sublicense to modify and distribute angular-bootstrap-datetimepicker to third parties not included in the license

It forbids you to:

• Hold the authors and license owners liable for damages as angular-bootstrap-datetimepicker is provided without warranty
• Hold the creators or copyright holders of angular-bootstrap-datetimepicker liable
• Redistribute any piece of angular-bootstrap-datetimepicker without proper attribution
• Use any marks owned by Knight Rider Consulting, Inc. in any way that might state or imply that Knight Rider Consulting, Inc. endorses your distribution
• Use any marks owned by Knight Rider Consulting, Inc. in any way that might state or imply that you created the Knight Rider Consulting, Inc. software in question

It does not require you to:

• Include the source of angular-bootstrap-datetimepicker itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
• Submit changes that you make to angular-bootstrap-datetimepicker back to the angular-bootstrap-datetimepicker project (though such feedback is encouraged)

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

angular-bootstrap-datetimepicker's Issues

Allow an option format for the picked date as plain Date long

Allowing picked date to be returned in plain long format would be convenient if the
application needs to send the date value to server as timestamp long. In this way,
I don't need to convert the date value before calling $http.post, but declaratively
configure the format in the html directive of this plugin.

Since displaying the date in a different format is a different matter and easy using angularJS binding expression and date filter, this should be not a conflict.

Temporarily I edited the js file of this plugin and modify one line of code, namely

scope.ngModel = Date.parse(newDate);

I have used Date.parse to convert the string date into long.

Block dates in picker.

Is there any possibility to disable some dates from being picked using options? Something like in ui.bootstrap.datepicker date-disabled(date, mode)? Didnt find something like this in readme but well, you had prepared directive to change display format in input field so maybe.

Thanks for your work.

Working with UTC dates only?

Hi,

firstly I want to thank you for your great component!

I was running over an "issue" with selected date. Maybe I used it wrong but the selected date is not UTC but locale. So the user think he select for exemple the 2014-01-01 00:00 GM+01 but the UTC date is 2013-12-31 23:00 UTC that's "normal".

So my question is, is it some normal behavior for your component?
I had to change maybe 2 lines of your code to work with UTC dates only. Are you interested by a pull request?

Manually type date/time

Any plans to let users type a more fine grained date/time. Rather than just pick from preset options?

Add ability to configure the display format of the time

I would love to have the option to display the hours as 12 hour time with am and pm instead of 24 hour time. Great control, regardless. Thanks for all the hard work.

Wrong date formatting and time formats.

Hi,

I think you got a great plugin, but I got a problem with the time formatting in your directive/plugin. At the beginning of my controller I set the date for the datetime picker like this:

$scope.dateUntil = moment().format('HH:mm DD-MM-YYYY');

This results in a good date, but the problem is when I want to pick a date for example now(10-06-2014 20:16) the picker starts at october instead of June. I know this probably becauser of american/other date formats but I don't live there and dont want that format.
So when I set the date in my function for changing times: $scope.dateFrom = moment(newDate).format('HH:mm DD-MM-YYYY');

It makes it 6 October instead of 10 of June. You know how to fix this? Because I don't know anymore.

Thanks!

First example of http://dalelotts.github.io/angular-bootstrap-datetimepicker/ don't work with Angular 1.2.0rc1 and Bootstrap 3

It seems the data.date is not changed, while using similar code to your example:

p Selected Date: {{ data.date | date:'yyyy-MM-dd HH:mm' }}
datetimepicker(data-ng-model="data.date", data-datetimepicker-config="{ startView:'day', minView:'minute' }")

The strange thing is that it seems to work fine with data-datetimepicker-config="{ startView:'day', minView:'hour' }") or data-datetimepicker-config="{ startView:'hour', minView:'minute' }"). This issue might have to do with the "3 step" selection...

Sometimes first days are not shown in month due to wrong weekStart-calculation

When i set weekStart to bigger than 0, sometimes the first day of the month is not showing in the respective month.

Example:
weekStart: 1 -> First of June 2014 is not showing

cheers
thomas

Option to set ng-model value as moment instead of date object.

Since datetimepicker requires moment.js, it would be nice to have an option to set the value as a moment instead of a date object.

Need to restrict to certain dates

I need to restrict the calendar to certain dates. Min/Max date limits are not sufficient since I might need to disable certain dates in between as well. Is this possible with the current version?

.dropdown('toggle') does not work with bootstrap 3

line 299: replacing with .dropdown().toggle() works (not tested with older bootstrap versions)

Release .scss file and update to Bootstrap 3

Hi again,

I would be nice if we had the .scss file so I can @import it.

Also; Add support to Bootstrap 3.

Cheers 😄

Dropdown conflicts with multiple pickers

If you try to pass in the same selector for multiple dropdowns, it conflicts. Should probably switch

jQuery(configuration.dropdownSelector).dropdown('toggle');

with something like

element.closest(configuration.dropdownSelector).dropdown('toggle');

bow dependencies

Hi
Could you please change dependencies in bower.json, so that it will be possible to use your library with newer versions of bootstrap, angular, moment. E.g. "angular": ">=1.2.14" instead of "angular": "1.2.14"

readme file typo

hey, i think there's a typo in the readme file in the "on-set-time" attribute section. it should be "data-on-set-time" instead of "date-on-set-time" (which is currently written and does not work).

Cache date ranges in localStorage rather than recalculating

Hey,

I've an issue with performance on my app due to ui.bootstrap.datetimepicker. I've a page with 6 datetimepicker and angular take 3 sec to boot.

Without it it take 500ms.

documentation

documentation is difficult to get a grip on especially on the data. model

Using Timestamps

In a project i am working on currently, we only use timestamps. The timestamps come from the Database and converting all timestamps to an object and back is no option when working on a very large project as i do.

To me it makes absolutely no sense to use date objects here. (Almost) no database will save a date object. At least we should have the choice to use either an object or a timestamp, but not beeing able to use a simple timestamp (especially when moment.js is anyway required) is somewhat limiting.

Other than that its a great plugin, keep up the work!

Undefined on jquery .dropdown('toggle') function when click on popup

undefined is not a function
jQuery(configuration.dropdownSelector).dropdown('toggle');

how to format date

Hi in your demo how do I format the date to something simple like dd/MM/yyyy hh:mm rather than the full UTC string? (the wide text box with glyph button demo)

Does not support ng-show on the element.

Hi, ng-show and ng-hide do not appear to work on the element directly. I'm currently wrapping it in a <div> with ng-hide on it to get what I want, but it would be nice if I could use on this directly.

There is a discussion on how to solve it over here: angular/angular.js#2500

port from bootstrap to angular-ui-bootstrap

It would be great to totally get rid of jQuery dependencies in this project and in order to do this it would need to move from bootstrap to angular-ui-bootstrap

The datetimepicker starts with second click

Hello,

In my app have to coexist angular-bootstrap-datetimepicker and ui-bootstrap modules.

If I only add ui.bootstrap.datetimepicker as a dependency to my application module the datetimepicker works well.

When I add both (ui.bootstrap.datetimepicker and ui.bootstrap) as dependencies to my application module, the datetimepicker misbehave, only starting the datetimepicker with second click.

I create a codepen to demonstrate the problem: http://codepen.io/osales/pen/ADbHg

Am I doing something wrong? Any ideas to fix this problem?

Thanks!

port from bootstrap to angular-ui-bootstrap

It would be great to remove the jQuery dependency by switching from bootstrap to angular-ui-bootstrap.

Multiple Instances Inherit Same Configuration

Multiple instances of the control on a single page inherit the first instances options. The options are actually getting set right in the directive but the template is not updated essentially.

You should do scope isolation to resolve: http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_isolating-the-scope-of-a-directive

timezone offset

In my app, I'd like to give users the option of selecting time in either the user's local time or a time relative to another location. For example, the user is located in New York but is setting a time associated with London, England. I'd like to give the option of selecting the time in London time rather than New York time.

support native angular-ui bootstrap / drop bootstrap.js dependency

during a short test of the directive i have noticed that it still needs the bootstrap.js lib. is it possible to drop this dependency and make use of the native angular-ui bootstrap implementation (http://angular-ui.github.io/bootstrap/) ?

Support non-Date values when reading / setting ng-model value

Is it possible to add a int-based timestamp (1379869200000) to the ng-model, instead of a formatted one?

Make .less file available

I would like a .less file in addition to a .css file and I can override styling using my existing build process.

From what I've read the dependency is styles from boostrap-datepicker although after loading the appropriate stylesheet there is no styling on the picker.

FYI for travis-ci coverage

Since I've been copying your Travis CI setup and noticed you'd disabled the coverage recently due to Karma not generating the reports. I was getting the error No Folder 'coverage' found.
I'd found that mine wasn't either and the fix was to change line 11 in your gruntfile to:

var travisOptions = process.env.TRAVIS && { browsers: ['Firefox'], reporters: ['dots','coverage'] };

Don't know if this was your problem but I thought I'd share it anyway.

Implement datetimepicker-append-to-body

Currently datetimepicker is unusable in smaller dialogs because it can't overflow its ancestor div with overflow:scroll (or overflow:hidden).

For example ui.bootstrap.datepicker is capable of that with datepicker-append-to-body attribute.

How do you trigger display of the picker on focus?

Clicking in the input field triggers the tag, but setting the focus there via tab does nothing.

Restricting date range

Is there an easy way to restrict the date range? Say I only want to allow date selection between today and 3 months from now or something similar, how might I approach that?

Allow usage as attribute

I love the lib, though I don't like the linking style.

The way most date and time pickers work is by allowing to attach to existing <input type="datetime"> elements, i.e. by:

<input type="datetime" name="something" datetimepicker />

Advantages when one wants to augment existing <input>:

• less html code clutter
• one less dom element
• attribute deduplication (i.e. no need to specify model twice)
• no need to maintain arbitrary dropdownSelector for the element.

Days dont display inside angular-bootstrap modal component

The datetime picker days are not visible inside the modal component from angular-bootstrap

Update bower.json to incude css file in main

Hi,

I'm using rails-assets/rails-assets to require bower components in my rails applications.
It allows bower components to be required as a gem, and it uses bower.json to know which files to make available in the gem we import.
But the main attribute of your bower.json does not include the css file, making it impossible for me to require it in my application (since only the .js file is downloaded).

Let me know if this causes any problem, as I'm not that familiar with bower.

Thanks !

PS: Of course I can still download the css file manually and use this directive with it, but it goes against the automation process bower is supposed to give.

weekStart not working with angularJS

Hey guys,

first of all: nice work ;)
But when I try to use the weekStart option, then I get following error:

invalid option: weekStart <div class="datetimepicker ng-isolate-scope ng-pristine ng-valid" data-ng-model="product.releaseDate" data-datetimepicker-config="{startView:'day', minView:'day', weekStart: 0 }"> 

I get the same error when using parameter "startWeek". Your documentation tells me those two different params.

So how can I use it? Seems like a bug for me

how to assign value to ng-model

hi, i use this plugin in my project .
like this:
step 1, I save this date value to the database .
step 2. I want to get just saved values from the database and assign this value to ng-model.

But my challenge is, Error: scope.data is undefined
and happens here：
scope.$watch('ngModel', function () {
scope.changeView(scope.data.currentView, getUTCTime());
})

The reason I think this is because set ngmodel value happens before html code in plugin rendering
but i have no idea how to solve this.

i have already solve this question , like this:
$timeout(fn,0);

How to change format display on input text when value selected on popup

Exception when used with latest "moment"

Moment is deprecating global import... and when trying to use with moment 2.4 datetimepicker crashes with the following:

onSetTime() called before date from the form is applied to the model

In function setTime: function (unixDate) { ... } there is a callback that's supposed to be triggered on date/time being set to the model. I was hoping that it would be called after the form date has been set to the model, so that other manipulations could be done, but it's set before:

if (angular.isFunction(scope.onSetTime)) {
  scope.onSetTime(newDate, scope.ngModel);
}
scope.ngModel = newDate;

My need is to set the timezone of the input date to UTC, keeping the date value as it was input (so 2pm EST to become 2pm UTC) which could be done if a callback is done after the selected date is applied to the model, while now that manipulation even if done manually and applied to the model gets overwritten by setting the model with the date from the form.

Am I missing some other way of manipulating the data maybe? Or is this an error, and a callback needs to be called after the date is set to the model?

jQuery is not listed as a dependency

Line 306 of datetimepicker.js is as follows
jQuery(configuration.dropdownSelector).dropdown('toggle');

It would be great to remove jQuery dependency but if it isn't removed it should be listed as a dependency.

Formatting date in input field

Question: I'd like to use the datetimepicker with an associated input field. This all works fine, except the date that displays in the input field is the full date, time, timezone, etc, format. (I'm assuming this is just because ngModel is a js date object?) Since you can't use a filter on an input field (short of writing a special directive to do it), is there a way to format the date display within the datetimepicker directive so that I can control how it looks on an input field? thanks!

Bootstrap dependency why?

So I'm using Bootstrap Sass and don't really want the Bootstrap Less dependency. What was the reasoning for including it as a hard dependency?

Days not showing in calendar

I have been tossing this around trying to get it to work. Is it pertinent that I use the full .js files i.e. moment.js and bootstrap.js or is it fine to use the minified versions?

I tried creating a plunker to show my issue but I was not able to find the right combination of packages to get it to show in plunker .

dynamic $index binding in dropdownSelector

Great work! Really love this angular-powered datetimepicker.

When I was trying to create a bunch of datetimepickers within a ng-repeat loop, the dropdownSelector refused to inject $index into the configuration string: dropdownSelector: '#Id{{$index}}'.

So how can I make it happen? Really appreciate your help on this.

Cheers.

Problem with Angular Version 1.2.0-rc.3

Hey,

i'm pretty new to angularjs, so maybe i missed something...

I get this error: "Error: [$compile:ctreq] Controller 'ngModel', required by directive 'datetimepicker', can't be found!".

To get it working i did put a questionmark on line 67 of the datetimepicker like so:

require: '?ngModel',

on the directive.

I don't know why or how this is working, but maybe its helpfull for someone else.

If you need more information on my setup just tell me.

Starts with second click and don't close

The picker only starts with the second mouseclicjk, and he did'nt close after selection. I have tried dropdown and text link examples with the same result. Any ideas?

invalid date returned to ng-model(version 0.2.2)

When bind date-time to a model, the plugin always return an invalid date object
after date and time picking.

And the date object returned for the first time picking is even not printable.
(console.log(search) gives you nothing.)

search: Thu Feb 20 2014 10:35:00 GMT+0800 (CST)
proto: Invalid Date
constructor: function Date() { [native code] }
getDate: function getDate() { [native code] }
getDay: function getDay() { [native code] }
getFullYear: function getFullYear() { [native code] }
getHours: function getHours() { [native code] }
getMilliseconds: function getMilliseconds() { [native code] }
getMinutes: function getMinutes() { [native code] }
getMonth: function getMonth() { [native code] }
getSeconds: function getSeconds() { [native code] }
getTime: function getTime() { [native code] }
getTimezoneOffset: function getTimezoneOffset() { [native code] }
getUTCDate: function getUTCDate() { [native code] }
getUTCDay: function getUTCDay() { [native code] }
getUTCFullYear: function getUTCFullYear() { [native code] }
getUTCHours: function getUTCHours() { [native code] }
getUTCMilliseconds: function getUTCMilliseconds() { [native code] }

Add support to Font-Awesome

Hi there, thanks for sharing this project.

It would be great if you could add support to font-awesome icons.

Thanks