Develop Reference

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)

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

recieve data form html in angular undefined

Well I have a simple form for add data, but I have the problem with the date when I enter to from added or choose the date but the date always result undefined, BUT I reload the page and work, Honestly this is the strangest thing for me. for choose date I use bootstrap-datepicker
<link rel="stylesheet" href="../../../assets/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<script src="../../../assets/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="../../../assets/bootstrap-datepicker/dist/locales/bootstrap-datepicker.es.min.js"></script>
<div class="form-group">
<label class="col-sm-1 control-label">
Fecha Control:
</label>
<div class="col-sm-4">
<input class="form-control" type="text" placeholder="DD/MM/YYYY" id="date_food" name="date_food" ng-model="date_food">
</div>
<script type="text/javascript">
$(function() {
$('#date_food').datepicker({
format: 'dd/mm/yyyy',
language: "es",
todayHighlight: true,
autoclose: true
});
});
</script>
</div>
button for add
<button ng-click="addExtraDining()" class="btn btn-lg btn-primary">
Agregar comida extra
</button>
and the function
$scope.addExtraDining = function () {
console.log(document.getElementsByName("date_food").value); //undefined
console.log($scope.date_food); //undefined
}

getElementsByName() gives a nodelist collection. Therefore you need to pass the index to get the element like this
document.getElementsByName("date_food")[0].value
Since date_food is the id of the dom element , you can use document.getElementById('date_food')
You can note the difference between two text getElementsByName & getElementById. In once case it is elements where in othercase it is element

How to get Unix timestamp using Bootstrap-datetimepicker

I am using 3rd party date time picker from https://eonasdan.github.io/bootstrap-datetimepicker/
It is working fine, however, I'd like to get the value in Unix timestamp format. How do I do that? There is no formatting option for Unix. https://eonasdan.github.io/bootstrap-datetimepicker/Functions/#format
function getValue() {
var date = $('#datetimepicker1').data('date');
alert(date); // shows 05/25/2017 5:43 PM
}
<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>

The eonasdan datetimepicker has a good API that you can use to programmatically interact with the picker.
You can use the date() method that:
Returns the component's model current date, a moment object or null if not set.
Since the value return by date() is a moment object you can use unix() to get Unix timestamp (the number of seconds since the Unix Epoch).
Here a working sample:
function getValue() {
var date = $('#datetimepicker1').data("DateTimePicker").date();
if( date ){
alert(date.unix());
}
}
$('#datetimepicker1').datetimepicker();
<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.18.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>
<button onclick="getValue()" class="btn btn-primary">Get value</button>
Remember that, as the docs says:
Note All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION()

Short Answer: since that plugin work together with moment.js you can use the momentjs method unix(), like in the following way:
moment($('#datetimepicker1').data('date')).unix()
Update(I was testing on Internet Explorer 11)
$('#datetimepicker1').data('DateTimePicker').date().unix()

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>