We Keep Coding

Jquery- How to set the date before today can't be select?

I able to make today date appear at the check-in date, but the problem is the user still be able to choose the date before today date. Is that any solution can allow me to solve his problem? Any suggestion will be a great help, thanks !
$(function () {
$("#chkI").datepicker({
dateFormat: "yy-mm-dd", showAnim: "slideDown",
onClose: function (selectedDate) {
var minDate = $(this).datepicker('getDate');
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$("#chkO").datepicker("option", "minDate", newMin);
}
});
var currentDate = new Date();
$("#chkI").datepicker("setDate", currentDate);
$("#chkO").datepicker({ dateFormat: "yy-mm-dd", showAnim: "slideDown",
onClose: function (selectedDate) {
var maxDate = $(this).datepicker('getDate');
var newMax = new Date(maxDate.setDate(maxDate.getDate() - 1));
$("#chkI").datepicker("option", "maxDate", newMax);
}
});
});

This is how I disable dates before today :
$("#chkI").datepicker({
minDate: new Date()
});
e.g. jsfiddle

You just need to set minDate and don't initialize datepicker again for same input
$(function () {
$("#chkI").datepicker({
minDate: new Date(), // start date should be today's date
dateFormat: "yy-mm-dd", showAnim: "slideDown",
onClose: function (selectedDate) {
var minDate = $(this).datepicker('getDate');
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$("#chkO").datepicker("option", "minDate", newMin);
}
}).datepicker("setDate", new Date()); // select today's date by default
//var currentDate = new Date();
//$("#chkI").datepicker("setDate", currentDate);
$("#chkO").datepicker({ dateFormat: "yy-mm-dd", showAnim: "slideDown",
onClose: function (selectedDate) {
var maxDate = $(this).datepicker('getDate');
var newMax = new Date(maxDate.setDate(maxDate.getDate() - 1));
$("#chkI").datepicker("option", "maxDate", newMax);
}
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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="chkI">
<input type="text" id="chk0">

Date-Picker and Time-Picker Query

In PHP I have a two textbox, one for date-picker and second for time-picker.
In this, If I select today's date at 2 PM then in 2nd timepicker textbox disable time before 2PM in PHP.
Any help would be appreciated.

For Time picker ::
$('#startTime').timepicker({
'minTime': '6:00am',
'maxTime': '11:30pm',
'onSelect': function () {
$('#endTime').timepicker('option', 'minTime', $(this).val());
}
});
For Date Picker :
$(document).ready(function () {
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#dt1').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#dt2').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
$('#dt2').datepicker('option', 'minDate', date2);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#dt1').datepicker('getDate');
var dt2 = $('#dt2').datepicker('getDate');
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#dt2').datepicker('option', 'minDate');
$('#dt2').datepicker('setDate', minDate);
}
}
});
});

jQuery Date picker to only select mondays

I have the following jQuery which gives me the current date and the populates the enddate 7 days from the selected date. I would like for the user to only be able to select mondays from the datepicker. Can this be done the way in which I have my code?
$(document).ready(function () {
$("#WeekCommencing").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
// MondayOnly: function(date){ return[(date.getDate() == 1),""];},
onSelect: function (date) {
var date2 = $('#WeekCommencing').datepicker('getDate');
date2.setDate(date2.getDate() + 7);
$('#WeekEnding').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
$('#WeekEnding').datepicker('option', 'minDate', date2);
}
});
$('#WeekEnding').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#WeekCommencing').datepicker('getDate');
console.log(dt1);
var dt2 = $('#WeekEnding').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = $('#WeekEnding').datepicker('option', 'minDate');
$('#WeekEnding').datepicker('setDate', minDate);
}
}
});
});

You should add as function name beforeShowDay
beforeShowDay : function(date){ return[(date.getDay() == 1),""];}, //Monday Only Function
and that should work.

How can I prevent users making a booking though disabled dates in jQuery UI Date Pickers?

I am using two jQuery date pickers so that a user can book something, upon both date pickers being selected a button called request is displayed. Does anybody know how I could prevent someone trying to make a booking through disabled days by not showing the request button and instead showing an error message? i.e if from 13th March is selected then the request button is not shown whenever the to date is 15th march as 14th March is disabled.
Hope that makes sense.
The disabled days are being called from my database and being stored in a JavaScript variable called bookedDays.
The JavaScript code I am using is below:
$(document).ready(function() {
$('#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){
if (borrowercogs >= (y)) {
$('#request').show();
} else {
$('#request').hide();
$('.days').html('You have chosen to borrow this item for <b>'+ days + '</b> days at a cost of <b>' + y + '</b> cogs.<br/><i style=color:red>You do not have enough cogs to borrow for this duration.</i><br/>');
}
}
$('#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));
}
});
Any help would be appreciated. Thanks

UPDATED
JSFIDDLE
var array = ["2015-03-14","2015-03-15","2015-03-16"]
var _selectedDay = "";
var _cascadeDisabled = false;
$('#from').datepicker({
beforeShowDay: function(date) {
var _date = jQuery.datepicker.formatDate('yy-mm-dd', date);
var _isDisabledDate = array.indexOf(_date) != -1;
return [ array.indexOf(_date) == -1 ]
},
onClose: function(dateStr, event) {
_selectedDay = dateStr;
}
});
$('#to').datepicker({
beforeShowDay: function(date) {
var _date = jQuery.datepicker.formatDate('yy-mm-dd', date);
var _isDisabledDate = array.indexOf(_date) != -1;
if(_selectedDay.length && _isDisabledDate
&& _selectedDay < _date) {
_cascadeDisabled = true;
}
if(_cascadeDisabled) return false;
return [ array.indexOf(_date) == -1 ]
},
onClose: function(dateStr, event) {
_cascadeDisabled = false;
}
});
$("#clear").click(function() {
$("input[type='text']").val("");
});
As you can see, what we're doing here is setting a global variable with the "FROM" datepicker, and then in the "TO" datepicker, we loop through until we hit a disabled date, from then on forward we set the global variable "cascade" to cascade all the future dates to be disabled, effectively making it impossible to book a range of dates that includes a disabled date.

Show element only when conditions are met using jQuery UI date picker

I am fairly new to JavaScript and have came up with the below code from following a few tutorials to add from and to jQuery UI datepickers to my website.
However one thing I need to do is - If the date from in the from datepicker to the date in the to datepicker field contains any of the dates from the disabled dates (bookedDays) variable, do not show the #request button. At the minute the request button is hidden on the page load and is shown when the datepicker have been populated.
$('#request').show();
Hope that makes sense, let me know if you need any more info.
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));
}
});