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
3
votes
2 answers

Add custom text to the output text field in bootstrap datetimepicker

I'm using bootstrap 3 date/time picker here: https://eonasdan.github.io/bootstrap-datetimepicker/ Is it possible to customise the output text in the date/time text field? I wish to add a string at the start, such as 'Departure:'. My current set up…
3
votes
1 answer

How to close bootstrap datetimepicker when date is selected

I am using bootstrap datetimepicker (http://eonasdan.github.io/bootstrap-datetimepicker/Installing/). When I select the date the picker does not hides and I have to click outside to close it. How to close datetimepicker when date is…
3
votes
1 answer

Bootstrap datetimepicker only month and year not working as intended

My Datetime picker works on the fist click, but if I click again in the input field again it shows the picker with the day field. How can I do this? Any help will be appreciated. This is the image in first click (expected behavior) This is the…
3
votes
1 answer

How to autoclose datetimepicker of Bootstrap using dp.change event?

How to autoclose a datetimepicker on date select only. I am using the dp.change event but it closes the datetimepicker even on changing the time. $('.datetimepicker').each(function () { $(this).on('dp.change', function (ev) { …
3
votes
3 answers

bootstrap datetimepicker - set maxDate relative to now?

I use this datetimepicker: http://eonasdan.github.io/bootstrap-datetimepicker/Options/ Basically I want to set maxDate: moment(), i.e maxDate should be limited to now. The problem is by the time the datepicker is opened maxDate is not now() anymore.…
3
votes
1 answer

Using keepInvalid freezes the ability to use the time picker

I am trying to include a time field that has a min and max allowed range, but that is prepopulated with a value from the database that might be incorrect (out of range). When it's incorrect, I show an error message to the user, so they can change…
3
votes
1 answer

Override Styles for disable dates in eonasdan-datetimepicker

I would like to override the default styles for the "eonasdan-datetimepicker" (https://github.com/Eonasdan/bootstrap-datetimepicker) displaying a basic hover message. By default disabled dates are using this CSS…
3
votes
3 answers

How to set bootstrap-datetimepicker default displayed date to 'null'

I'm working with http://eonasdan.github.io/bootstrap-datetimepicker/. If you open https://jsfiddle.net/Eonasdan/0Ltv25o8/ you see that the initial date is empty and only fills on clicking on the widget (also see screenshot ). This is the behaviour…
user1592380
  • 34,265
  • 92
  • 284
  • 515
3
votes
2 answers

How to add close text to datetimepicker bootstrap?

$(function() { $('input.month-mode').datetimepicker({ viewMode: 'months', format: 'MM/YYYY', showClose: true, maxDate: current_month, }); }); I want to add close text to it. by default it shows 'X', but I…
Rakesh babu
  • 325
  • 6
  • 11
3
votes
1 answer

Is it possible to use HTML5 Data Attributes to initialize the Bootstrap 3 Datepicker?

At the the moment, we're using the datetimepicker in a semi-modular way because the initialization is done in javascript. Formerly we were using a different datepicker component which lacked the time picking function but could be initialized via…
3
votes
3 answers

Bootstrap datetime picker disable past time

I am using Bootsrap 3 (eonasdan-datetimepicker) Datetime Picker. I am wondering how can i prevent user to select past time. I find the documentation doesn't say much about how to disable past time.
3
votes
1 answer

Bootstrap datetime picker disable hours

I am using Bootsrap 3 Datetime Picker. I find the documentation doesn't say much about how to disable/enable hours, all it says is this: disabledHours Default: false Does someone now how to declare a disabled hour? which format?. I need to disable…
3
votes
3 answers

Bootstrap datetimepicker issue instide a table-responsive class

I am using this (https://github.com/Eonasdan/bootstrap-datetimepicker) Date and time picker for my website, and when you open the datetime picker in a table-responsive class it does not show the date picker on top the table unless in the css you…
2
votes
2 answers

Tempus Dominus Datetime Picker How to set value?

Using v6 from tempusdominus datepicker Reference: https://getdatepicker.com/6/functions.html I have tried many function function trying to set a value to the datetime picker but nothing is working,, below my tries: var DateTimeVal =…
2
votes
1 answer

form with dynamic time intervals and depending disabledTimeIntervals-settings

Using eonasdan/bootstrapdatetimepicker, I try to solve this: How to set disabledTimeIntervals, minDate and maxDate for each dynamically created time-input-field? minDate and maxDate has to be set to the corresponding field, while…
1 2
3
20 21