I am developing a simple check-in and check-out form with Datepicker and I made it to always display the checkin as today, and checkout as tomorrow.
<?php
$today = date("Y-m-d");
$tomorrow = new DateTime('tomorrow');
?>
<div class="row">
<input type="text" class="datepicker" name="datein" value="<?php echo $today; ?>" readonly='true'>
<input type="text" class="datepicker" name="dateout" value="<?php echo $tomorrow->format('Y-m-d'); ?>" readonly='true'>
</div>
And I want the checkout date to be always the checkin + 1 day.
Is there a way to dynamically check the checkin value and update the checkout on any event, or should I take a different approach?
Thank you
Try this
<input id="checkIn" type="text" class="datepicker" name="datein" value="" readonly='true'>
<input id="checkOut" type="text" class="datepicker" name="dateout" value="" readonly='true'>
$(function () {
var dateToday = new Date(new Date().getTime();
var oneDayAhead = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
$("#checkIn").datepicker({
changeMonth: true,
minDate: dateToday,
dateFormat: 'yy-mm-dd',
});
$("#checkOut").datepicker({
changeMonth: true,
minDate: oneDayAhead,
dateFormat: 'yy-mm-dd',
});
});
What this basically does is, it will restrict checkout time one day ahead of current time, You can modify this to suit your needs
Related
Suppose I change the start date and click on End Date before render the start date. Then datepicker of End date will be close because of rendering of start date value. If you have any solution or any datepicker suggestion, please help me.
Blade File
<div class="col">
<label for="">Start Date <span class="text-danger">*</span></label>
<input type="text" name="start_date" wire:model.lazy='start_date'
class="form-control #error('start_date') is-invalid #enderror">
#error('start_date')
<small class="text-danger">{{ $message }}</small>
#enderror
</div>
<div class="col">
<label for="">End Date <span class="text-danger">*</span></label>
<input type="text" name="end_date" wire:model.lazy='end_date'
class="form-control #error('end_date') is-invalid #enderror">
#error('end_date')
<small class="text-danger">{{ $message }}</small>
#enderror
</div>
My Script Code for Datepicker
<script>
$('input[name=start_date]').datetimepicker({
format: "DD/MM/YYYY",
disabledDates: false,
useCurrent: false,
showClear: true,
showClose: true,
showTodayButton: true,
});
$('input[name=start_date]').on("dp.change", function(e) {
#this.set('start_date', e.target.value);
});
$('input[name=end_date]').datetimepicker({
format: "DD/MM/YYYY",
disabledDates: false,
useCurrent: false,
showClear: true,
showClose: true,
showTodayButton: true,
});
$('input[name=end_date]').on("dp.change", function(e) {
#this.set('end_date', e.target.value);
});
</script>
If I'm not misunderstand you question why you use "wire:model.lazy" ? "wire:model" remove .lazy might be fixed your problem?
I am trying to show minDate:1 and defaultDate:+3 in datepicker.
$( ".datepicker1" ).datepicker({
dateFormat: "mm-dd-yy",
altFormat: "yy-mm-dd",
altField: "#altField",
minDate: 1
});
$("#TTOCutoffDate").datepicker("option", "defaultDate", 3);
$("#fileDate").datepicker("option", "defaultDate", 3);
If I use html input box, it works as expected.
<input type="text" name="fileDate" id="fileDate" class="datepicker1">
success picture
But If I use html.textboxfor as below, it doesn't work.
<%=Html.TextBoxFor(x => x.TTOCutoffDate, ttoEnabled ? new {#class="datepicker1" } : (object)new {
disabled = "disabled" })%>
TextBoxFor picture
It seems that default date is not set as default date.
How can I make it work with TextBoxFor?
html rendered as below.
<input type="text" name="fileDate" id="fileDate" class="datepicker1 hasDatepicker">
<input class="datepicker1 hasDatepicker" id="TTOCutoffDate" name="TTOCutoffDate" type="text" value="" readonly="" style="background-color: rgb(255, 255, 255);">
Thank you.
You're missing the fileDate ID
I put a new datepicker into a admin page and it lets me select the date needed but when I had data-date-format="yyyy/mm/dd" as dd/mm/yyyy, it would not save the date in the database and would save it as 0000-00-00 so I changed the format to data-date-format="yyyy/mm/dd" and it works now and saves the date correctly now in the database but is there any way I can have the date format as dd/mm/yyyy in the input field as it currently shows as 2019/10/22
The code I have is below
<div id="exstdate" class="col-lg-6 input-group date" data-date-format="yyyy/mm/dd">
<input type="text" class="form-control" name="exstdate" value="<?php echo $exstdate; ?>" id="exstdate" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span><div class="error alert-danger"></div>
</div>
<script>
$(function () {
$("#exstdate").datepicker({
language: "en",
autoclose: true,
todayHighlight: true,
dateFormat: 'dd/mm/yyyy'
}).datepicker('update', new Date());
});
</script>
I have an AMP datepicker. I want to display current date at the bottom of datepicker when datepicer is rendered.
I am trying something like this. but it doesnot desplay current date.
<amp-date-picker
id="departure-date-pickerOW1"
media="(max-width: 52rem)"
date="P0D"
type="single"
mode="overlay"
layout="container"
class="flex flex1"
number-of-months="1"
day-size="36"
input-selector="[id=departure-dateOW1]"
on="activate:AMP.setState({curr_date: departure-date-
pickerOW1.today})">
<input type="text" title="departure date" id="departure-dateOW1"
class="date-field departure-date" placeholder="Departure date">
</input>
<span class="ico-sprites ico-calendar absolute"></span>
<template type="amp-mustache" info-template >
<span [text]="curr_date">current date</span>
</template>
</amp-date-picker>
Try something like this:
HTML:
<input type="text" title="departure date" id="departure-dateOW1"
class="date-field departure-date" placeholder="Departure date" value="{DATE_TODAY}>
PHP:
<?php
$date = date();
$template = file_get_contents('my_template.html'); // YOUR HTML
$output = str_replace('{DATE_TODAY}',$date, $template);
echo $output;
I am trying to implement a dynamic start date for a bootstrap datepicker while using vuejs. Below is an example of what I have in my code currently. Using -30d or a date formatted as 01-01-2016, but not 2016-01-01 works.
<input type="text" name="cancelDate" id="cancelDate" autocomplete="off" class="form-control form-control-small"
v-model="sale.cancelDate"
v-bind:class="{ 'has-error': !validation.cancelDate }"
v-datepicker start-date="{{sale.saleDate}}" />
<p>{{sale.saleDate}}</p>
The {{sale.saleDate}} in the p tags is accessible, and displays a date like '1/27/2016'. Changing 'start-date' to 'data-start-date' does not work. In the datepicker directive, I have...
var self = this;
$(self.el).datepicker({
startDate: self.params.startDate,
endDate: self.params.endDate,
todayBtn: "linked",
autoclose: true
});
How can I get the start-date to appear dynamically?
I post an example here:
//script.js
new Vue({
el:"#app",
data:function(){
return {
startDate: moment().subtract(7, 'days').format('MM/DD/YYYY'),
cancelDate: moment().format('MM/DD/YYYY')
}
},
ready:function(){
$('.datepicker').datepicker({ startDate: this.startDate });
}
})
// index.html
<div id="app">
<input class="datepicker" type="text" v-model="{{cancelDate}}" value="{{cancelDate}}" >
</div>
https://jsfiddle.net/nosferatu79/jfk97gp9/4/
Hope this help...