how to get start and end on date and time range picker? - javascript

I can't see how to get the start and end from a date and time range picker I usually use data-link-field="dtp_input1" to get the data to insert into a table like I code it like this:
<input type="hidden" id="dtp_input1" name="date" value="" /><br/>
Now my code from date and time range picker is like this:
<div class="form-group">
<label>Date and time range:</label>
<div class="input-group">
<div class="input-group-addon"> <i class="fa fa-clock-o"></i>
</div>
<input type="text" class="form-control pull-right" id="reservationtime">
</div>
<!-- /.input group -->
</div>
<!-- /.form group -->
and for the javascript:
$('#reservationtime').daterangepicker({
timePicker: true,
timePickerIncrement: 30,
format: 'MM/DD/YYYY h:mm A'
});
please see my screenschot
how can i code to get start and end and enter it on mysql database

$('#reservationtime').daterangepicker({
timePicker: true, timePickerIncrement: 30,
format: 'MM/DD/YYYY h:mm A'
}).bind('datepicker-change',function(event, obj)
/* This event will be triggered when second date is selected */
console.log('change',obj);
// obj will be something like this:
// {
// date1: (Date object of the earlier date),
// date2: (Date object of the later date),
// value: "2013-06-05 to 2013-06-07"
// }
})

Related

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

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

I want to assign 1 day after checkin date for check out date in bootstrap datepicker

I have the HTML as follows
<div class="booking-date-fields-container col-xs-12 col-sm-6" id="dp3">
<input type="hidden" data-date-format="MM/DD/YYYY" name="dateArrival" id="dateArrival">
</div>
<div class="booking-date-fields-container col-xs-12 col-sm-6" id="dp4">
<input type="hidden" data-date-format="MM/DD/YYYY" name="dateDeparture" id="dateDeparture">
</div>
and following is the JS file content for the above
jQuery("#booking-tab-contents .input-daterange").datepicker({
format: "yyyy-mm-dd",
autoclose: true,
startDate: new Date(),
show: true,
inputs: jQuery('.booking-date-fields-container')
});
$('#dp3').datepicker().on('click', function (ev) {
$('#dateArrival').val( $('#dp3').datepicker('getFormattedDate'));
});
$('#dp4').datepicker().on('click', function (ev) {
$('#dateDeparture').val( $('#dp4').datepicker('getFormattedDate'));
});
I want to make my date-picker in such a way that, when I select arrival date or check in date, the checkout date must be a day after the check-in date

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>

Categories

Resources