Questions tagged [tempus-dominus-datetimepicker]

Tempus Dominus is the new version of Eonasdan datetimepicker. It supports Bootstrap 3 and Bootstrap 4 and it has is completely rewritten in ES6. For just a datepicker, see [tag:bootstrap-datepicker]; use [tag:eonasdan-datetimepicker] for the previous version (only Bootstrap 3).

Tempus Dominus is the new version of Eonasdan datetimepicker.

It supports Bootstrap 3, Bootstrap 4 and possibly other UI frameworks. This new version has been completely rewritten in ES6 and uses Babel to transpile the code down.

For more info see https://github.com/Eonasdan/tempus-dominus

Basic sample

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
        <span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
  </div>
</div>
$(function () {
  $('#datetimepicker1').datetimepicker();
});
116 questions
1
vote
1 answer

Tempusdominus Datetimepicker deformed or not showing as compared to Bootstrap examples

I would like my datetimepicker to be shown as the 5th datetimepicker in https://tempusdominus.github.io/bootstrap-4/Usage/#no-icon-input-field-only (No Icon (input field only)). However, when using the CDNJS only, the output is a deformed version…
1
vote
1 answer

How to highlight and enable only specific weekdays in Tempus Dominus Bootstrap-4 datetime picker?

I am using Tempus Dominus Bootstrap-4 datetime picker I am initializing it like this:- $("div[id*='BookingDate']").datetimepicker({ inline: true, sideBySide: true, format: 'L', allowMultidate: true, viewDate:…
Saswat
  • 12,320
  • 16
  • 77
  • 156
1
vote
1 answer

use tempus dominus datetimepicker with CLASS instead of ID and for multiple instances

tempus dominus datetimepicker is working with ID like input#datetimepicker4.form-control.datetimepicker-input data-target="#datetimepicker4" data-toggle="datetimepicker" type="text" $('#datetimepicker4').datetimepicker({ format: 'L' }); and…
1
vote
2 answers

Tempus-dominus and sweetalert2

I've created a modal with sweetalert2 and the input field is a datepicker widget from tempusdominus but the calendar shows behind the buttons of the modal as the following image: My code is the following: Swal.fire({ title: 'Pay', html:…
1
vote
1 answer

Datetimepicker time and date conversion

I've been trying for hours to change the format of my datetimepicker (Tempus DOminus for bootstrap 4) but the format won't change so now I'm trying to find a better way to convert it on the backend when it inserts to my database. The issue is, the…
Whisou138
  • 451
  • 5
  • 21
1
vote
0 answers

TempusDominus Bootstrap4 mix multiple configuration of multiple instances

If I use 2 different instances of TempusDominus Bootstrap4 with different configurations, the result is a mixed UNEXPECTED new configuration for both instances This is an examples code:
1
vote
1 answer

Tempus Dominus without an input field

This sample code is not working:
1
vote
0 answers

Show hour and after minutes, without showing the window with icons in Tempus Dominus Js

I am using Rails and bootstrap4-datetime-picker-rails , and it use Tempus Dominus JS . I want on hours select, show only hour and after show minutes, without showing the hour and minutes together. I read the documentation but don't understand if it…
1
vote
1 answer

Issue Comparing Moments in JavaScript

I've got the following code that checks to see whether the start date is >= to the end date. Almost every time I compare the two dates when they are identical, the difference between the dates is something less than 0. Here is my code: var end =…
Cannon Moyer
  • 3,014
  • 3
  • 31
  • 75
1
vote
2 answers

Is there a way to retrieve the updated datetime when text input changes?

I have a datetimepicker and a button. The user selects a date time, then hit the button. The selected date time is shown in an alert. https://jsfiddle.net/jeffxiao/rfzm8pyt/ $(function() { $('#datetimepicker1').datetimepicker(); …
XoXo
  • 1,560
  • 1
  • 16
  • 35
1
vote
1 answer

Tempus Dominus minDate counld not parse

First time using Tempus Dominus Datetimepicker for Bootstrap 4. In my code I have: var dateFormat = 'DD-MM-YYYY'; var CurrDate = '27-06-2018'; var MinDate = '27-06-1918'; var MaxDate = '27-06-2018'; I then convert the dates to moment…
TheRealPapa
  • 4,393
  • 8
  • 71
  • 155
1
vote
1 answer

Eonasdan DateTimePicker for Bootstrap v4 (Tempus Dominus) Not Working

I am including and calling it in my Javascript file like this: import 'moment'; import 'tempusdominus-bootstrap-4'; export default class AddHolidayPane { static Initialise() { $('#start-date').datetimepicker(); …
1
vote
1 answer

TimeZone in Tempus Dominus

I'm trying to use the TimeZone option in Bootstrap 4's Tempus Dominus (calendar) functionality. That option uses moment-timezone, of which I have already added the CDN. My objective is to make the timezone EST (GMT-5), where right now it's guessing…
1
vote
1 answer

TypeError: $(...).datetimepicker is not a function

I know this question was asked many times before (because I looked here for solution), so excuse me for adding more trash. I'm using this datetime picker and in the console I get error: TypeError: $(...).datetimepicker is not a function Whole HTML…
0
votes
0 answers

Hide a specific calendar header tempus dominus

I'm currently tasked with making a month selector using tempus dominus, however as you may know tempus dominus displays a header with the current year and two arrows to switch between the years, even when the options are set to viewMode: 'months'…