Bootstrap Datepicker,checkout input > checkin input - javascript

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

Related

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 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

change date in bootstrap datepicker calendar using date from another calendar on same page?

I have two basic bootstrap datepicker calendars on my page. I am trying to understand how I can use changeDate event to set the date of calendar no.2 according to the date I select on calendar no.1. I'd like to set a date three months ahead of the first calendar's month.
Here is the HTML of the calendar:
<div class="profile-info-row">
<div class="profile-info-name"> Date of Birth *</div>
<div class="profile-info-value">
<div id="sandbox-container">
<span class="input-icon input-icon-right">
<input type="text" type="text" name="dob" id="dob" class="form-control">
<i class="ace-icon fa fa-calendar blue"></i>
</span>
</div>
</div>
</div>
Here is the script of calendar:
<script type="text/javascript">
//datepicker plugin
$('#sandbox-container input').datepicker({
format: "dd-mm-yyyy",
todayBtn: "linked",
todayHighlight: true,
weekStart: 1,
autoclose: true
});
EDIT: This question is about the BOOTSTRAP datepicker, not the JQUERY one. I think it's a common misconception in most questions
//datepicker plugin
$('#sandbox-container input').datepicker({
format: "dd-mm-yyyy",
todayBtn: "linked",
todayHighlight: true,
weekStart: 1,
autoclose: true
}).on('changeDate', function(e) {
// `e` here contains the extra attributes
var newDate = new Date(e.date.setMonth(e.date.getMonth()+3));
$('#second-sandbox-container input').datepicker('setDate', newDate);
});
http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate
http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#setdate

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>

Date picker issue - Bootstrap JS

I'm new to the scripting languages, I need help to resolve this issue. The bootstrap date picker resets the field when I choose the same date by using the date picker icon.
$('#from_date .input-daterange').datepicker({
keyboardNavigation: false,
format: "dd-M-yyyy",
endDate: '+0d',
clearBtn: true,
forceParse: false,
autoclose: true,
});
My HTML line of code is as follows:
<input type="text" style="margin-left: -5px; width: 99px;" class="form-control" id="fromdate"
name="quote-issue-date-start" placeholder="From date" data-bind="value:fromDate" />
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
The textbox gets cleared when I again choose the date from the datepicker.
Many things look wrong:
You try to select an element which does not exist: $('#from_date - the id in your markup is fromdate (withouth the underscore)
In your selector $('#from_date .input-daterange') you try to select .input-daterange inside #from_date - if #from_date is an <input> element it cant have children, so the selector should be $('#from_date.input-daterange') (if the input would actually have that class)
You have a syntax error:
autoclose: true, });
The , is false here.

Categories

Resources