Questions tagged [eonasdan-datetimepicker]

A Bootstrap-based is a date/time picker widget by Eonasdan that uses Twitter's bootstrap library. For just a datepicker, see the [bootstrap-datepicker] 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. For more see https://github.com/Eonasdan/bootstrap-datetimepicker

Stack Snippet Starter Pack:

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/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.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/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();
});
305 questions
28
votes
3 answers

How to disable past dates from today in bootstrap datetimepicker?

Unable to disable the past dates in bootstrap datetimepicker HTML
Datetimepicker
16
votes
9 answers

Bootstrap 3 Datetimepicker 3.0.0 - make a week start on Monday

There are few reasons I use Bootstrap 3 Datetimepicker 3.0.0 in my MVC 5 project. Any idea how to offset week start so it starts from Monday? Language tag also not working. $(function () { $('#PickupTime').datetimepicker({ weekStart: 1 …
11
votes
6 answers

Boostrap DateTimePicker show time only

I need help with bootstrap datepicker
iDeal
  • 201
  • 2
  • 4
  • 7
10
votes
1 answer

datetimepicker erasing value from input if value exists at page load

I'm using this datetime picker for Bootstrap 4 https://tempusdominus.github.io/bootstrap-4/ The plugin works just fine if the input is blank at load. However, I have an Edit form that has already a value but the datepicker is removing the value at…
9
votes
3 answers

How can I get date object from a bootstrap-datetime-picker plugin?

I am trying to utilize tempusdominus-datetimepicker-3 to create a date-time picker in my html-forms. However, I need to be able to get the selected date from it. The plugin has an option called date which according to the document should return a…
9
votes
2 answers

Bootstrap Glyphicons datetimepicker change icons

I am using Bootstrap datetimepicker https://eonasdan.github.io/bootstrap-datetimepicker/ As mentioned in the document I was successfully able to change the up, down arrows using below code. $('#datetimepicker7').datetimepicker({ sideBySide:…
8
votes
2 answers

Error with plugin datetimepicker in JQuery with ajax

I try to do this, disable all dates and enable the dates that i pass with parameters This code not work $.ajax({ method: "GET", url: "url", }) .success(function(msg) { console.log(JSON.parse(msg)); var disableIni = JSON.parse(msg); …
8
votes
2 answers

Bootstrap Datepicker Locale with MomentJS

I am using a Bootstrap Datepicker available here and everything is working fine. However, I want to localize the calendar given a user's preferred language. I've set the following when I initialize the datepicker: locale: 'fr' However, I get a…
Jason
  • 1,105
  • 3
  • 16
  • 30
7
votes
4 answers

Bootstrap DatePicker - Onchange

I am using the Bootstrap 3 Datepicker plugin. When the user chooses a date, I want to update various parts of my UI. I'm basically trying to create a function that is called when the date changes. However, I've been unsuccessful in my attempts.…
user687554
  • 10,663
  • 25
  • 77
  • 138
6
votes
1 answer

Unable to select days and hours when minDate and maxDate are on the same days with Eonasdan datetimepicker

I got an odd behaviour when using bootstrap-datetimepicker v. 4.17.47. Here is my picker configuration: format: 'YYYY-MM-DD HH:mm', showTodayButton: true, useCurrent: false, showClear: true, minDate: moment('{{ ts_beg }}'), maxDate: moment('{{…
Dr Mouse
  • 331
  • 1
  • 5
  • 19
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
3 answers

Bootstrap datepicker hidden by the container div

I have a birthday input text where I use Bootstrap datepicker v4. The form is inside
container. As shown in the pic, the datepicker calendar is hidden by the border of the "media" div, I can't solve this with z-index, it didnt…
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
1 answer

Bootstrap datetimepicker "dp.change"

If I use this, the change function will only fire once at opening. Selecting a different date will not trigger the change function anymore. There are 2 datetimepickers in the form. The first is to set a date and the second has to autofill the same…
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.
1
2 3
20 21