Develop Reference

How to disable dates in second datetimepicker based on next days in the first one

I use the bootstrap date picker and I use two textboxes to search by date from-to, want to the second textbox give me the days after the days in the first textbox,
any help, please.
HTML :
<form action="{{url('search/ticket')}}" method="get">
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerfrom form-control" name="remember" placeholder="Search From" id="txtStartDate" required>
</div>
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerto form-control" name="remember" placeholder="Search To" id="txtEndDate" required>
<button type="submit" class="basic-button">Submit</button>
</div>
</form>
javascript :
<script type="text/javascript">
$(document).ready(function () {
$('.timepickerfrom').datetimepicker({
format: 'YYYY-MM-DD',
});
$('.timepickerto').datetimepicker({
format: 'YYYY-MM-DD',
});
});
</script>

You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.
Try this code:
$(document).ready(function () {
$('.timepickerfrom').datepicker({
format: 'yyyy-mm-dd',
}).on('changeDate', function(selected){
var minDate = new Date(selected.date.valueOf());
$('.timepickerto').datepicker('setStartDate', minDate);
});
$('.timepickerto').datepicker({
format: 'yyyy-mm-dd',
});
});

I found the solution if anyone wants help.
It's called the linked datepicker
https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

Bootstrap-Datepicker not selecting date when using "setDate"

I'm trying to get Bootstarp-Datepicker to work and I've got it pretty close. However, now that I've found how to set the startDate and have been able to get "autoclose" to work I can't get it to select the date that is set in the "setDate"
If I bring up the calendar and then manual select another date that will show as selected but the setDate value doesn't show that date as selected. I've done a lot of searching but can't seem to find the right combination to work.
BTW: looking in the F12 tools I do have an error but it says "failed to load resource: the server responded with a 404 (not found)" and the source points to the "/fonts/glyphicons-halflings-regular" file. I don't think that has anything to do with it but I'm going to post a separate question for that.
Here is my HTML
<div class="col-md-2 text-left">
<div id="StartDate" class="input-group date">
<input class="datepicker form-control" type="text" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-md-2">
<div id="EndDate" class="input-group date">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
Here is my JS. This JS will set the date and make autoclose work but it doesn't select the date set with the setDate method.
<script type="text/javascript">
$(function () {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
var endDate = new Date();
$("#StartDate").datepicker({
autoclose: true
}).datepicker("update", startDate);
$("#EndDate").datepicker({
autoclose: true
}).datepicker("update", endDate);
});
</script>
If I switch to this JS code I can get the setDate to work as well as get the date that was set to be selected. However, this causes the autoclose to not work.
<script type="text/javascript">
$(function () {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
var endDate = new Date();
$("#StartDate").datepicker("setDate", startDate);
$("#StartDate").datepicker("autoclose", true);
$("#StartDate").datepicker("update");
});
</script>

When AutoClose not working, you can force it by using this function:
$('#StartDate').datepicker().on('changeDate', function(ev){
$('#StartDate').datepicker('hide');
});
$(function () {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
var endDate = new Date();
$("#StartDate").datepicker("setDate", startDate);
$("#StartDate").datepicker("update");
$('#StartDate').datepicker().on('changeDate', function(ev){
$('#StartDate').datepicker('hide');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">
<div class="col-md-2 text-left">
<div id="StartDate" class="input-group date">
<input class="datepicker form-control" type="text" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>

Bootstrap date picker after selecting date not closing picker

After selecting date from bootstrap date picker the picker popup is not hiding. What may be the issue?
Here is my fiddle
<div class="form-group col-xs-6">
<div class="input-group">
<div class="input-group-addon flat">
<div class="glyphicon glyphicon-calendar"></div>
</div>
<div class="col-sm-10">
<input name="DATEFROM" id="dateFrom" type="text" class="form-control" />
</div>
</div>
</div>
$(document).ready(function() {
$('#dateFrom').datepicker({
format: "mm/dd/yyyy",
orientation: "top"
});
});

Add autoclose: true in datepicker function.
The new jquery code is:
$(document).ready(function() {
$('#dateFrom').datepicker({
format: "mm/dd/yyyy",
orientation: "top",
autoclose: true
});
});
Here is the updated fiddle. https://jsfiddle.net/329suzv9/8/

Simply hide the datapicker in the changedate event.
$(document).ready(function() {
$('#dateFrom').datepicker({
format: "mm/dd/yyyy",
orientation: "top"
}).on('changeDate', function(ev){
$('#dateFrom').datepicker('hide');
});
});

Clear the value in a datetimepicker field

I'm sure this is simple and it's my understanding of jquery/javascript that is holding me back - but I can't get this to work.
All I need to do - is - When a button on the screen is clicked, clear some of the input field on the form back to their original values.
This is working fine, for all fields except a datetimepicker field.
Here is the relevant bits of code, that defines the input field :
<div class='form-group' id='START_DATEFormGroup'>
<label for='START_DATE' class='col-sm-2 control-label' data-toggle='tooltip' data-placement='top' title=''>Start Date</label>
<div class='col-sm-8'>
<div class='input-group date form_date col-sm-3' data-date-format='dd M yyyy' data-link-field='START_DATE' data-link-format='yyyy-mm-dd'>
<input class='form-control' size='16' type='text' />
<input type='hidden' id='START_DATE' name='START_DATE' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'>
</span> // group-addon
</span> // calendar
</div> // form_date
</div> // col-sm-8
</div> // form-group
I am initializing datetimepicker as follows :
function enableDatepicker(){
$( document ).ready(function() {
$('.form_date').datetimepicker({
format: 'dd M yyyy',
minView: 2,
autoclose: 1,
})
});
}
To clear the input fields down I have :
function clearActionForm(){
// code here to clear the various input fields to null or their initial values.
// Need statements to clear the datetimepicker field to null.
}
So, can someone give me the line(s) of code I need to insert into clearActionForm() in order to clear the START_DATE field to null.
Thanks.

If you are using the eonasdan datetimepicker use the following:
// clears
$("#form_date").data("DateTimePicker").date(null);
// updates with date
$("#form_date").data("DateTimePicker").date(new Date());
// or update with string
var myCoolDate = "27 05 1975";
$("#form_date").data("DateTimePicker").date(myCoolDate);
// or update with a moment
var moment = moment().add(2, 'd');
$("#form_date").data("DateTimePicker").date(moment);
Below is a demo of using different types of changes.
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'dd M YYYY',
});
});
$('#clear').click(function() {
$("#datetimepicker1").data("DateTimePicker").date(null);
})
$('#date').click(function() {
var sysdate = new Date();
$("#datetimepicker1").data("DateTimePicker").date(new Date());
})
$('#string').click(function() {
var myCoolDate = "27 05 1975";
$("#datetimepicker1").data("DateTimePicker").date(myCoolDate);
})
$('#moment').click(function() {
var now = moment().add(2, 'd');
$("#datetimepicker1").data("DateTimePicker").date(now);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<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>
</div>
</div>
</div>
</div>
<input type='button' id='clear' Value='Clear Date'>
<input type='button' id='date' Value='Set with date'>
<input type='button' id='string' Value='Set with string'>
<input type='button' id='moment' Value='Set with moment'>

use this line $('.form_date').data("DateTimePicker").clear()
Demo

Easy way to rest the selected date as well as highlighted date by below concept
$('#txtWQApprovalDate').datepicker('setDate', null).datepicker('fill');

Assuming that you are using the datetimepicker plugin from xdsoft.net/jqplugins/datetimepicker, one quick way to clear the datetimepicker's current value would be the following:
$('.form_date').val('');
As an alternative (this sets the value of the datetimepicker to the current time):
$('.form_date').datetimepicker({
value: (new Date()).toLocaleString()
});
This value does not not match the format of the datetimepicker, but will be converted to the correct format automatically when the datetimepicker is used.

If you are using the eonasdan datetimepicker use the following:
// clears
$j(".form_date").data("DateTimePicker").setDate(null);
// updates to now
$j(".form_date").data("DateTimePicker").setDate(new Date());
// or update to a given date
var myCoolDate = "05/27/1975";
$j(".form_date").data("DateTimePicker").setDate(myCoolDate);

How to disable time in Bootstrap DateTimePicker?

I wanna use bootstrap datetimepicker without select time but it is not working. I gave false value to the pickTime parameter but it is still not working. But Format and language parameters is working.
Here is the code!
How can i fix this?
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: "dd MM yyyy",
pickTime: false,
autoclose: true,
todayBtn: true,
language: 'tr',
pickerPosition: "bottom-right"
});
});
</script>
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon">Birtdate</span>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"> </span>
</span>
</div>

There are many datetimepicker plugin, so you need to details what plugin you used.
If you use the plugin from http://eonasdan.github.io/bootstrap-datetimepicker/.
I think, you may use wrong its option : read more at http://eonasdan.github.io/bootstrap-datetimepicker/Options/. Here I removed almost, and just keep one:
$('#datetimepicker1').datetimepicker({
format: "dd MM yyyy"
});

try this remove pickTime Option and use minview : 2
$(function() {
$('#datetimepicker4').datetimepicker({
minView : 2
});
});

Try the below code, which will show only the date view, when the calendar is pulled down.
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'yyyy-mm-dd',
startView: 'month',
minView: 'month',
autoclose: true
});
});

I found this website online it disables the time picker
http://tarruda.github.io/bootstrap-datetimepicker/
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false
});
});
</script>