tempusdominus / bootstrap-4 Goto Github PK

If it is possible, please forgive me as I did not find how to do it.

It would be nice to have a way to set default initialization option so that we don't have to always repeat the same code.

Hi

Thanks for your awesome work :)

the control shows very bad in mobile and position of the popup is incorrect.

please support mobile too.

thanks

Just a little suggestion, it could be beneficial to change the repository name to contain the "datetime picker" mention to avoid confusion with bootstrap-4 directly from @twbs...

Datepicker inside dropdown menu

https://jsfiddle.net/Lmzbxych/

Hello,
Thanks for the work on tempusdominus BS4. I have html that uses the form group...
<div class="col-12"> <div class="form-group row"> <label for="starts-on-date" class="col-3">Starts on: </label> <input type="text" class="form-control col-9" id="starts-on-date" disabled> </div> </div>
I expected that when I change the date value, a native change event is implicitly raised but this is not the case.
I have tried to trigger this manually by using...
` $("#from-date").on("change.datetimepicker", function (e) {
console.log(e)
$('#to-date').datetimepicker('minDate', e.date);
let el = document.querySelector('#from-date > input');
let ev = new Event('change',{bubbles:true})
el.dispatchEvent(ev);

});`

This however leads to "Uncaught RangeError: Maximum call stack size exceeded." because the bubbling occurs indefinitely.
I would really appreciate any help/pointers on how I can resolve this.

JSFiddle: https://jsfiddle.net/yumitsu/axhktcnc/

As you can see, it happens when trying to use datepicker with custom format and with minDate set. I guess it's because you have some calls to this._setValue without passing value for index param:

this._setValue(parsedDate);

I saw you fixed this in source version. Can you update builded version too, please?

The .pull-right class was removed in Bootstrap 4 alpha 5. It it now called .float-right. See twbs/bootstrap#20684

Hi,

I'm not 100% how Bower package publishing works but the package "tempusdominus-bootstrap-4" can not be found by Bower.
It would be handy to have it configured so that the updates are available via package manager even though it is quite early in the development stage.
Cheers

Bootstrap 4 has switched from tether to popper. It would be great to avoid the extra dependency when using tempusdominus-bootstrap-4.

The show.datetimepicker event doesn't fire. Also, hide.datetimepicker is datetimepicker.hide.
https://jsfiddle.net/rdgt5qa8/2/

Beta 3 drops the .input-group-addon class replacing it with either .input-group-prepend or .input-group-append (see migration notes ). This breaks the datetimepicker's layout which requires modifying to something like;

<div class="input-group date" id="datetimepicker" data-target-input="nearest">
  <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker" />
  <div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
    <span class="input-group-text">
      <span class="fa fa-calendar"></span>
    </span>
  </div>
</div>

(I tried applying the .fa .fa-calendar classes to the input-group-text span but this caused to the height of the add-on to be smaller than associated text entry field.)

The removal of the input-group-addon class also affects the javascript. Line 1637 of the javascript should be changed from;

this.component = this._element.find('.input-group-addon');

to the following;

this.component = this._element.find('.input-group-append');

The above works in my case where all of the add-ons are to the right of the text-field but the following may be better for more general use in which the add-on could appear at either side of the text field;

this.component = this._element.find('.input-group-append, .input-group-prepend');

When opening the datetime picker, the timeView is never displayed even if we include it in the datetime picker initialization (default settings in fact).

I tried installing tempusdominus-bootstrap-4 via bower, and then copy build/js/tempusdominus-bootstrap-4.min.js to my project, but I got the error:

Hi, i'm using the new format of the datetimepicker. I have no problem with it, except for the layout for me is not working. it looks like a default .fa-calendar.

and this is the CDN:

		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />

am i missing something ? and btw thanks for this plugin! it's so helpful

I get this error when clicking on the calendar button. First click opens the widget with this error, second click closes the widget with this error, all clicks afterwards do nothing except giving the above error.

Hi,

When i try click on background datetimepicker not closed

https://jsfiddle.net/rdgt5qa8/5/

The existing link in your directions for Submitting Issues is very old (Bootstrap alpha 6, tether instead of popper, etc). It makes it confusing for new users that think they are reporting issues on the latest version.

Feel free to use my current one as a base which has current versions of all, in the correct loading order.
https://jsfiddle.net/elyptic/7j0L993e/

Looking at the jsfiddle (https://jsfiddle.net/Eonasdan/3cqL9t3x/) and the doc site (https://tempusdominus.github.io/bootstrap-4/Usage/) the date picker doesn't actually popup when clicking on the icon. It put the current date in the input box but doesn't show the picker.

https://tempusdominus.github.io/bootstrap-4/Usage/

By mistake I put inline on an input instead of using a div, and I got recursive calls until stack overflow.

I think the library should check for that and return a meaningful error.

#As example.
If you enter data into the text field, the event will be fired.
If you press buttons in the datetimepicker, events will not be fired.

https://jsfiddle.net/pbLxedap/2/

Hello,

I'm trying to link 2 pickers and part of my functionality is running some code when a datetimepicker is closed. I tried using the hide.datetimepicker event as described in the docs, but the event never fired.

I looked it up why and it seems that this line is what's causing it.

On the if in that line, window.debug is evaluating to true and the function is returning before calling the hide event. I can open a PR to fix this, if the fix is simply removing the window.debug statement, otherwise I don't know what the fix is.

I also made a fork of the base JSFiddle showing what's happening: JSFiddle.

Edit: After writing this issue I found #40, which says that the event is actually datetimepicker.hide, and not the opposite. I think this should be fixed as most other events are named event.datetimepicker, and not datetimepicker.event.

When entering an invalid date format, the picker does not set the input back to the valid date.

Callstack

tempusdominus-bootstrap-4.js:468 Uncaught TypeError: Cannot read property 'format' of undefined
at TempusDominusBootstrap4._setValue (tempusdominus-bootstrap-4.js:468)
at TempusDominusBootstrap4._change (tempusdominus-bootstrap-4.js:489)
at Function._jQueryHandleThis (tempusdominus-bootstrap-4.js:2666)
at r.fn.init._jQueryInterface [as datetimepicker] (tempusdominus-bootstrap-4.js:2673)
at HTMLInputElement. (tempusdominus-bootstrap-4.js:2701)
at HTMLDocument.dispatch (jquery.min.js:3)
at HTMLDocument.q.handle (jquery.min.js:3)

On line 468 index is undefined

this.input.val('' + (this.unset ? '' : this._dates[index].format(this.actualFormat)));

The calling function does not pass in an index

        DateTimePicker.prototype._change = function _change(e) {
            var val = $(e.target).val().trim(),
                parsedDate = val ? this._parseInputDate(val) : null;
            this._setValue(parsedDate);
            e.stopImmediatePropagation();
            return false;
        };

The _notifyEvent method has this check:
if (e.type === DateTimePicker.Event.CHANGE && e.date && e.date.isSame(e.oldDate) || !e.date && !e.oldDate) { return; }
Which should probably have some parentheses, otherwise it always fails (returns without firing event) for events which don't send the date and oldDate values. This includes the update event.
See this fiddle for example: https://jsfiddle.net/13veo43q/
It should have alerted "updated" when clicking the next/previous month buttons. It does not.

Also, the event names in the documentation are wrong for all but the change event.
Change event is "change.datetimepicker", but the others should have been "datetimepicker.", for instance: "datetimepicker.update".

I have a form with 2 datetimepickers, one start, one end.

When I set the values of those for the first time it works OK. When I try to set the values again. only the second one gets updated. When I try to set the values from the second time, the fields have the values from the first set.

The code I'm using to set the values is:

$('#start').data('datetimepicker').date(start);
$('#end').data('datetimepicker').date(end);

start and end are moments provided by fullcalendar. The values on the moments are OK.

I don't see any errors on the console, the issue is just the value for #start not being set on the second try.

I can only trigger the datetimepicker once, after toggling off, I cant trigger it any more. on looking at the console I saw the above error.
I am working within a bootsrap 4 beta 3 project and all dependencies are added, in the specified order

https://tempusdominus.github.io/bootstrap-4/Installing/
also couldn't find this library via search

If there is any data existing in the input field, the script fails. Also it alters the date field's time from '23:46:00' to '11:48 AM' which won't validate with my CMS (it needs 24h time)

• Firefox 57.0.2 reports too much recursion then TypeError: config is undefined
• Chrome reports Uncaught RangeError: Maximum call stack size exceeded then jQuery.Deferred exception: Invalid regular expression: /(^|\.)datetimepicker(\.|$)/: Stack overflow SyntaxError: Invalid regular expression: /(^|\.)datetimepicker(\.|$)/: Stack overflow
• MS Edge reports Out of stack space then Unable to get property '_options' of undefined or null reference
  JSFiddle here: https://jsfiddle.net/elyptic/ypc4dhv0/

You can test it here: http://htmlpreview.github.io/?https://github.com/tempusdominus/bootstrap-4/blob/master/docs/index.html

Thanks for making this available to Bootstrap 4 users. The documentation indicates that the component's model current date (a moment object or null if not set) is accessed as follows;

$("#datetimepicker1").datetimepicker('date')

I would expect that the following line, added to the bottom of the jsfiddle would therefore print the current date as a moment;

console.log($("#datetimepicker1").datetimepicker('date'));

This however results in the following error when I add the above line to the jfiddle;

 TypeError: date() parameter must be one of [null, string, moment or Date]

Hello,

In the readme file, I can see:

The goal is to separate the core functions into its own library with specific modules for Bootstrap 3, Bootstrap 4, and possibly other UI frameworks.

Is this means that this plugin is intended to use with both Bootstrap 3 & 4?
If yes, how can I specify that I want to use it with Bootstrap 3?

I can also find a Bootstrap 3 repository which is not updated since august 2017.

Links from https://cdnjs.com/libraries/tempusdominus-bootstrap-4/5.0.0-alpha.15 returns 404.

I tried to insert "readonly" to the input tag but the function not work. Please have a review

I would like to add seconds to the time. Is it possible ?

If the _place function could be replaced/updated to use popper directly instead of using bootstraps dropdown, we could likely have a unified picker project with popper as a direct dependency instead of bootstrap.

• Replace _place with popper
• Create stand alone css
• remove bootstrap has dependency

Hello,

I am maintaining a Ruby Gem for integration with Rails at https://rubygems.org/gems/bootstrap4-datetime-picker-rails/

Can this be added to docs?

Hi there, just a little comment to let you know that in the contribution guidelines it is specified that all pull requests made to the master branch will be rejected, but there is no other branch yet in this repository....

The calendar does not render correctly on IE11, the content overflows the backdrop on the right side.

In your distribution via NPM could you provide the scss files as well as the complied css?

I have 2 forms. One is Create and Edit. On the create form the input is blank and this plugin input works perfect but on the edit form when the date comes from the server i'm getting a bunch of errors.
I tried formatting the incoming datetime just the way this plugin is formatting but i'm still getting errors.
if I manually delete the value from the input then the plugin works.

Here is my input and the date loaded from the server.

<input class="form-control datetimepicker-input text-box single-line" data-target="#Entry_EntryDate" data-toggle="datetimepicker" data-val="true" data-val-date="The field Event Date must be a date." data-val-required="The Event Date field is required." id="Entry_EntryDate" name="Entry.EntryDate" type="datetime" value="10/25/2017 10:17 AM" />

$(function () { $('#Entry_EntryDate').datetimepicker(); });

I'm using Bootstrap 4 beta 1.
The errors i'm getting at load:
Invalid regular expression: /(^|.)datetimepicker(.|$)/: Stack overflow

if I click the input:
Maximum call stack size exceeded
at String.replace ()

Cannot read property '_options' of undefined

so look likes the plugin is having an issues parsing the value from input when it comes from the server ?
am I doing something wrong here?

Here is the fiddle https://jsfiddle.net/czcz/df4bpzu1/

using: Version 5.0.0-Alpha7

Hello, I was browsing your new site for Bootstrap 4 and noticed that all the picker were broken. I then realized that it was because my browser is not full screen. I see the white background container being responsive, while the rest is not, and because of that it breaks the UI. Please take a look at the print screen attached (you can test by resizing your browser, in full screen I don't see this behavior anymore).

Also, I'm guessing that you are aware of the latest release of Bootstrap 4 Beta 1, any plan to go with it soon? Thanks for the great library

Hello @Eonasdan ,

Thanks for create this amazing library,

I have an issue while implementing this lib, I only can show datetimepicker once, after that I can't. After I check on log, there is message like below.

Uncaught TypeError: Cannot read property 'top' of undefined
    at k._place (all.js:6607)
    at k.show (all.js:6737)
    at k.i.toggle (all.js:6434)
    at Function.k._jQueryHandleThis (all.js:6756)
    at r.fn.init.k._jQueryInterface [as datetimepicker] (all.js:6759)
    at HTMLSpanElement.<anonymous> (all.js:6764)
    at HTMLDocument.dispatch (jquery-3.2.1.min.js:3)
    at HTMLDocument.q.handle (jquery-3.2.1.min.js:3)

I am using the latest version of this lib, bootstrap 4 beta 3 version and jquery 3.2.1.

This is the code I use.

<div class="form-group">
    <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
        <input type="text" name="notification_send" class="col-3 form-control datetimepicker-input" data-target="#datetimepicker1"/>
        <span class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
        </span>
    </div>
</div>

<script>
$(function(){
    $("#datetimepicker1").datetimepicker();
});
</script>

Thanks,
Bayu

When I remove the value of the input field, I get an error for:
TypeError: Cannot read property 'isSame' of undefined
TypeError: Cannot read property 'clone' of undefined

It seems that it read the empty value as an error

https://tempusdominus.github.io/bootstrap-4/Installing/

All the way at the bottom, it just says to include core?
well, i downloaded core.js from this repo, and $().datetimepicker is not a function. :-\

Issue:
The close button displayed via the showClose option currently does nothing when clicked as the 'close' action in the _doAction function is unhandled.

https://jsfiddle.net/78d3jwcy/

Workaround:

(prototype => {
  prototype._oldDoAction = prototype._doAction;
  prototype._doAction = function (e, action) {
    let result = prototype._oldDoAction.apply(this, arguments);
    (action || $(e.currentTarget).data('action')) === 'close' && this.hide();
    return result;
  };
})(jQuery.fn.datetimepicker.Constructor.prototype);

Hello, I'm trying to set up a time-only picker with some disabled hours (a business hours time picker of sorts). I also want the minutes to have a 15 minutes step, and I want to set the useCurrent to day, so the default value, when the user opens the picker, will be something like 07:00 AM.

However, whenever I use the disabledHours option (or the enabled one), the datetimepicker is automatically set to the current date, with a minute granularity, instead of day, which I had set up. Basically, disabledHours is:

1. Overriding the useCurrent option
2. Setting a value to the datetimepicker without user interaction (also sets the display value)

I made a JSFiddle showing the problem.

In case you want to put the button on the other side of the text-field (i.e. use Bootstrap class "input-group-prepend" instead of "input-group-append"), it will break the script, because the script uses this._element.find(".input-group-append") to actually do stuff.

While I probably can work around that, a big red warning on the Usage site might help others.

I've noticed that the popup calendar box seems to be incorrectly placed when using smaller screens. This problem can be seen when viewing the samples at https://tempusdominus.github.io/bootstrap-4/Usage/ using Chrome's developer tools and the responsive viewer.
Everything looks good at a width of > 768px but going lower than this causes the popup to appear off screen to the right. I see the same effect on my Android Phone and Chrome, and Firefox.

Bootstrap 4 beta 1 has been released and they've renamed/ removed a load of variables!
These are the closest new mappings I can find. The color variables for btn elements are likely to change in future versions as they are planning to introduce shades like they have for grays.

$gray-lighter => $gray-200
$gray-light => $gray-600
$btn-primary-color => $white
$btn-primary-bg => $blue or theme-color('primary') (might be more accurate)