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">

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.

Passing two JQuery Datepicker variables through html form to PHP variables?

I have a JQuery Datepicker modified to select week range based on day selected by user, and to submit an HTML form named "weekDate" onSelect:
$(document).ready(function()
{
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
},
onSelect : function(){
$('#weekDate').submit();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
Then I have an HTML form named "weekDate" to catch the startDate and endDate values when the onSelect Datepicker function is triggered when the user selects a date:
<form id="weekDate" name="weekDate" action="~" method="post">
<input type="hidden" id="startDate" name="startDate" class="week-picker" />
<input type="hidden" id="endDate" name="endDate" class="week-picker" />
</form>
Then I have a PHP page hopefully catching the values of #startDate and #endDate as POST variables:
$UpWeekStart = $_POST['startDate'];
$UpWeekEnd = $_POST['endDate'];
My issue:
When I try to echo $UpWeekStart and $UpWeekEnd, blank is outputted. Please help.

You need to change .text() for .val()
$('#startDate').val();

JQuery date time picker add 5 hours for current time

I need two datetime pickers. In the first picker I need current date and time and in another picker I want to add 5 hours from current time. I tired with below code in jsfiddle. First picker working but second not working properly.
$(function() {
$('#datepicker').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datepicker').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var d = new Date();
// for now
datetext=datetext+" "+d.setHours(d.getHours())+": "+d.setMinutes(d.getMinutes());`enter code here`
$('#datepicker1').val(datetext);
},
});
});

Added 5 hour to current time
var d1 = new Date (),
var d2 = new Date ( d1 );
var addedhour=d2.setHours ( d1.getHours() + 5 )

I have modified your code to add 5 hours from current time. Have a look at it :)
$(function() {
$('#datepicker').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datepicker').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var d = new Date();
d.setHours(d.getHours() + 5)
// for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datepicker1').val(datetext);
},
});
});

this code is working
$(function() {
$('#datetimepicker').datepicker({
dateFormat: 'mm-dd-yy',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datetimepicker').val(datetext);
},
});
});
$(function() {
$('#datetimepicker1').datepicker({
dateFormat: 'mm-dd-yy',
onSelect: function(datetext){
var d1 = new Date();
var d2 = new Date( d1 );
var addedhour=d2.setHours (d1.getHours()+5)
// for now
datetext=datetext+" "+d2.getHours()+": "+d2.getMinutes();
$('#datetimepicker1').val(datetext);
},
});
});

Try This Code,
$(function() {
$('#datepicker').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datepicker').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var date2 = new Date();
date2.setHours(date2.getHours()+5);
$('#datepicker1').val(date2);
},
});
});

Disable JQuery datepicker dates by picking a date from another datepicker

2 datepickers fromdate and todate
My requirement is to select a fromdate and the todate should not be more than 30 days from the selected fromdate, so when I pick a fromdate it should only enable next 30 days in todate datepicker.
i tried to implement this facility to these datepickers but not working
//from date
$("#txtTFromDateTeacherDailyReport").datepicker(
{
changeMonth : true,
changeYear : true,
dateFormat : "dd/mm/yy",
maxDate : '0',
beforeShow : function() {
jQuery(this).datepicker(
'option',
'maxDate',jQuery('#txtTToDateTeacherDailyReport').val());
},
}).datepicker("setDate", "0");
//to date
$("#txtTToDateTeacherDailyReport").datepicker(
{
changeMonth : true,
changeYear : true,
dateFormat : "dd/mm/yy",
maxDate :'0',
beforeShow : function() {
jQuery(this).datepicker(
'option',
'minDate',
jQuery( '#txtTFromDateTeacherDailyReport').val());
},
}).datepicker("setDate", "0");
Please help me to get rid of this.

jQuery Datepicker - Force range from selected date
http://codepen.io/anon/pen/vENJWd
// From Datepicker
$( "#from" ).datepicker({
defaultDate: "+1d",
changeMonth: false,
numberOfMonths: 1,
minDate: "+1d",
onClose: function(selectedDate) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
// Change value of second parameter for your needs
// 7 = One Week, 14 = Two Weeks, etc
$( "#to" ).datepicker( "option", "maxDate", new_date(selectedDate, 30) );
}
});
// To Datepicker
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1
});
// Do not edit below this line
function new_date(old_date, days_after) {
var month = parseInt(old_date.substring(0, 2))-1;
var day = parseInt(old_date.substring(3, 5));
var year = parseInt(old_date.substring(6, 10));
var myDate = new Date(year, month, day);
myDate.setDate(myDate.getDate() + days_after);
var newMonth = myDate.getMonth()+1;
var newDay = myDate.getDate();
var newYear = myDate.getFullYear();
var output = newMonth + "/" + newDay + "/" + newYear;
return output;
}
// Created By: Rafael Leonidas Cepeda

I think this will work for you...
$(function () {
$("#datepicker1, #datepicker2").datepicker();
$("#datepicker1").datepicker("option", "onSelect", function (dateText, inst) {
var date1 = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
var date2 = new Date(date1.getTime());
date2.setDate(date2.getDate() + 30);
$("#datepicker2").datepicker("setDate", date2);
});
});
html
<p>Date1: <input type="text" id="datepicker1" /></p>
<p>Date2: <input type="text" id="datepicker2" /></p>