I have to input field "From" and "to
<input type="text" name="startDate" id="from" size="12"/>
<input type="text" name="endDate" id="to" size="12"/>
If would like to know how I could make in sort that datepicker block the calendar within the month where From is selected. So if I choose November 20th, then the id "to" could only be after the 20th to 31st of november. It can't go to the other month.
Here's what I have
var dates = $( "#from, #to" ).datepicker({
changeMonth: false,
numberOfMonths: 1,
maxDate: '+0D',
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
How could we block the user to not go pass the month selected?
You could use a date range picker like this one: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
Related
I'm a newbie in this php and html. I'm developing a laundry system using php with mysql. right now, users can just enter whatever date they want for pickup and delivery.. for example, today is 10 feb 2018, user key in 9 feb 2018 as pickup. that should not be possible. how do i handle that? my html are
<font face="Arial Black">Pickup date:</font>
<input type="date" name="pickupdate">
The below snippet is from one of my projects, see if this helps you in anyway:
The HTML Code:
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
The Javascript Code:
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
I'm having 2 textbox for date. One is From Date & another is To Date.
Let us say.
From Date 1
To Date 1
&
From Date 2
To Date 2
I am using date picker for textboxes. If user select 24-01-2012 in 'From Date 1' & 24-01-2016 in 'To Date 1'. Then, I've to restrict user to select date in 'From Date 2' from 01-01-1935 -To- date selected in 'From Date 1'.
<?
$current_year = date("Y");
$past_year = $current_year - 80;
?>
I'm storing date as
var FromDate1= $("#FromDate1").val();
var ToDate1= $("#ToDate1").val();
var FromDate2= $("#FromDate2").val();
var ToDate2= $("#ToDate2").val();
Here, $past_year and $current_year is available. How can I restrict user to select date in 'From Date 2' from 01-01-1935 -To- 'FromDate1'.
$(".addmorefromP").datepicker({
changeYear: true,
maxDate: new Date(),
changeMonth: true,
yearRange: '<?php echo $past_year . ':' . $current_year; ?>',
dateFormat: 'mm-dd-yy',
onClose: function () {
$(this).valid();
}
});
Here, yearRange: '<?php echo $past_year . ':' . $current_year; ?>', is used. Is there any way to use FromDate1 in place of $current_year.
I have been trying since 2 hours. I am not good in jquery, so i was unable to do it. Any help/hint is appreciable. Please help.
Please have a look at below code. May be it will be helpful.
Fiddle Link: http://jsfiddle.net/pqhtt7gb/5/
HTML:
<div id="date1">
FromDate1: <input id="FromDate1" data-index="0" class="datepickerStart" type="text" />
ToDate1: <input id="ToDate1" data-index="0" class="datepickerEnd" type="text" />
</div>
<div id="date2">
FromDate2: <input id="FromDate2" data-index="1" class="datepickerStart" type="text" />
ToDate2: <input id="ToDate2" data-index="1" class="datepickerEnd" type="text" />
</div>
JQuery Code:
$(".datepickerStart").datepicker({
constrainInput: true,
changeMonth: true,
changeYear: true,
firstDay: 1,
numberOfMonths: 1,
onClose: function (selectedDate, obj) {
var index = obj.input.data("index");
$(".datepickerEnd[data-index="+index+"]").datepicker("option", "minDate", new Date(selectedDate));
if(index == 0){
$(".datepickerStart[data-index=1],.datepickerEnd[data-index=1]").datepicker("option", "maxDate", new Date(selectedDate));
}
}
});
var currentDate = new Date();
var currentYear = currentDate.getFullYear();
var pastYear = currentYear - 80;
var pastDate = new Date(pastYear+"/01/01");
$(".datepickerStart[data-index=1]").datepicker("option", "minDate", pastDate);
$(".datepickerStart[data-index=1]").datepicker( "setDate", pastDate);
$(".datepickerEnd").datepicker({
constrainInput: true,
changeMonth: true,
changeYear: true,
firstDay: 1,
numberOfMonths: 1
});
Try this
$(".addmorefromP").datepicker({
changeYear: true,
maxDate: new Date(),
changeMonth: true,
minDate:new Date(<?php echo $past_year;?>),
maxDate:new Date(<?php echo $current_year;?>),
//yearRange: '<?php echo $past_year . ':' . $current_year; ?>',
dateFormat: 'mm-dd-yy',
onClose: function () {
$(this).valid();
}
});
basically I have a large form created on my WordPress site using Gravity Forms. One section of my forms has a bunch of items listed with a 'Start Date' followed by an 'End Date' -- Example:
Item | Start Date | End Date
Item#1 | 05/01/2015 | 05/25/2015
What I am after is making it so I can disallow the 'End Date' from being before the selected 'Start Date'. It would be best if the user was unable to even select the date from the date picker drop down, but if it has to be an error that pops up on submission, that is fine to. I have been researching this for hours and I am just too noob to know exactly what to do. Thanks for any and all help!
Try something like this, which uses jQuery's datepicker functions:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
I have successfully integrate jQuery DatePicker on my site and wondering how can I set the following:
Don't allow selection of start date from current date plus 2 days. example if today's date is 7/20/12 then the visitor can select only date starting 7/22/12.
End date must start based on Start Date plus one. If start date is 7/23/12 then the end date should be 7/24/12.
BTW, I am making a hotel reservation calendar.
Here's my code based from sample:
<script>
$(function() {
$( "#sd" ).datepicker();
});
$(function() {
$( "#ed" ).datepicker();
});
</script>
<tr>
<td>Check In</td>
<td>:</td>
<td><input name="sd" type="text" id="sd" value="<?php echo $_SESSION['checkin'] ?>" size="10"" maxlength="8" /></td>
</tr>
<tr>
<td>Check Out</td>
<td>:</td>
<td><input name="ed" type="text" id="ed" value="<?php echo $_SESSION['checkout'] ?>" size="10" maxlength="10" /></td>
</tr>
You can do it inside your datepicker events.
$(function() {
$( "#sd" ).datepicker({
// before datepicker opens run this function
beforeShow: function(){
// this gets today's date
var theDate = new Date();
// sets "theDate" 2 days ahead of today
theDate.setDate(theDate.getDate() + 2);
// set min date as 2 days from today
$(this).datepicker('option','minDate',theDate);
},
// When datepicker for start date closes run this function
onClose: function(){
// this gets the selected start date
var theDate = new Date($(this).datepicker('getDate'));
// this sets "theDate" 1 day forward of start date
theDate.setDate(theDate.getDate() + 1);
// set min date for the end date as one day after start date
$('#ed').datepicker('option','minDate',theDate);
}
});
$( "#ed" ).datepicker();
});
please check Jquery: DatePicker: start/end date for answer.
Long story short :
<script type="text/javascript">
$(document).ready(function () {
$('#endDate').datepicker({ showOn: 'button',
buttonImage: '../images/Calendar.png',
buttonImageOnly: true, onSelect: function () { },
onClose: function () { $(this).focus(); }
});
$('#startDate').datepicker({ showOn: 'button',
buttonImage: '../images/Calendar.png',
buttonImageOnly: true, onSelect:
function (dateText, inst) {
$('#endDate').datepicker("option", 'minDate', new Date(dateText));
}
,
onClose: function () { $(this).focus(); }
});
});
How do I change defaultDate: "+1w" to this format: yyyy-mm-dd? It must display like that in the input field.
JavaScript here:
<script>
$(function() {
var dates = $( "#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
</script>
php code here:
<?php
$IMG_DIR_URL = "./digits/";
$date = date("d F Y");
?>
Displaying contents here:
<div class="field">
<label>Date</label>
<input type="text" name="date" value="<?php value('date'); ?>" id="from" />
<?php if(isset($errors['date'])) { ?>
<div class="error"><?php echo $errors['date']; ?></div>
<?php } ?>
</div>
use date('Y-m-d') for yyyy-mm-dd with the PHP date function.
you can format it in the datepicker options by adding dateformat: 'yy-mm-dd', like so:
$(function() {
var dates = $( "#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateformat: 'yy-mm-dd',
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
I don't know what your value function does, but if it doesn't show the date
your PHP for displaying it should be:
<input type="text" name="date" value="<?php echo $date; ?>" id="from" />