I am fairly new to JavaScript and through few tutorials have been able to put the following code together for the jQuery date picker. However, I need to be able to store disabled dates in a variable which will be the result of a query.
I also need to prevent someone from booking through disabled dates, therefore if 3/3/15 is disabled someone can't select from 2/3/15 to 3/3/15.
Below is the code which I have in my JS file. Any help would be appreciated.
$(document).ready(function() {
var bookedDays = ["2015-2-27","2015-2-28","2010-6-14"];
***Should be results of select from table query.
e.g SELECT fromdate, todate from table where id = $_GET['id']***
$('#request').hide();
$('.days').html('Please select a date range of at least the same day. <br/> <i>Max booking: 2 Months.</i>');
$( "#from" ).datepicker({
defaultDate: new Date(),
changeMonth: true,
numberOfMonths: 1,
minDate: new Date(),
maxDate: "+1M",
beforeShowDay: isAvailable,
onClose: function( selectedDate ) {
var day = $("#from").datepicker('getDate');
day.setDate(day.getDate()+1);
$( "#to" ).datepicker( "option", "minDate", day );
}
});
$( "#to" ).datepicker({
defaultDate: new Date(),
changeMonth: true,
numberOfMonths: 1,
minDate: ("#to"),
maxDate: "+2M",
beforeShowDay: isAvailable,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
function isAvailable(date){
var dateAsString = date.getFullYear().toString() + "-" + (date.getMonth()+1).toString() + "-" + date.getDate();
var result = $.inArray( dateAsString, bookedDays ) ===-1 ? [true] : [false];
return result;
}
$('#to').on('change',function(){
var days = (daydiff(parseDate($('#from').val()), parseDate($('#to').val())));
var cogs = $('#cogsday').html();
cogs = cogs.replace(/\D/g,'');
var x = days;
var y = cogs * x;
$('.days').html('You have chosen to borrow this item for <b>'+ days + '</b> days at a cost of <b>' + y + '</b> cogs.<br/><br/>');
if(days){
$('#request').show();
}
$('#request').click(function() {
var cogs = $('#cogsday').html();
cogs = cogs.replace(/\D/g,'');
var x = days ;
var y = cogs * x;
$('#total').text(y);
$('#nameID').val(y);
$('#days').text(days);
$('#daysID').val(days);
});
})
function parseDate(str) {
var mdy = str.split('/')
return new Date(mdy[2], mdy[0]-1, mdy[1]);
}
function daydiff(first, second) {
return Math.round((second-first)/(1000*60*60*24));
}
});
Related
on the on _change event of from_date i want to fetch the value of input days and from_date to add the value of days and from_date and set it to to_date
for example input_days=5 and from_date=10/02/2020 it should add and automatically display 15/02/2020 in to_date....
here is the code which adds from_date and to_date and displays total_date but... what should i change in this logic?
$("#fromdate,#todate").datepicker({
minDate: 0,
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'yy/mm/dd',
});
$("#fromdate").datepicker({dateFormat: 'yy/mm/dd'});
$("#todate").datepicker({dateFormat: 'yy/mm/dd'});
$('#enddate').change(function () {
var start = $('#fromdate').datepicker('getDate');
var end = $('#todate').datepicker('getDate');
if (start < end) {
var days = (end - start) / 1000 / 60 / 60 / 24;
$('#total_days').val(days);
} else {
alert("cannot select same or previous date!");
$('#fromdate').val("");
$('#total_days').val("");
}
});
Please refer below code. Also please find fiddle link in comment. If input is blank I am adding 5 days by default.
<label class="required">Days</label> <input type="text" id="days"><br/><br/><br/>
<label class="required">from</label>
<input type="text" id="fromDate" class="form-control date-picker from input-append minDate" placeholder="mm/yyyy"><br/><br/><br/>
<label> To </label>
<input type="text" id="toDate" class="form-control date-picker to input-append maxDate" placeholder="mm/yyyy" >
$(function() {
$( ".from" ).datepicker({
onSelect: function( selectedDate ) {
$( ".to" ).datepicker( "option", "minDate", selectedDate );
var toDate = $('.from').datepicker('getDate');
var days = $("#days").val() != "" ? parseInt($("#days").val()) : 5;
toDate.setDate(toDate.getDate() + days );
$('.to').datepicker('setDate', toDate);
}
});
$( ".to" ).datepicker({
onSelect: function( selectedDate ) {
$( ".from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
I Hope this Helps you ..
$(document).ready(function() {
jQuery("#from").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onClose: function( selectedDate ) {
jQuery( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
jQuery("#to").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onClose: function( selectedDate ) {
jQuery( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input type="text" id="from">
<input type="text" id="to">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Try this
$(document).ready(function () {
$('#txtFromDate').datepicker({
format: 'dd/mm/yyyy',
startDate: 'd',
minDate: new Date('today'),
language: locale,
autoclose: true,
todayHighlight: true
});
$('#txtToDate').datepicker({
format: 'dd/mm/yyyy',
startDate: '+2d',/change value for to 5 for 5 days
minDate: '#txtToDate',
viewMode: 'years',
language: locale,
autoclose: true,
});
var val = $("#fromdate").val(); // your input date ID, like we have input: 5
var myDate = new Date($.datepicker.formatDate('yy/mm/dd', new Date($('#fromdate').datepicker('getDate'))));
var d = myDate.getDate()+parseInt(val, 10);
var m = myDate.getMonth()+1;
var y = myDate.getFullYear();
$("#todate").val(new Date(yy+'/'+mm+'/'+dd));
I'm trying to set a date for date-picker on selecting date from first date-picker, and want to show an alert message if user selected another date. I'm not able to do that.
Here is my code:
$('#ELEdatepicker1').datepicker({
autoclose: true,
endDate: new Date(),
todayHighlight: true,
}).change(function(){
getELEdifference($(this),$('#ELEdatepicker2'));
});
$('#ELEdatepicker2').datepicker({
autoclose: true,
startDate: new Date(),
todayHighlight: true,
}).change(function(){
getELEdifference($('#ELEdatepicker1'),$(this));
alert('Are you sure ?');
});
function getELEdifference($this1,$this2)
{
if($this1.datepicker("getDate") != null && $this2.datepicker("getDate") != null)
{
var ELEcertDiff= $this1.datepicker("getDate") - $this2.datepicker("getDate");
var result = ELEcertDiff / (1000 * 60 * 60 * 24) * -1;
//$("#ELEcertDiff").text(result);
document.getElementById("ELEcertDiff").value = result;
}
}
How can I show a date (suppose one year latter) in second date-picker ? And if user select before or after one year, it will show alert message on date selection.
UPDATE:
Is it possible to pass a parameter to set a difference for second date picker?
For Ex.
In above picture If I select a date from Issue Date-picker and from duration drop-down list box select a value (Ex. 3), then in Expiry Date-picker shows date after 3 years from selected date.
I've referred some questions:
Jquery UI : date picker. How to set date in date picker by $_GET
Define start date of second date picker from first date picker
I'm new to JavaScript and JQuery. Any kind of help is welcome. Thanks in advance.
plz add and check this code:
$('#ELEdatepicker1').datepicker({
autoclose: true,
todayHighlight: true,
dateFormat:'dd-mm-yy',
onClose: function( selectedDate ) {
var d = new Date(selectedDate);
var day = d.getDate();
var month = d.getMonth();
var year = d.getFullYear() + 1;
var newdate = month + "-" + day + "-" + year;
$( "#ELEdatepicker2" ).datepicker( "option", "minDate", newdate );
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
}
});
$('#ELEdatepicker2').datepicker({
autoclose: true,
todayHighlight: true,
dateFormat:'dd-mm-yy',
onClose: function( selectedDate ) {
$("#ELEdatepicker2" ).datepicker( "option", "maxDate", selectedDate );
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
}
});
Check this answer
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="ELEdatepicker1">
<input type="text" id="ELEdatepicker2">
<!-- <input type="text" id="ELEcertDiff"> -->
<script>
$('#ELEdatepicker1').datepicker({
autoclose: true,
todayHighlight: true,
dateFormat:'dd-mm-yy',
onClose: function( selectedDate ) {
var d = new Date(selectedDate);
var year = d.getFullYear() + 1;
var month = d.getMonth();
var day = d.getDate();
var newdate = year + "-" + month + "-" + day;
$( "#ELEdatepicker2" ).datepicker( "option", "minDate", newdate );
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
}
});
$('#ELEdatepicker2').datepicker({
autoclose: true,
todayHighlight: true,
dateFormat:'dd-mm-yy',
onClose: function( selectedDate ) {
$("#ELEdatepicker2" ).datepicker( "option", "maxDate", selectedDate );
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
}
});
</script>
I have 2 datepickers (From date, to date) or when a people arive at my hotel and when he leaves. What i want to achieve is not to let the user select a range that includes unavailable dates.
For example:
Today is 13.02.2015, a people want to reserve from 15.02.2015 to 23.02.2015 but the dates 19-02-2015, 20-02-2015 are already reserved. So i want to disable all the fields starting from 19.02.2015 meaning that he can select only from 15.02.2015 to 18.02.2015. It depends on what date he picks and he can book only to the first unavailable date, not next to that.
How can I achieve this?
This is my 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">
This is the javascript code
var unavailableDates = ["19-2-2015", "20-2-2015", "23-2-2015", "24-2-2015"]
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if (jQuery.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
And here is my jsfiddle working example
Here you go...
I have created a function which convert string to Date
function compareDate(str1, sep){
var dt1 = parseInt(str1.split(sep)[0], 10);
var mon1 = parseInt(str1.split(sep)[1], 10);
var yr1 = parseInt(str1.split(sep)[2], 10);
var date1 = new Date(yr1, mon1-1, dt1);
return date1;
}
Next I have created a function which gives the maxDate for #to Smartly.
function setMaxDate()
{
var date = $("#from").val();
for(var i=0; i<unavailableDates.length; i++)
{
if(compareDate(date, "/")<compareDate(unavailableDates[i], "-"))
return compareDate(unavailableDates[i], "-");
}
return null;
}
and doing some modifications in datepicker init
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
$( "#to" ).datepicker( "option", "maxDate", setMaxDate() ); // Added This
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
maxDate: setMaxDate(), // Added This
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
And it worked.. Here is the working jsFiddle
I am using the jqueryui datepicker (http://jqueryui.com/datepicker/#date-range) to select a range for scheduling an event. I am attempting to maintain the offset between the two dates when the start date is changed. I was able to find a reasonable solution in another post (Add a day with selected date using Jquery datepicker) but I found that when you pick a date that is before the currently selected start date (Example: change the start date from 10/20/2013 to 10/13/2013) it returns the last date that was selected instead of the offset date.
<script>
$(document).ready(function() {
$( "#date_start" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
showOn: "both",
buttonImage: "images/smCal.gif",
buttonImageOnly: true,
constrainInput: true,
onSelect: function( selectedDate ) {
var stDate = $( "#curStartDate" ).val().split('-');
var enDate = $( "#date_end" ).val().split('-');
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(stDate[0],stDate[1],stDate[2]);
var secondDate = new Date(enDate[0],enDate[1],enDate[2]);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
if(!isNumber(diffDays)) {
diffDays = 0;
}
var date2 = $('#date_start').datepicker('getDate');
date2.setDate(date2.getDate()+diffDays);
$('#date_end').datepicker('setDate', date2);
$( "#curStartDate" ).val(selectedDate)
$( "#date_end" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#date_end" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
showOn: "both",
buttonImage: "images/smCal.gif",
buttonImageOnly: true,
constrainInput: true,
minDate:$( "#date_start" ).val()
});
$( "#curStartDate" ).val($( "#date_start" ).val());
});
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
I figured out the issue. I had the minDate set for the #date_end value to the current value of the #date_start. So it was auto correcting the date selection to the latest available date that was the last selected date in #date_start. So to fix the issue I simply change the minDate before attempting to change the #date_end.
New Code:
<script>
$(function() {
$( "#date_start" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
showOn: "both",
buttonImage: "images/smCal.gif",
buttonImageOnly: true,
constrainInput: true,
onSelect: function( selectedDate ) {
var diffDays = daydiff(parseDate($('#curStartDate').val()), parseDate($('#date_end').val()));
if(!isNumber(diffDays)) diffDays = 0;
var date2 = $('#date_start').datepicker('getDate');
date2.setDate(date2.getDate()+diffDays);
$( "#date_end" ).datepicker( "option", "minDate", selectedDate );
$('#date_end').datepicker('setDate', date2);
$( "#curStartDate" ).val(selectedDate)
}
});
$( "#date_end" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
showOn: "both",
buttonImage: "images/smCal.gif",
buttonImageOnly: true,
constrainInput: true,
minDate:$( "#date_start" ).val()
});
$( "#curStartDate" ).val($( "#date_start" ).val());
});
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function parseDate(str) {
var mdy = str.split('-');
return new Date(mdy[0], mdy[1]-1, mdy[2]);
}
function daydiff(first, second) {
return (second-first)/(1000*60*60*24);
}
</script>
I have 2 datepicker textfields: one of them is #from, the other is #to.
Right now, my users can have the same date for #from and #to.
How do I make the #to datepicker start at #from + 1 day?
Here's my current code:
var dates = $( "#from, #to" ).datepicker({
numberOfMonths: 2,
minDate: 0,
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 );
}
});
var dates =$( "#from" ).datepicker({
numberOfMonths: 2,
minDate: 0,
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 );
var month = date.getMonth() + 1;
var toDate = (date.getDate()+1) + '/' + month + "/" + date.getFullYear();
$( "#to").val(toDate);
}
});