Is there a easy way to fix this? In my opinion the design does not look very good, and it also causes the picker to show up partly off screen because of size when using auto widgetPositioning....

Another issue: The arrow "buttons" are not very responsive on mobile (tested on iPhone 6, Safari and Chrome). Pressing multiple times quickly doesn't register. Have to wait about 1 second between each tap. Is this normal?

Hi,

Using locale: "pt-br" and format: "DD/MM/YYYY" after daylight saving 15/10/2017 have a bug (see image below). Day 16 and 16 selected together.

hi!
is there any quick fix for bootstrap 4 ?

https://codepen.io/seltix/pen/JNaVKx

thanks :D

I am working in MVC application and Bootstrap DateTime Picker (version : 4.17.37) is being used there.
In some systems, the datetime picker is not working properly in IE11. Time clock and select icon is invisible. I have attached two screenshots.
'Proper' screenshot is from the system where it works fine.
'Wrong' screenshot took from the system where the issue exists. I have cleared the cache from browser multiple times, but it did not work. Version of the browser is also cheked. Strangely the system where it is working and the system where it is not working has the same version of the browser.
It would be helpful if anyone could suggest me to get rid of this issue.

Thanks
Kushal

The datepicker does not display on an input with readonly status when ignoreReadonly is set to "true"

See fiddle

Hello All,

I'm using bootstrap datetimepicker with my ASP.net MVC5 application.
I'm trying to fetch the dates from DB, create an Array of disabled dates and then pass that array in jquery:-

C#
public String[] disabledDates { get; set; } // This model property gets set from database.

e.g. disabledDates = ["2017-08-29","2017-11-22"];

<script type="text/javascript"> $(function () { var disabledDatesAr = '@Model.disabledDates'; $('#scheduleDate').datetimepicker({ useCurrent: false, minDate: new Date(), format: 'DD-MM-YYYY hh:mm A', showTodayButton: true, sideBySide: true, showClose: true, showClear: true, toolbarPlacement: 'top', disabledDates: disabledDatesAr }); }); </script>

But the above code doesn't work and DateTimePicker popup getting disabled.
Can anyone please guide me on how to assign this array value to disabled dates?

http://www.cooldiverslatchi.com/details-book-now.php?type=NightDiver

here I use old code - I think is from your old repo... the problem is[date/time] in time part ... the "AM/PM" SWITCH APPEAR OUT OF Window - have a look... in page....well?

In any case may because Bootstrap code is somehow different ... is 3.2.0 as template purchased shows but you may classes like ... cell-sm-6 rather col-sm-6 the standard....

As Bootstrap 4 is in alpha stage (just as Tempus Dominus), would it make sense to go down that route?
Is there a Bootstrap4-compatible version of this date picker?
Cheers

Hi,

I'm using the format YYYY-MM and the first time I click the icon and the calendar shows it's working fine I select the month and the calendar disappear and I see 2017-10 Now if I click again the icon I'm in days of this month. Is there something I have to do to make sure it always open in YYYY-MM and never go to days ?

Sorry I don't know if this is an issue but since I don't know where to ask the question. I write it here. Let me know if I'm at the right place!

I'm getting a ton of "Cannot read property 'position' of undefined" errors when the screen is resized.

My code in use (in case it's helpful):

$('#start_date').datetimepicker({
    inline: true,
    sideBySide: true,
    useCurrent: true
}).on('change.datetimepicker', function(event){
    globalDateVariable = event.date.format("YYYY-MM-DD HH:mm:00");
});

I can have three kind of colors defined by moment arrays of dates. How can i isue this??.

Is there a new TypeScript definition file for v5?

I am working in a multilingual application and Bootstrap DateTime Picker (version : 4.17.37) is being used there. When I am using culturecode : (zh-HK), it is throwing an error called "locale is not loaded from moment locales" and the datetime picker is not working.
It would be helpful if anyone could suggest me any workaround.
Note: When I used culturecode : (zh-CN), it worked properly but I need to implement in (zh-HK).

Thanks
Kushal

I have try to create date time picker with this plugin but not working in content popover. Anyone can solve this issue ?

How to load other locale file into moment.js
I am using angular2-cli for development.

Can this datepicker support year in Buddhism year ?

Hi guys,

I'm big fan for your works. I even integrate this beautiful picker in my production code right now.
According to the Documentation about tooltips. I build a translation mechanisum for all the tooltips here listed. But It forget the very importent one: selectTime

So I just drop by here to leave this small issue for the Docs. My full option object is here: (trans() is a translation function)

const mObj = {
      format: "YYYY-MM-DDTHH:mm:ss",
      showTodayButton: true,
      showClose:  true,
      useCurrent: true,
      tooltips: {
          today:           trans("I_GT"),
          clear:           trans("I_CS"),
          close:           trans("I_CP"),
          selectMonth:     trans("I_SM"),
          prevMonth:       trans("I_PM"),
          nextMonth:       trans("I_NM"),
          selectYear:      trans("I_SY"),
          prevYear:        trans("I_PY"),
          nextYear:        trans("I_NY"),
          selectDecade:    trans("I_SD"),
          prevDecade:      trans("I_PD"),
          nextDecade:      trans("I_ND"),
          prevCentury:     trans("I_PC"),
          nextCentury:     trans("I_NC"),
          incrementHour:   trans("I_IH"),
          pickHour:        trans("I_PH"),
          decrementHour:   trans("I_DH"),
          incrementMinute: trans("I_IM"),
          pickMinute:      trans("I_PN"),
          decrementMinute: trans("I_DM"),
          incrementSecond: trans("I_IS"),
          pickSecond:      trans("I_PS"),
          decrementSecond: trans("I_DC"),
          selectTime:      trans("I_SA"),
      }
}

When loading the popup in a mobile browser (iOS - Chrome & Safari, Android - Chrome), the pop-up displays partially off-screen (mostly offscreen). It appears the positioning logic does not work on mobile screens, especially in portrait mode.

Hi guys! Great work!

I was wondering if there was any script that would launch first the Time display (2nd screenshot) rather than the Date (1st screenshot). In other words, this is what happens today when clicking in the "No Icon (input field only):" (https://eonasdan.github.io/bootstrap-datetimepicker/#no-icon-input-field-only):

and I was looking Time to be the default when clicking (display first):

Thank you in advance!
Sebastian

is there any way we can set the default date to 14 days before?

$('#driverEldPrintstartdatetimepicker1').datetimepicker(
{
format: 'MM-DD-YYYY',
minDate: moment(d).startOf('day'),
maxDate: new Date(),
useCurrent: false,

});
tried the below code in the Java script ,still it is not doing the purpose .
$("#driverEldstartdatetimepicker1").setDate = moment().subtract(7, 'days').format("MM-DD-YYYY");

Using the default auto positioning does not seem to work correctly when it tries to place the popup calendar above the input field. It does work when placing below the input field. Not sure if it's something I'm doing wrong?

<div class="col-sm-9">

    <div class="input-group date" id="datetimepicker-datetime" data-target-input="nearest">
        <input class="form-control datetimepicker-input" autocomplete="noway" name="datetime" type="datetime">
        <span class="input-group-addon" data-target="#datetimepicker-datetime" data-toggle="datetimepicker">
            <i class="fa fa-btn fa-calendar"></i>
        </span>
    </div>

    <script>
        window['genealabsLaravelCasts'] = window.genealabsLaravelCasts || {};
        window.genealabsLaravelCasts['dateTimeLoaders'] = window.genealabsLaravelCasts.dateTimeLoaders || [];
        window.genealabsLaravelCasts.dateTimeLoaders.push(function () {
            $("#datetimepicker-datetime").datetimepicker({
                format: 'lll',
                sideBySide: true,
                icons: {
                    time: "fa fa-btn fa-clock-o",
                    date: "fa fa-btn fa-calendar",
                    up: "fa fa-btn fa-arrow-up",
                    down: "fa fa-btn fa-arrow-down"
                },
                locale: "en"
            });
        });
    </script>
</div>

Hello friends,

I'm having a problem with datepicker after the Brazilian "Summer Time" that started on 10/14/2017 here in Brazil.

Dates are being duplicated.

Can someone help me?
Thanks !

When I print event on "change.datetimepicker" event firing I got the same date and oldDate and both are equal to old one.
I init date picker with format: "YYYY-MM-DD" and useCurrent: false

Hi there!

Don't think I'm doing anything wrong, but I'm getting crazy decades:

Is this a bug?

The only non-standard thing I'm doing is that I'm using a specific date format - format: 'DD-MMM-YYYY'

Im sorry for not checking, as I am using a previous version of this script, but Im busy coding :)

In the version that I am using, I am setting the useCurrent option AND the disabledDate function.

I noticed that when the currentDate is in the disabledDate array, no date is selected.

I recommend adding a function that will choose the next available date if the current date is disabled.

Thanks.

Description

We are changing to this date plugin because the one we were using before does not handle times. The interface that has been built has multiple different search types, chosen via a select box. When the user selects the date search from the dropdown, the plugin is initialized and the datetimepicker interface is displayed and works as expected. However if the user clicked on date by accident, and subsequently selects something else, the plugin interface still comes up whenever the input box is clicked, which is causing issues because the other two search types expect text input that for things like names.

What I expect

1. When the page loads, the date search is not selected by default, so the datetime plugin is not initialized
2. When I select 'Published Date' from the dropdown, the datetime plugin is initialized and allows me to choose a date if I want.
3. If I switch back to a different search type, the plugin is destroyed on the page so that non-date related input can be entered.

What I'm seeing

1. When the page loads, the date search is not selected by default, so the datetime plugin is not initialized
2. When I select 'Published Date' from the dropdown, the datetime plugin is initialized and allows me to choose a date if I want.
3. If I switch back to a different search type, the plugin still exists and still displays when I click on the input field.

Code

https://jsfiddle.net/852d93yo/2/

Hi, I'm trying to integrate your datetimepicker plugin into WordPress ContactForm7 plugin. Unfortunately this plugin didn't support data-attributes. I have only classes and id's or any html around inputs. Docs for your plugin says that for minimum setup (No Icon) I can use this code:

<div class="col-sm-6">
    <input type="text" class="form-control" id="datetimepicker5" />
</div>

But the real code looks like this:

<div class="col-sm-6">
    <input type="text" class="form-control" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5"/>
</div>

And it didn't work without this data-attributes.

Please help. Thank you!

PS I get alpha version because I didn't use Bootstrap.

Can this widget be used to select multiple dates?

Hello All,

I've created an ASP.net MVC application using bootstrap datetimepicker, moment.js and moment-with-locale.js. I want to make the datetimepicker display according to the local browser language. Example, if the browser language is "fr-Fr", then set "locale:'fr-Fr'" in datetimpicker. And if the corresponding browser language is not available, set it to default value "en".
As per the moment documentation, it says that browser language "en-US" is considered as "en" by default.

My scenario is to edit the datetime using datetimepicker. For any other language like Spanish("es") or French ("fr-FR), this code works with my bootstrap datetimePicker displaying DateTime value according to "locale", but if the browser culture is "en-US", it won't pick the value of DateTime and display blank box with predefined setting to current machine date and time.
I've created following fiddle to describe my issue:

http://jsfiddle.net/ashu_mdu/m45d5aqL/
Can anyone please guide me on how to resolve it? Thanks in advance.

As seen in images below, minute 30 was selected. It updated the minute in input element but not the minute in time view of the calendar. It is working correctly for hour and seconds.

On inspecting the code, found this:

Sending index, as in "selectSecond", worked.

I was trying to bind value to my model by knockout.js and i realized that model was not updating itself after date is changed then i realized that change and input events aren't triggering even.

Please take a look at example. https://jsfiddle.net/0Ltv25o8/5649/
Try pick a date and you will not get alert on change and input events.

I have also tested it on version 5 and it has still same issue.

Can you please tell me at least how can i fix this issue temporarily ?

please add range picker mode with 2 months on the same popup similar to http://www.daterangepicker.com/#examples

The styling of the date picker to show differences between dates which are available or disabled is fairly subtle. What classes should be selected to make this distinction more visible?

no errors in the console .

I found a closed issued on the old github page for doing this using the ViewMode but there isn't a viewmode for time, or am I not finding it? The old issue was here. Is there a solution or a workaround for this?

the picker seems to be unable to be collapsed on initial render in any configuration and docs do not cover this case, but in the examples this seems to be default. How can this picker be hidden until the input is focused?

can using sidebyside options not have a closed input on initial render?

I have embedded the widget in a site and noticed that the date picker does not respond to clicks on the calendar to either select a date or advance the month selector. There is clearly something about the site that is either intercepting the click events or preventing them from happening.

In order to help troubleshoot, can you please help identify the section of the code that listens for clicks on the calendar. What are the bindings used (e.g which CSS selectors)? What event triggers are used?

Not sure if this is a bug or just a documentation issue, but should the dropdown widget not position relative to the text input box like it did in eonasdan?

Starting from the base fiddle, you can see that clicking on the button opens the widget off the screen to the right (horizontal scrollbar).

https://jsfiddle.net/Eonasdan/agbkdzhv/

What's worse is setting the widgetPosition to the right will leave the widget even further away with a space between it and the control. If I move the id="datetimepicker1" to the text input, it positions like I'd expect.

https://jsfiddle.net/jver8xjo/

It seems the positioning worked fine with the usual example prior to this fix that adds 'px' to the left value since before, the value was being ignored in those cases.

fd5855f

If I configure sideBySide: true in the popup (not using inline display), the popup won't close automatically.

Is it possible to use class instead of id to enable date time picker. In order to enable all classes use date time picker easily?

Stackoverflow Question: https://stackoverflow.com/questions/45603567/use-class-for-eonasdan-datetimepicker
JSFIDDLE: https://jsfiddle.net/aice09/cdaw62jz/

This is my setup:

$('.datetimepicker').datetimepicker({
        format: 'dddd MMM DD YYYY',
        minDate: new Date(),
});

Basically I want to prevent them from picking a date that is in the past (to edit/create orders).
That is fine, but the problem is that when they EDIT an order that has a due date older than Today, the date field is blanked.

In my case orders with a due date in the past are marked red (overdue), and they still need to be edited PRESERVING the due date.

I understand that if i want to change the date i should only be able to pick a date >= today, but if i don't want to change the date, the textbox should still be set to the original date.

Hi when I'm picking a date DTP switch to time view but instead of a square table format all hour are displayed on an horizontal line and each hour are sticked side by side. Formating of time view is not working. What can I do or what's wrong

Description

The CDN location listed in your documentation doesn't actually specify a legitimate location.

https://github.com/tempusdominus/bootstrap-3/blob/master/docs/Installing/index.html#L180

See here: http://jsfiddle.net/pg0ks8dt/

$('#datetimepicker1').datetimepicker({
                            timeZone: 'UTC',
                        });

same for:

$('#datetimepicker').datetimepicker('timeZone');

Is this intentional/the docs need updating or its just not been added yet?

We install the datetimepicker 3 from bower in VS 2017 UI in an ASP.NET Core 2.0

Once installed and we do $('#AccountDate').datetimepicker(); in the $(document).ready(function(){}) we get an error saying

Unhandled exception at line 2, column 5 in http://localhost:49265/js/site.js?v=745j3j1W3lx00vcJYCFxrqyisiMdQHkF_RWXVIdbi0Y
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datetimepicker'

Is there anything else we have to do for installing the plugin correctly using Bower in VS 2017 for an ASP.NET CORE 2.0 project ?

ERROR: minDate() date parameter is after options.maxDate: 2017-09-21T12:24:17+05:30
I am getting this error at the scenario where I am trying to give minDate as first date component's date.

at initial, the values are null for both the date component then it throws me this error as at that time, null become today's date and current time while the computation in the library.
due to which minDate becomes greater than the maxDate which is already computed.

So, in this case, I don't want it to be checked on the basis of time to get rid of this error in the current case.

Like: http://bootstrap-datepicker.readthedocs.io/en/stable/options.html#format

When having different formats to display and to submit.

hi,
the auto position is not working correctly :

thanks ^^

this is the suggested value
disabledHours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23, 24]
enabledHours: [9, 10, 11, 12, 13, 14, 15, 16]

if I were to add a lunch break for all days I tried tweaking it like this:
disabledHours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 13, 18, 19, 20, 21, 22, 23, 24]
enabledHours: [9, 10, 11, 12, 14, 15, 16]

notice that I moved the value 13 in enabledHours to disabledHours
but the time picker will stuck at hour value 9 to 12 am in the up icon button instead
of allowing skipping disable value.

I would say this is a bug.

Hi, I am trying to get the plugin installed using webpack, and it seems to work. I have

global.moment = require('moment');
require('tempusdominus-bootstrap-3');

And everything runs without any JS errors, but I'm not seeing the plugin registered in jQuery. Any suggestions? :)

version : 4.17.47

So need some setting - lose focus or not.
And ability to perform standart enter action.

For now even if remove blur() from hide() function -> enter not work for input and form not submit