Develop Reference

Bootstrap datepicker doesn't close

I have read that this bug was fixed but doesn't really seem so. I have a boostrap modal appearing when I create an new employee in my website. And I am using the following to create a datepicker for the date of birth of the new employee.
<div class="input-group date insertInfo" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
and then after the load of my js scripts (first I load bootstrap and then bootstrap-datepicker.js) I use:
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
Unfortunately what happens is that I can select the date on the drop down calendar shown by the datepicker, but once selected I cannot close it anymore. Can you maybe help me with this issue? Thanks in advance

You must do the following:
Correct your class reference
Enable autoclose
Override button
When you setup the datepicker, you are referencing a non-existant class ('.datepicker'). Besides that, you need to include the 'autoclose' field and customize the behaviour of the button to make it both open and close the calendar.
HTML
<div class="input-group date insertInfo" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon close-button">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
JS
// Setup datepicker
$('.date').datepicker({
format: 'mm-dd-yyyy',
autoclose: true
});
// Unbind default events
$('.close-button').unbind();
// Specify new behaviour
$('.close-button').click(function() {
if ($('.datepicker').is(":visible")) {
$('.date').datepicker('hide');
} else {
$('.date').datepicker('show');
}
});
If you want to see a working version: JSFIDDLE

After selecting the date from the drop down calendar you can just click anywhere outside the calendar to close it but if you want the calendar to be closed on selecting the date then do the following
$(function () {
$('.date').datepicker({
format: 'mm-dd-yyyy',
autoclose: true
})
});

$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
autoclose: true
});
You will need to EXPLICITLY add autoclose: true, otherwise, its default value is false.

Bootstrap datepicker has autoclose option set on false by default.
You should set autoclose option on true.
Check out the reference: https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#quick-reference

Bootstrap 3 Datepicker v4 call set date with moment or date

Iam using http://eonasdan.github.io/bootstrap-datetimepicker/
i have a datetime picker called dtpFrom
<div class='input-group date ' id='dtpFrom'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script>
$('#dtpFrom').datetimepicker({
useCurrent: true,
format: 'DD/MM/YYYY',
showTodayButton: true,
showClear: true,
showClose: true,
//autoclose: true,
maxDate: new Date(),
toolbarPlacement:'top'
});
</script>
i want to set its value on run time on other controls event..
i tried this and many other code but doesnt work!!
$('#dtpFrom').data("DateTimePicker").date(moment(new Date('DD/MM/YYYY'), 'DD/MM/YYYY'));
$('#dtpFrom').data("DateTimePicker").date(moment(new Date()));
$('#dtpFrom').data("DateTimePicker").viewDate(new Date());
any suggestion..
thanks

i found the solution if someone face the same problem
$('#dtpFrom').data("DateTimePicker").date(moment(new Date()).format('DD/MM/YYYY'));
NOTE: the format should match the definition format option of datetimepicker.

Mohammad's answer did not work for me. Turns out the syntax was slightly different, possibly due to a different version of the datepicker.
The following worked for me:
('#dtpFrom').data("DateTimePicker").setDate(new Date())

How can I adjust for timezone using javascript/jQuery in a jQuery date and time picker?

Query:
How can I adjust a user-specified date and time in their local timezone to either UTC or some other given timezone using jQuery, Javascript, or a plugin in either of the two?
Background:
I am using the bootstrap-datetimepicker plugin on an html form text field. Users may specify a date and time in the future (to schedule an event, namely a telephone call). They will specify the date and time in their own timezone, and will not be asked to specify the timezone (meaning that all they will see is a calendar and clock on which they will choose the desired date and time). I need to be able to adjust this time (and date if applicable) to either UTC or to some other time zone (specifically EST/EDT depending upon whether DST applies). The user must not be aware that this adjustment is being made. As such their timezone must be somehow detected. As I am using bootstrap-datetimepicker the moment.js plugin is available. I may include whatever javascript/jQuery plugin or libraries I see fit (pageload time is not a consideration that I must make). I can, of course, add a hidden field to the page so as to submit the adjusted time.
Requirements/Restrictions:
I must use bootstrap-datetimepicker for the input.
I cannot ask the user for their local timezone.
I cannot ask the user for their location.
I cannot display the adjusted timezone to the user.
I cannot edit the PHP which receives the form data and stores it in a mySQL database.
I must use javascript or jQuery to accomplish this (unless there's some HTML/CSS magic I don't know about, this should be a given).
Code:
I'm not sure if it's helpful or not, but here is my code:
$(function() {
if (parseInt($(window).width()) < 768) {
$('#datetimepicker1').datetimepicker({
inline: true,
useCurrent: false,
daysOfWeekDisabled: [0, 6],
defaultDate: false,
showClear: true,
showTodayButton: true
});
} else {
$('#datetimepicker1').datetimepicker({
inline: true,
sideBySide: true,
useCurrent: false,
daysOfWeekDisabled: [0, 6],
defaultDate: false
});
}
});
<!-- BEGIN NEEDLESSLY LARGE NUMBER OF EXTERNAL LIBRARIES -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/locales.min.js"></script>
<!-- END NEEDLESSLY LARGE NUMBER OF EXTERNAL LIBRARIES -->
<!-- BEGIN LIKELY IRRELEVANT CODE -->
<form action="some.php" method="post" enctype="multipart/form-data" class="grid-form">
<label>Optimal Date and Time (optional)</label>
<input class="hidden" type="text" name="time" id="datetimepicker1">
<div class="datetimeplaceholder"></div>
<br>
<br>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
<!-- END LIKELY IRRELEVANT CODE -->
In case SO's snippet is unwieldy it is also available on Codepen: codepen.io/anon/pen/gpBgBz
Notes:
I apologize for the verbosity. I have looked and seen similar entries on SO. This is almost certainly what could be considered a duplicate; however, I did not really understand the answers provided. I'm not very good with jQuery, or JS in general. Despite that, I do recognize that this is a poor way of going about this problem. Arbitrary requirements overcomplicate this greatly.

The picker exports a moment.js moment. I figured out how to find a UTC time and date from that moment.
$("form").submit(function() {
var datetime1 = $('#datetimepicker1').data("DateTimePicker").date();
var correctdatetime = datetime1.utc();
$('#datetimepicker1').val(correctdatetime);
}
This accomplishes what I want.

Select date range in one calendar

I really like plugin daterangepicker, but it uses 2 calendars for selecting a date range.
Is it possible to select a date range with only 1 calendar? do you know other plugins?
I want to make something like that

You can refer the below link. It might help you.
http://www.daterangepicker.com/
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker();
});
</script>

You can use the singleDatePicker on the calendar configuration, and set it true.
singleDatePicker: true,
http://www.daterangepicker.com/#example3

Datetime format causing error?

Currently I'm using bootstrap datetimepicker which allows user to select date.
But when I run it in different laptops i get different format for the date.
For example in my laptop when i run the app and check the value that is being passed in my post method i get something like this
8/27/2013 12:00:00 AM
but when i run the app in someone else's laptop i get this value in the post method
1-1-0001 00:00:00
this results to invalid modelstate in my controller's post method.
I have no idea why this is happening. Can someone give me some suggestion and how can I solve this issue and make the datetime format always look like 8/27/2013 12:00:00 AM post method?
Here is the code in view
<div id="datetimepicker2" class="input-append date">
<input name="DateEntered" type="text"/>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true
});
});
</script>

'Try setting the format for the datetimepicker explicitly:
<script type="text/javascript">
$(document).ready(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true,
format: 'MM/dd/yyyy hh:mm:ss'
});
});
</script>
UPDATE
Try tagging the view model property or action method argument with the DisplayFormat attribute:
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy hh:mm:ss}")]