eonasdan / tempus-dominus

A powerful Date/time picker widget.

Paid support only

Please note that I'm moving on to other projects. New issues will need to be sponsored. This can be done via BountySource or my other donation links. Please reach out to me first so we can discuss the terms. Thank you for your years of support.

Tempus Dominus Date/Time Picker v6.9.4

Tempus Dominus is a powerful and robust date time picker for javascript. Version 6 is another major rewrite over the previous version. V6 is written with modern browsers in mind and is written in typescript. Bootstrap, momentjs and jQuery are no longer required dependencies. Popper2 is all that is required for the picker to position correctly. If you still require jQuery (seriously, you should move off that asap) there's a jQuery provider that wraps the native js functions.

Developers

Building

Run npm i to install needed packages.

The docs folder contains the generated documentation site, don't modify this directly as it will be overwritten on build. The dist folder contains the built js/css files.

Running

You can run npm run serve which will start a web server. Navigate to http://localhost:3001/ to view the docs.

Watching for changes

Do not run npm run serve at the same time.

Run npm start. This runs web server, the build and watchers for the docs, styles, and typescript.

Where do you use this?

I'd love to know if your public site is using this plugin and list your logo on the documentation site. Leave create a discussion and let me know.

Priority support is available at an hourly rate.

If you have an urgent request, bug or need installation help, please contact in the discord server.

tempus-dominus's Issues

Translate month name ?

Why if I set locales other than 'en' - month name isn't translate ? Check at your demopage where 'ru' is chosen.

Support for custom additional input-group-addons

I want to build something like the following:

So i add a new input-group-addon with a input[type=checkbox] into the datepicker-input-group. This results in two errors:

1. I cant enable or disable the checkbox, everytime i try that, the calendar-picker appers and disappers.
   To fix this we need a more specific identification of the date-picker-button. I fixed it for myself by changing line 62 to:

   picker.component = picker.element.find('.input-group-addon.datepickerbutton');

but to be compatible with old versions i guess it would be better to check if there is an .input-group-addon.datepickerbutton and if not just use the first .input-group-addon.

1. The datepicker cant parse my date anymore. The Problem is caused because he uses the value of the first input-field -> in this case the checkbox.
   The solution should be like in case 1.

I'am new to GIT ... is there a way i can get involved more in this projekt? So that i can post you my solutions instead of opening issues?

Wrong date on opening

After releasing the 2.1.5 the picker opens on the 11th of januari instead of the 1st of november. Version 2.0.1 didn't have this problem. So apparently it switches the day and month values.

Disabling the dates from the provided date

Hello, is it possible to disable the dates which are earlier than provided date in settings?

If no how I could implement it in this plugin.

Unable to use with require.js and latest moment.

Here the gist:
https://gist.github.com/sunrize531/7220474
And here is the fiddle:
http://jsfiddle.net/xvC44/1/

AutoClose ?

how do i enable autoclose on a picker?

Less file compilation fails

I get the following error when compiling the less code using grunt.

Running "less:development" (less) task
>> FileError: '../bootstrap/variables.less' wasn't found in bower_components/bootstrap3-datetimepicker/src/less/bootstrap-datetimepicker.less on line 9, column 1:
>> 8  */
>> 9 @import "../bootstrap/variables.less";
>> 10
Warning: Error compiling LESS. Use --force to continue.

version 2 - decreasing minutes

When i decrease the minute in the timepicker, the hour will be decreased by 1.
Can be reproduced in every example

startDate option not working

The following code doesn't work. Everything else is functional, except that I can still select a date prior to the startDate option.

Unless I've misunderstood what the startDate option does, the following code should prohibit the user from selecting a date prior to the current date

$('.datetimepicker').datetimepicker({
    pickTime: false,
    startDate : new Date()
});

Thanks

Date validation should consider format

If a date string is not formatted correctly some of it will still gets validated as moment may default it to some valid date. For example, in update function 123 could result in a valid date "01/01/0123".

Something like this might help:

update = function (newDate) {
...
      if (dateStr) picker.date = moment(dateStr, picker.format, true);
...

Thanks

Datetimepicker doesn't close

Once I open the datetimepicker, how can I close it? When I click outside of it, it does not close.

Displaying the calendar behind the modal when initialized with options

Was able to use the datetimepicker on the Modal window. But when initialized with options example: {pickTime : false}, the calendar is being displayed behind the modal.

undefined NaN

When a value is specified like 31-10-2013 (nl) which is the 31th of october. The calendar opens and it shows the error undefined NaN.

When the value is 11-01-2013, the calendar tells me it is the first of november but it should be the 11th of january

But when there is no value specified and I select the 11th of january, then I get the correct format 11-01-2013

Date in input while pickDate : false

When I use pickDate: false I still see in the input of the date. Is it possible to hide it or has something broken here?

time picker mode

I would like to have the time chosen not the current date and time chosen in the text box. What switch or setting needs to be set in order for this to happen? THanks for the reply.

to fix

if pickSeconds is true and pick12HourFormat is also true, the AM/PM selector hangs outside of the box.

the time selectors seem to ignore the startDate restriction

Use Moment.js for better date formatting support

Voice your opinion.

1. Should I add support for moment.js into the main branch?
2. Create a new branch for moment support?
3. Suggest another library that could be used instead.

Typing in time no longer works

In version 2.1.5, typing in a time to a picker with pickDate: false does not work. Then, even selecting it with the picker no longer works. You can even see this in Example 4 of the Documentation.

I believe it is because the change event uses the moment.js validation which appears to expect a full date, not just a time.

Tag new version for Bower

Currently, bootstrap3-datetimepicker will pull down v0.0.11, which is the old stuff that doesn't work with Bootstrap 3. Please tag a new version and update components.json with it.

Activating the 24 hours format

Options pick12HourFormat: false not supports.

Wrong box size when picking time.

Weekday error

Hi Eonasdan!

I have updated to the latest version of your datepicker and have the following error. Sorry for the russian error text - it's my system locale, so I can't give you an english version. But the idea is that the method "weekday" is not supported.

Unhandled exception at line 28, column 3448 in http://localhost:49729/Scripts/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js

0x800a01b6 - Ошибка выполнения Microsoft JScript: Объект не поддерживает свойство или метод "weekday"

I can't use the control because of this error now - every time I change a date in the picker I have this error in IE9 with RU and EN locales. In Chrome is't ok.

I would also ask you to put .js scripts in the build, as well (not only min.js), because they are more readable.

Thanks!

Add support for font-awesome

It would be cool, if we could configure our own icons. It already seems to work, if you use the form-group variant. But there's no way to configure the icon if you use the icon-less variant as in Example 6.

triggering change event

When an input is updated via datepicker, the change event is never fired and will not allow me to trigger actions based on the update. Can anyone suggest how I might accomplish this or where would be a good place to insert a $ele.change() to trigger it manually?

Modal Issue

I'm trying to use the date picker within a Modal. I get the following JavaScript error

TypeError: offset is undefined

And the calendar appears in the bottom left of the screen.

Unable to disable time

I'm unable to disable time using
pickTime: false

Automatic positioning of the calendar

Depending on the position of the input element, the calendar may be beyond the window. It will be great if the plugin automatically learns to position the block with calendar.

Date change should reset the date to today's date if no string is provided

This is a bit tricky, when you enter an invalid date and then erase that string, it should set it to the default date. Currently it will trigger an error.

moment("").isValid() == false

Thanks

minViewMode not working?

Hi there,

I can't get minViewMode 1 or 2 working, only 0 works. I'd like to just get years and months but once I get choose the month, nothing happens. Is it like I don't use the plugin correctly or this is not (yet) featured?

Strange start date and language doesn't work.

Hello!

I'm trying to use this datepicker in my mvc 4 project with Bottstrap 3. It looks great, but I have some troubles.

I added two pickers on my view. I added two Html.TextBoxFor for the dates and they have default values. But when I open date pickers, they start from 1800 year or so. Is it necessary to set startDate in JS for that?

I can't change the language, either. I did that like in the samples here http://eonasdan.github.io/bootstrap-datetimepicker/, but neither 'de', nor 'ru' don't work.

When I downloaded the sources, I had only one js and one css files. Is it enough? Or maybe I missed something...

Thanks!

Date Format & Date Set

I would like to use the date format 25 Mar 2001 (dd MMM yyyy).

How would you set the date on the calendar in javascript?

Uncaught ReferenceError: startDate is not defined

I guess, line 140 in bootstrap-datetimepicker.js should read as

if (!dDate.isValid()) dDate = moment(picker.options.startDate).subtract(1, "day");

Does it not?

(I omitted the trailing .formtat('L') because line 141 would otherwise fail with a TypeError.)

Getting Uncaught TypeError

I'm getting this error:

Uncaught TypeError: Cannot read property 'M' of undefined 
Uncaught TypeError: Object [object Object] has no method 'datetimepicker' 

with this code:

<input type='text' class="form-control" id='datetimepicker6'/>


<script>
$(function () {
    $('#datetimepicker6').datetimepicker();
});
</script>

I am using jQuery 1.8.3 and the latest Bootstrap JS and CSS with the latest datetimepicker CSS and JS.

The input is wrapped in a <td> if that is significant.

Thanks,

David

Partial moment support breaks defaultValue

Just ran into a bug caused by the partial Moment support. Setting a (default) value doesn't work anymore.

https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/src/js/bootstrap-datetimepicker.js#L216

On that line it asumes this._date is a Date object, while it actually is a Moment object. Causing the getUTCFullYear to fail.

Sadly I don't have enough mocha/coffeescript knowledge (and not enough time to learn) to write a test for it.

Edit: forgot to mention (although maybe obvious), this bug occurs when Moment IS available.

version 2 - format wont be recognized when parsing the DateStr

When I set the option format to for example "DD.MM.YYYY" the format wont be used when parsing the dateStr.
I solved the problem for me by setting passing the format to moment.

see Line 174 in bootstrap-datetimepicker.js
moment(dateStr, picker.format)

Without that the datepicker wont display Day, Month etc. it just says "NaN".
The Problem can be reproduced when you set a value into the html-input-field with a different format than the moment-format.

Option `closeAfterSelectDate`

It would be nice to close the calendar after selecting a date. What do you think about this?

Custom dateformat options.

In jquery ui datepicker I could customize the date format and time format like this:
'dateFormat' : "dd.mm.yy",
'timeFormat' : "HH:mm",

Is it possible to do such thing in this plugin? If it is then how?

Clearing input element causes error

Hi,

Version: 2.0.1

Steps to reproduce

• Open picker and choose a date
• Clear datefield
• Check console for error

If you select a date, then clear the input field afterwards, an error is thrown on line 519:

picker.setValue(picker.date.getTime());

The error:

Uncaught TypeError: Object [object Object] has no method 'getTime' 

Line 517 seems to be the culprit:

if (picker.date.isValid)

Unable to determinate the old value in change.dp-Event

Please add the old date-value to the change.dp-Event.

I want do build a time-range selection, when the start-date is changed and becomes bigger than the end-date, the end-date should be incremented by the difference between the old value and the new value of the start-date. So the range stays the same just the start and end date is moved.

I also think there are much more use cases for the old value.

Thanks and keep it up!

Cannot read property 'top' of undefined

In the current Bootstrap 3 (dev-master) I get an error on the offset.
Code:

        place: function () {
        var position = 'absolute';
        var offset = this.component ? this.component.offset() : this.$element.offset();
        this.width = this.component ? this.component.outerWidth() : this.$element.outerWidth();
        offset.top = offset.top + this.height;

        var $window = $(window);

Position of date picker

Is it possible to have the date selector open above the field? If there is no room below the field for the selector it will appear off screen. Granted the user can scroll the window down to see it but having above the field would be better.

Issue with multiple locale

Multiple locale on one scope will break due the globally changing the moment locale (the last locale stays). Specifically if you have a very sensitive page with multiple locales this becomes big issue.

Currently if you manually change the date and pressing tab to exit, since the change method does not change language this issue will show up.

Possibly adding this line will help:

change = function (e) {
             moment.lang(picker.options.language);

Alternative solution is instead of globally changing language on moment, only apply the locale on the instance that is being used.

Thanks

version 2 - current day not highlighted

When there is a date selected, the day is not highlighted in the calendar-selection.

Can be reproduced even in the examples in the documentation.

I fixed it for me with the following code in the fillDate-function:

if ((1900 + prevMonth._d.getYear()) == picker.viewDate._a[0]
    && prevMonth._d.getMonth() == picker.viewDate._a[1]
    && prevMonth._d.getDate() == picker.viewDate._a[2]) {
    clsName += ' active';
}

Iam pretty sure there is a better way to compare the iterating date and the selected date. But i wasnt able to get it working with better compare-methods.
For example

prevMonth.diff(picker.viewDate, 'days') == 0

wont work ... please check the values of the var _d in picker.viewDate while iterating in debug ... it seems a bit weird to me.

The old compare

prevMonth === picker.viewDate

will always result in false!

Implementing a custom format causes day/month to switch positions

Hi, I'm using the latest version of your datetimepicker, and I use the custom format of DD/MM/YYYY as opposed to the default MM/DD/YYYY. However, I find that when I edit the date/month manually in the textbox instead of the calendar picker, the date and month values switch. I think it might be a problem with the format parsing.

How to set date/time?

I want to set current date to say Nov 12 2013 and want set endDate: 22 days after Nov 12 2013. How to do that?

Initial date parsing ignores options.format

If datetimepicker is initialized on a field that already contains a date (I've only tested it with times, but I assume it's the same with dates), it doesn't get parsed according to the format set in the options but using the default moment.js format, resulting in an Invalid date error.

This seems to be caused by line 221, which looks like this:

if (dateStr) picker.date = moment(dateStr);//, picker.format);

If the rest of the function is uncommented, everything works as expected.

small judder when adjusting from date to time view

when you change from date to time view there is small but noticeable judder in chrome.

Setting Time Format explicitly yields doubled time display

Set pickDate to false, set data-format to "HH:mm PP"

The format still appends "hh:mm" after the other format to yield "03:45 PM 15:45"

I believe this is due to the format still appending the time even if the time is explicitly set by data-format

activate date picker only from icon?

I try to use the imput box as a general search box (wich can include date) with datetimepicker as helper for users for select date.

But if I complete some words at exit the input box is filled with current date. not Ok for me.

How can set datetimepicker to work only on icon click? similar with datepicker icononly mode?

Thanks.

time picker width problem

Hello,
I think the following style should be added to the bootstrap-datetimepicker.min.css

.bootstrap-datetimepicker-widget .btn { padding: 0; }

Without it time picker looks this way:

Adding above style fixes timepicker: