Questions tagged [bootstrap-datetimepicker]

bootstrap-datetimepicker is a datepicker widget by tarruda that uses Twitter's bootstrap library. For a regular datepicker, see the [bootstrap-datepicker] tag. For the Eonasdan datetimepicker please use the [eonasdan-datetimepicker] tag.

bootstrap-datetimepicker is a datepicker widget that uses Twitter's bootstrap library. It provides a calendar popup for selecting dates and times when users click on input elements.

Tarruda's no longer being maintained:

The new repo is:

And here is a web site with manuals and demos:

Stack Snippet Starter Pack:

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<div class='input-group date' id='datetimepicker1'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>
$(function () {
  $('#datetimepicker1').datetimepicker();
});
754 questions
8
votes
2 answers

Bootstrap Datetime picker z-index

I am using bootstrap date time picker. Its working fine with the date and time selection. But the problem is the visibility. If I put it outside any sort of container the modal is visible. But If I try to put it as a td inside a table, then the…
Tattu
  • 327
  • 1
  • 3
  • 15
7
votes
2 answers

Error:- @ng-bootstrap\ng-bootstrap\datepicker\datepicker-navigation.d.ts.NgbDatepickerNavigation.html

I am getting error as I have updated to angular7? Package.json "dependencies": { "@angular/animations": "^7.0.3", "@angular/common": "^7.0.3", "@angular/compiler": "^7.0.3", "@angular/core": "^7.0.3", …
Mahi
  • 3,748
  • 4
  • 35
  • 70
7
votes
2 answers

Bootstrap 3 datetimepicker widget position

I am using bootstrap 3 diatomite picker widget, but I am unable to control its position. Right now the widget appears at the bottom of my page when I don't use horizontal and vertical options, but when I use horizontal and vertical options I get an…
Jigar Naik
  • 1,946
  • 5
  • 29
  • 60
7
votes
2 answers

bootstrap datetime picker, show dialogue when clicking on image

I am using bootstrap date time picker for an input. i have the following html div defined
6
votes
2 answers

Bootstrap datetimepicker: show calendar pop-up when a user clicks on input

Is there a way to show calendar when a user clicks on input as well? Right now I have to click on the calendar icon which will then show calendar. HTML:
6
votes
2 answers

Bootstrap Datetime Picker not working with Bootstrap 4 Alpha 6

We are using Eonasdan Datetime picker. We are migrated to Boostrap 4 Alpha 6 since it comes with lot of improvements over Alpha5 but Datetime picker broken. Now it's not showing the numbers when we click on calendar icon in datetime picker.But it's…
nivas
  • 3,138
  • 3
  • 16
  • 15
6
votes
3 answers

Bootstrap Datetimepicker change event is not firing

Bootstrap Datetimepicker change event is not firing without errors. Any…
NoWar
  • 36,338
  • 80
  • 323
  • 498
6
votes
1 answer

bootstrap datepicker how to disable the current date by default

i am using bootstrap datetime picker, when we click on calendar icon, the current dete is fetching on my relevant input. Is that any way to avoid that? because i don't want to current date by default fetching on input, it should be user selected…
Krish
  • 489
  • 2
  • 8
  • 28
6
votes
2 answers

How to restrict the bootstrap timepicker min-time and max-time?

I am using bootstrap time picker by using bootstrap-timepicker.js and i want to restrict the min-time and max-time of that timepicker .Can anyone please tell me how can i achieve it. I have used following methods but nothing gonna help me out: …
Floki
  • 271
  • 1
  • 5
  • 15
5
votes
0 answers

Unable to use DateTime input through django CreateView and ModelForm

I tried to create an object of Model Event through UI using CreateView My Model is class Event(models.Model): start = models.DateTimeField(_("start"), db_index=True) end = models.DateTimeField(_("end"), db_index=True, help_text=_("The end…
5
votes
2 answers

Using Bootstrap DatetimePicker with Sweet Alert 2 - Display calendar over alert

I am using the SweetAlert2 dialog with a form inside. I want to use the Bootstrap DateTimePicker widget. The calendar widget popup is displayed within the SweetAlert window instead of over top of it. This makes the alert expand and contract - and…
5
votes
2 answers

How to add seconds to Bootstrap date time picker

I am using the Bootstrap datatimepicker (https://eonasdan.github.io/bootstrap-datetimepicker/). It's great but it does not show or let the user select seconds. $(document).ready(function () { $('#datetimepicker1').datetimepicker({defaultDate:…
5
votes
6 answers

Bootstrap Datetimepicker - Disable decades view mode

When the user clicks on the view header multiple times the expected behaviour is: days -> months -> years -> decades. I need to disable the decades view (screenshot attached). Doing so the user cannot go further 'year' view mode.
5
votes
1 answer

Change language to Bootstrap Datetimepicker

I'm using the datetimepicker of Bootstrap, it's working pretty well. The thing is that it's in english, and I need it in spanish, I had read some post but nothing works to me. my HTML is defined as:
Sredny M Casanova
  • 4,735
  • 21
  • 70
  • 115
5
votes
1 answer

bootstrap 3 datetimepicker jquery

i'm using Datetimepicker from https://eonasdan.github.io/bootstrap-datetimepicker/ for my project. what i want to achieve is that the end should not be able to pick time earlier than the start. $('#timePickerStart').datetimepicker({ format :…
pat3ck029
  • 263
  • 1
  • 7
  • 19
1
2
3
50 51