Develop Reference

datetimepicker input automatically filled with current date and disable days before current date

i have a datetimepicker input, i want the input automatically filled with current date, but user still can change the date in the input.
i also want to disable the days before current date.
i've tried to use var today = new Date(); $('#datetimepicker1').value = today;, but it didn't work. When i alert the value, it still shows that the date is undefined.
i've also tried to use
var today = new Date();
$('#datetimepicker1').datepicker({
format: 'dd/mm/yyyy',
defaultDate: today
});
but it only show table of dates like this
the desired output is datetimepicker automatically filled with current date and the days before current date is disabled.
also, the datetimepicker input automatically updated with the selected date's value. filled with selected date. the date table shows when the calendar icon clicked.
my html code:
<div class='input-group date' id='datetimepicker1'>
<input type="date" class="btn isi datetime px-3 py-1" id="datetime" name="date" placeholder="3/22/2022">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" onclick="date()"></span>
</span>
</div>

setDate with the current date in will generate a preselected date that is today, minDate 0 disables previous dates. min:current_date also works.
$('#datepicker').datepicker({
"setDate": new Date(),
"autoclose": true,
"minDate": 0,
});

$(function(){
$("#tgl").datepicker({
autoclose: true,
todayHighlight: true,
startDate: "dateToday",
format:'yyyy-mm-dd'
});
}):
'''
you can add atribute starDate

try this
"minDate": 0, to disable the days before current date and "setDate": new Date() automatically filled with current date.
$("#datepicker").datepicker(
{
"minDate": 0,
onSelect: function() {
var dateObject = $(this).datepicker('getDate');
console.log(dateObject);
}
});
$("#datepicker").datepicker('setDate', new Date());
var obj = $("#datepicker").datepicker('getDate');
console.log(obj);
<!-- load jQuery and jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- load jQuery UI CSS theme -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- the datepicker input -->
<input type='text' id='datepicker' placeholder='Select date' />

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 can I get value of Bootstrap Datepicker in JS function onchange event?

I tried to get the Date value in javascript function after I select date in bootstrap datepicker, but I can't do this.
The date picker work and show the date in input field, but I can't use this value.
(for example I want when I choose a date I get popup alert with the selected date)
This is datepicker:
<div class="form-group">
<label class="control-label" for="date">THE Date</label>
<div class="form-group">
<div class='input-group date' >
<input class="form-control " id="date_id" name="date" placeholder="DD/MM/YYYY" type="text" onchange="DateFunction()" />
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
JavaScript:
$(document).ready(function () {
var date_input = $('input[name="date"]');
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var options = {
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
})
function DateFunction() {
var x = document.getElementById("date_id");
alert(x.Value);
}
-------------edit:--------------------
i change to this function. how and where i need to add line to get my date value? the date is work and show in input
html:
<div class="container">
<div class="col-xs-12">
<input name="datetimepicker" id="Date_id" />
</div>
</div>
js:
$(function () {
$('input[name="datetimepicker"]').datetimepicker({
format: 'DD/MM/YYYY',
});
});

See https://bootstrap-datepicker.readthedocs.io/en/latest/events.html for the documentation of the datepicker events.
in short
date_input.datepicker(options);
date_input.on('changeDate', function(e){
// e.date holds the new date (e.dates if it is multidate picker)
console.log(e.date); // log actual Date object to handle as you want
console.log(this.value); // log the formatted value of the input
});
Example at https://codepen.io/anon/pen/KoZzpw

Bootstrap Datepicker,checkout input > checkin input

I have two fields in my form. One for check-in date, other for check-out date. I am using [bootstrap datepicker][1] for date selection. What I want to accomplish is that, once the check-in value has been set, minimal(startDate) check-out value will be check-in value + 1 day. This is my current code:
HTML:
<form id="homeBookForm">
<div class="inner-addon right-addon">
<i class="fa fa-calendar" aria-hidden="true" id="checkInIcon"></i>
<input type="text" class="form-control checkIn"
placeholder="Check-In">
</div>
<div class="inner-addon right-addon">
<i class="fa fa-calendar" aria-hidden="true" id="checkOutIcon"></i>
<input type="text" class="form-control checkOut" placeholder="Check-Out">
</div>
<button>Book Now</button>
</form>
JS:
var date = new Date();
$('.checkIn').datepicker({
format:'yyyy-mm-dd',
todayBtn:true,
autoclose:true,
startDate:date
}).on('blur',function(){
$('.checkOut').focus();
});
$('.checkOut').datepicker({
format:'yyyy-mm-dd',
todayBtn:true,
autoclose:true,
startDate:$('.checkIn').val()
});
Right now the code for checking the field works fine,but after autoclose happens the checkout field is just focused and datepicker doesn't even pop up.Anyone knows what I am doing wrong? Thanks in advance. :)
[1]: http://bootstrap-datepicker.readthedocs.io/en/latest/index.html

You can use date-picker's changeDate event to achieve all you want.
Try changing your current implementation to this
var date = new Date();
$(".checkIn").datepicker({
format: "yyyy-mm-dd",
todayBtn: true,
autoclose: true,
startDate: date
})
.on("changeDate", function(e) {
var checkInDate = e.date, $checkOut = $(".checkOut");
checkInDate.setDate(checkInDate.getDate() + 1);
$checkOut.datepicker("setStartDate", checkInDate);
$checkOut.datepicker("setDate", checkInDate).focus();
});
$(".checkOut").datepicker({
format: "yyyy-mm-dd",
todayBtn: true,
autoclose: true
});
You don't need blur event anymore as date-picker's changeDate event will take care of setting focus to your check-out datepicker.
Check out the demo here https://codepen.io/anon/pen/ZrByVp?editors=1010