I want checkin and checkout functionality using jQuery? [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want 2 textboxs where I can insert checkin & checkout date. Checkin date should be current or future date and checkout date should be greater then selected checkin date

Its simple using default datepicker plugins of JQuery. Code in jsfiddle contains 2 text box one for checkin and another for checkout.
$( "#checkin" ).datepicker({minDate : 0, dateFormat: 'dd-mm-yy'});
Hit Me !! For code..

Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$("#txtCheckin").datepicker({
dateFormat: "dd-M-yy",
onSelect: function (date) {
var date2 = $('#txtCheckin').datepicker('getDate');
date2.setDate(date2.getDate());
$('#txtCheckout').datepicker('setDate', date2);
//sets minDate to dateofbirth date + 1
$('#txtCheckout').datepicker('option', 'minDate', date2);
}
});
$('#txtCheckout').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#txtCheckin').datepicker('getDate');
console.log(dt1);
var dt2 = $('#txtCheckout').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = $('#txtCheckout').datepicker('option', 'minDate');
$('#txtCheckout').datepicker('setDate', minDate);
}
}
});
});
</script>
</head>
<body>
<input type="text" id="txtCheckin" />
<input type="text" id="txtCheckout" />
</body>
</html>
Src: http://jsbin.com/seduseqici/edit?html,output

Include jquery & jquery ui and try this.
HTML
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
Inside script tag, try this.
<script>
$(function () {
var dateFormat = "mm/dd/yy",
from = $("#from")
.datepicker({
defaultDate: "+1w",
changeMonth: true,
})
.on("change", function () {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
})
.on("change", function () {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
</script>

Related

Is it possible to update unavailable days without destroy jquery datepicker

I have jQuery Datepicker with unavailable dates:
var disabledDates = ["23.05.2017", "24.05.2017"];
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disabledDates.indexOf(string) == -1];
}
});
The only way i found to update disabledDates was to destroy datepicker, update unavailable dates and re-init.
// Destroy
$("#datepicker").datepicker("destroy");
// Update unavailable times
disabledDates = ["23.05.2017", "24.05.2017", "25.05.2017", "26.05.2017"];
// Re-init
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disabledDates.indexOf(string) == -1];
}
});
Is there a other/better way to do it?
You don't need to destroy it, simply change the beforeShowDay property, see following please:
var disableddates = ["20-05-2017", "21-05-2017"];
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disableddates.indexOf(string) == -1];
}
$(function() {
$("#datepicker").datepicker({
beforeShowDay: DisableSpecificDates
});
});
$("#btn1").click(function(){
disableddates = ["01-05-2017", "02-05-2017"];
$("#datepicker").datepicker({
beforeShowDay: DisableSpecificDates
});
console.log("Disabled dates changed");
});
<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>
<p>Date: <input type="text" id="datepicker"></p>
<input type="button" id="btn1" value="Change dates">
I hope it helps you, bye.

Air Datepicker inline javascript for enabling date 15 days from newDate

I am using air datepicker for a form element and want to set the calendar to show dates which are 15 days from the current date and disabling selection of all previous dates.
However, I haven't been able to find a solution to this.
The following is the input field code so far:
<input type="text" data-date-format="dd-mm-yyyy" data-range="true" data-multiple-dates-separator=" - " data-language="en" data-startDate= newDate(+new Date + 12096e5) class="datepicker-here" name="Schedule">
Any help will be really appreciated.
Using jQuery UI
var dateToday = new Date();
var dates = $("#date").datepicker({
defaultDate: "+15",
changeMonth: true,
minDate: "+15",
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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<label for="from">From</label> <input type="text" id="date" name="from"/>
Using air Datepicker
set minDate while initializing datepicker
var dateToday = new Date();
var dates = $("#date").datepicker({
language: 'en',
minDate: getMinDate(15)
});
function getMinDate(days) {
var date = new Date();
date.setDate(date.getDate() + days);
return date;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.min.js"></script>
<label for="from">From</label> <input type="text" id="date" name="from"/>

JQuery Calender for DOB to reflect changes when month, year or date is changed

I have to use a JQuery Calendar control for Date Of Birth field and by default change in Calendar are reflect only when user selects the date, while i have been asked to make changes to reflect when either user selects month, date or year in the calendar control
CodePen
<input name="txtdob" id="txtDOB" class="rg-txt" hasDatepicker" placeholder="DD/MM/YYYY" type="text">
$(document).ready(function () {
// $(function () {
$("#txtdob").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: "-90:+0"
});
// });
});
Is there any property which i can set so that when ever user select date, month or year then same changes should reflect in the txtDOB input fields
UPDATED:
I did it like this
$(function () {
$("#txtDOB").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: "-90:+0",
onChangeMonthYear: function (y, m, i) {
var d = i.selectedDay;
$(this).datepicker('setDate', new Date(y, m - 1, d));
}
});
});
How about this solution. Hope it helps!
Here's an updated codepen: http://codepen.io/HenryGranados/pen/ObWaXX
$(function() {
var date = new Date();
var currentDay = date.getDate();
$("#txtdob").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-90:+0",
onChangeMonthYear: function(year, month, inst) {
$(this).val(currentDay + "/"+month + "/" + year);
}
});
});
.rg-txt{
width:200px;
margin:50px 200px;
}
<html>
<head>
<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>
</head>
<body>
<input name="txtdob" id="txtdob" class="rg-txt" hasDatepicker" placeholder="DD/MM/YYYY" type="text">
</body>
</html>

Invalid Date using moment.js and Pikaday

Im trying to pass a user selected date using Pikaday into a variable to be processed in a form using the following javascript, but my page is returning "Invalid Date".
<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
firstDay: 1,
minDate: moment().add({days: 20}).toDate(),
disableDayFn: function(date){// Disable Monday
return date.getDay() === 0 || date.getDay() === 6;
},
onSelect: function(date) {
field.value = moment(picker.toString()).format("MM/DD/YY");
}
});
var selecteddate = moment(picker.toString()).format("MM/DD/YY");
</script>
Can anyone see what I'm doing wrong here?
You put a new option "format" and change "onSelect":
Example
<html>
<head>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.js"></script>
</head>
<body>
<div>
<input type="text" id="datepicker">
<input type="text" id="datepicker2">
</div>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
firstDay: 1,
format:'MM/DD/YY',
minDate: moment().add({days: 20}).toDate(),
disableDayFn: function(date){// Disable Monday
return date.getDay() === 0 || date.getDay() === 6;
},
onSelect: function(date) {
this._o.field.value =this.getMoment().format("MM/DD/YY");
document.getElementById('datepicker2').value = picker.toString("MM/DD/YY");
}
});
var selecteddate = moment(picker.toString()).format("MM/DD/YY");
</script>
</body>
</html>

How to set date2>date1 in Jquery UI Datepicker?

Hi i want to select date of birth from first date picker. In second date picker pick dates only above date of birth.
http://jsfiddle.net/boopathirajan/6c3v5gna/2/
I added code here.
so help me how to pick date2>date1 only
html
<div class="wrapper">
<input type="text" value="" id="date1" name="dob">
<input type="text" value="" id="date2" name="vcc">
</div>
jquery
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0
});
Here is the solution for you.
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
onSelect: function(selected) {
$("#date2").datepicker("option","minDate", selected)
}
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
onSelect: function(selected) {
$("#date1").datepicker("option","maxDate", selected)
}
});
JSFIDLE
OR a different Approach
$(document).ready(function () {
$("#date1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#date1').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
}
});
$('#date2').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#date1').datepicker('getDate');
var dt2 = $('#date2').datepicker('getDate');
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#date2').datepicker('option', 'minDate');
$('#date2').datepicker('setDate', minDate);
}
}
});
});
Its working fine
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0,
onSelect: function (date) {
$('#date2').datepicker('option', 'minDate', date);
}
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
maxDate:0,
minDate:1,
});
DEMO

Categories