Develop Reference

bootstrap datetimepicker onChange event on start and end dates

In my project I got bootstrap datetimepicker for start and end dates and switch buttons which set dates for today, for last week and for all time. This looks like the following:
For datetimepickers I got onChange event and when the user changes either start or end date, ajax request is fired and new data is obtained from the server. he code for this is like this:
$("#datetimepickerFrom").on("dp.change", function (e) {
start_date = e.date;
table.ajax.reload();
});
$("#datetimepickerTo").on("dp.change", function (e) {
end_date = e.date;
table.ajax.reload();
});
So the problem is as follows: when the user clicks a button for last week, it sets today date for endtime datetimepicker and 7 days before date for start datetimepicker. As 2 datetimepickers are changed simultaneously, ajax request is fired twice and this is undesired behaviour. Any ideas how that could be avoided and ajax call made once in case 2 datetimepickers change?
Moreover I need to preserve ajax call for any datetimepicker change because user can change any of the dates manually and new data should be requested.
Thank you.

I tried your code quickly a few minutes ago, and everything seemed working good. I've implemented a basic jquery ajax call. You can do your own as well.
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Jquery part
let datePicker = {
'dateStart': null,
'dateEnd': null
}
$(function () {
$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker({
useCurrent: false
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
datePicker['dateStart'] = new Date(e.date._d);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
datePicker['dateEnd'] = new Date(e.date._d);
if(datePicker['dateEnd'] && datePicker['dateStart']){
$.post("your_url", datePicker, function(result){
console.log(result)
});
}
});
});

How do I set minDate using Bootstrap 4 date/time picker based on previous date input?

I am setting up a website that adds event start and end dates/times to a database. I would like to dynamically set minDate (for the end date/time) based on the input from the previous event start.
I am using https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html for my date/time picker and bootstrap 4.
<div class="form-group row">
<label for="eventStart" class="col-3 col-form-label">Event start date and time</label>
<div class="col-5">
<div class="input-group date" id="datetimepicker1">
<input id="eventStart" name="eventStart" type="text" required="required" class="form-control here">
<div class="input-group-addon append"><i class="fa fa-calendar"></i>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
stepping: 15
});
});
</script>
</div>
<div class="form-group row">
<label for="eventEnd" class="col-3 col-form-label">Event end date and time</label>
<div class="col-5">
<div class="input-group date" id="datetimepicker2">
<input id="eventEnd" name="eventEnd" type="text" required="required" class="form-control here">
<div class="input-group-addon append"><i class="fa fa-calendar"></i></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
stepping: 15,
minDate: '2019/1/23 20:00'
});
});
</script>
</div>
I can set minDate manually (as above) but not sure how to take the value from the previous text input (datepicker1) with perhaps 'onblur'?

you can call the datetime api methods like this
$('#datetimepicker').data("DateTimePicker").minDate('2019/1/23')
and call the api dynamic
$('#datetimepicker1').on('change',function(){
var newdate=$(this).val();
if(newdate){
$('#datetimepicker2').data("DateTimePicker").minDate(newdate)
}
});
have a try

The answer to your question is clearly stated on the documentation https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html
Basically, you can dynamically set minDate for the second datetimepicker by setting an event listener on the first datetimepicker that fires an event whenever user select the first datetime.
$('#datetimepicker1').datetimepicker(... your options ...).on( "dp.change", function(e) {
// Fired when the date is changed.
// Get the datetime value
console.log(e.target.value);
})
Then you can reset the minDate of second datetimepicker using this API function:
// Takes a minDate string, Date, moment, boolean:false parameter and disallows the user to select a moment that is before that moment. If a boolean:false value is passed the options.minDate parameter is cleared and there is no restriction to the miminum moment the user can select.
$('#datetimepicker2').data("DateTimePicker").minDate(minDate)

Fetch the value from input box contain month-date format by javascript or jquery

I want to fetch the value of the date and want to increase by 1 year and set the value for the next date .but if i am putting text i am getting alert if i am just choosing from datepicker i am not getting any alert.
<style>
.datepicker-days{display:none!important;}
.datepicker-months{display:block!important;}
.prev{visibility:hidden!important;}
.next{visibility:hidden!important;}
</style>
<script>
$(document).ready(function(){
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy'
})
$('#gMonth2').on("change", function () {
alert();
//alert($(this).val());
});
});
</script>
<div class="container-fluid" id="content">
<div class="form-group">
<label>First check in:</label>
<input type="text" class="form-control form-control-1 datepicker input-sm from" id="gMonth2" placeholder="CheckIn" >
</div>
</div>

You can use the onSelect() event of datepicker
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy',
onSelect: function(dateText) {
//Increase year by 1 & set to other field
}
});

I've tried to reproduce your code in here, I'm getting alert with the value fetched from the input when I change the date on the date picker, your code seems to be working fine.
.

How to stop datetimepicker setting todays date in textbox by default onclick

When we select calendar icon, it automatically sets today's date to textbox.
Is there any parameter/option in the datetimepicker() function which can be set to false or null preventing datetimepicker() setting today date to textbox by default.
If someone doesn't select any date from calendar the textbox should be empty rather than having today's date set by datetimepicker().

Worth reading the docs. Change the useCurrent attribute when initailizing the datetimepicker.
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#usecurrent

If you are using the .datetimepicker() for Bootstrap 4 + jQuery
When you click the element it could happen this undesired effect of date updated.
This is a hack to avoid override of current value with current date on click and allow normal selection of picker.
For the Tempus Dominus version:
https://tempusdominus.github.io/bootstrap-4/
JS
var dateNow = new Date();
$('.datetimepicker').each(function() {
var _el = this;
$(this).datetimepicker({
autoclose: true,
allowInputToogle: true,
format: 'YYYY-MM-DD HH:mm',
defaultDate: dateNow,
});
// 'this.parent()' is the container and data-target | '_el' is the input
$(this).parent().on('change.datetimepicker', function(e) {
// HACK
if (!e.oldDate) return;
$(_el).val(e.date.format('YYYY-MM-DD HH:mm'));
});
});
HTML
<div class="form-group">
<label class="control-label"><i class="icon-right-open-outline"></i> Date</label>
<div class="input-group" id="form_datetimepicker_1">
<input name="date_selected"
id="date_selected"
class="form-control datetimepicker"
type="text"
data-toggle="datetimepicker"
value="2019-11-22 22:55:00"
data-target="#form_datetimepicker_1">
<div class="input-group-append" data-target="#form_datetimepicker_1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>

Bootstrap Datepicker - Set startView: 'decade', but not current decade

Currently I have the startView showing the current decade, which is ok but I want to make the previous decade be the startView - not the current decade.
this.dobDatePickerView = new DatePickerView({
el: this.$('[name="dob"]'),
startView : 'decade',
endDate : this.sandbox.dates().fwFormat('date'),
value : this.sandbox.dates().subtract('years', 18).fwFormat('date')
}).render();
I want to subtract 18 years from the decade view default selected year, so instead of '2013' being pre-selected it should default to 1995.

This could work: (demo):
<div class="input-append date" id="dp1" data-date="01-01-1990" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
<input class="span2" size="16" type="text" readonly>
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script>
$('#dp1').datepicker();
</script>
By separating the datepicker from the input and setting a default value on the picker but not the input, you can get something that will only populate a date once a date is selected but start at any value you please.

https://github.com/eternicode/bootstrap-datepicker#setstartdate
perhaps try calling setStartDate() on the datePicker, when it is clicked/opened, and set the date ten years ago