i need to highlight a disabled date from datepicker
what i have now is like this
the only available day is Tuesday, so i wanted to highlight the disabled day
this is my javascript
<script>
var idf = '';
var hari = '';
$('.divradio').hide();
$(".divradio input").prop('disabled','disabled');
function getIndex(data, id) {
var date = $('#' + data).datepicker('getDate');
var dayOfWeek = date.getDay();
$('.divradio').hide();
$(".radio" + idf + hari + " input").prop('checked', false);
// $(".radio" + idf + hari + " input").attr('disabled','disabled');
$('.radio' + id + dayOfWeek).show();
$(".radio" + id + dayOfWeek + " input").removeAttr('disabled');
idf = id;
hari = dayOfWeek;
// console.log(".radio" + idf + hari + " input");
};
</script>
what should i do to achieve that?
With jQuery UI you can use Theming with CSS to do this. Consider the following example.
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(dt) {
if (dt.getDay() == 2) {
return [true, ""];
} else {
return [false, ""];
}
}
});
});
.ui-datepicker-calendar .ui-datepicker-unselectable span {
background-color: yellow;
}
<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>
Date:
<div id="datepicker"></div>
Related
How can validation time picker min and max time selection?
I am creating a calendar date click showtime input and then I have to click add button to show dynamic rows time input fields so I can add validation one date-time range min and max time
var startDateTime = '09:30:20'
var dates = new Array();
var time = new Date();
function add30Min(oldTime) {
// var newDateTime = moment(oldTime, "HH:mm")
// .add(30, 'minutes')
// .format('HH:mm');
return oldTime;
}
function minus30Min(oldTime) {
// var newDateTime = moment(oldTime, "HH:mm")
// .subtract(30, 'minutes')
// .format('HH:mm');
return oldTime;
}
function checkTimeValidation(elm, date) {
}
// when start time change, update minimum for end timepicker
function tpStartSelect(time, endTimePickerInst) {
// $('#timepicker_end').timepicker('option', {
// minTime: {
// hour: endTimePickerInst.hours,
// minute: endTimePickerInst.minutes
// }
// });
}
// when end time change, update maximum for start timepicker
function tpEndSelect(time, startTimePickerInst) {
// $('#timepicker_start').timepicker('option', {
// maxTime: {
// hour: startTimePickerInst.hours,
// minute: startTimePickerInst.minutes
// }
// });
}
var myControl = {
create: function(tp_inst, obj, unit, val, min, max, step) {
$('<input class="ui-timepicker-input" value="' + val + '" style="width:50%">')
.appendTo(obj)
.spinner({
min: min,
max: max,
step: step,
change: function(e, ui) { // key events
// don't call if api was used and not key press
if (e.originalEvent !== undefined)
tp_inst._onTimeChange();
tp_inst._onSelectHandler();
},
spin: function(e, ui) { // spin events
tp_inst.control.value(tp_inst, obj, unit, ui.value);
tp_inst._onTimeChange();
tp_inst._onSelectHandler();
}
});
return obj;
},
options: function(tp_inst, obj, unit, opts, val) {
if (typeof(opts) == 'string' && val !== undefined)
return obj.find('.ui-timepicker-input').spinner(opts, val);
return obj.find('.ui-timepicker-input').spinner(opts);
},
value: function(tp_inst, obj, unit, val) {
if (val !== undefined)
return obj.find('.ui-timepicker-input').spinner('value', val);
return obj.find('.ui-timepicker-input').spinner('value');
}
};
function setDefaultTime(time) {
console.log('Selected Time is:' + time)
}
function setTimePickerDynamic() {
$('.start_event_time_picker').timepicker({
dateFormat: '',
timeFormat: 'HH:mm',
datepicker: false,
controlType: myControl,
ampm: true,
dropdown: true,
onClose: function(dateText, $i) {
var id = $(this).attr('id');
var endTimeId = $('#' + id).parents('.divTime').find('.end_event_time_picker').attr('id');
var startDateTextBox = $('#' + endTimeId);
// if(startDateTextBox.val() != '') {
// var testStartDate = new Date(startDateTextBox.val());
// var testEndDate = new Date(dateText);
// if(testStartDate > testEndDate){
// startDateTextBox.val(add30Min(dateText));
// }
// } else {
// startDateTextBox.val(add30Min(dateText));
// }
},
onSelect: function(dateText, el) {
tpStartSelect();
var id = $(this).attr('id');
var element = $(this),
text;
// get access to this Timepicker instance
var timepicker = element.timepicker();
text = timepicker.format(dateText);
$('#' + id).parents('.divTime').find('.end_event_time_picker').timepicker('option', {
'minTime': text,
'timeFormat': 'HH:mm'
});
setDefaultTime(dateText);
// var this=$(this);
// checkTimeValidation(this, dateText);
},
beforeShow: function(dateText) {
var id = $(this).attr('id');
var split_id = id.split("_");
var firstIndex = parseInt(split_id[3]);
var secondIndex = parseInt(split_id[4]);
var elm = $(this);
// checkTimeValidation(elm, dateText);
},
}).attr('readonly', 'readonly');
$('.end_event_time_picker').timepicker({
dateFormat: '',
timeFormat: 'HH:mm',
datepicker: false,
controlType: myControl,
ampm: true,
onClose: function(dateText, $i) {
var id = $(this).attr('id');
var endTimeId = $('#' + id).parents('.divTime').find('.start_event_time_picker').attr('id');
var startDateTextBox = $('#' + endTimeId);
// if(startDateTextBox.val() != '') {
// var testStartDate = new Date(startDateTextBox.val());
// var testEndDate = new Date(dateText);
// if(testStartDate > testEndDate){
// startDateTextBox.val(minus30Min(dateText));
// }
// } else {
// startDateTextBox.val(minus30Min(dateText));
// }
},
onSelect: function(dateText, el) {
var id = $(this).attr('id');
console.log($('#' + id).parents('.divTime').find('.start_event_time_picker').val());
console.log(dateText);
var timepicker = element.timepicker();
text = timepicker.format(dateText);
$('#' + id).parents('.divTime').find('.start_event_time_picker').timepicker('option', {
'maxTime': text,
'timeFormat': 'HH:mm'
});
},
beforeShow: function(dateText) {
var id = $(this).attr('id');
var split_id = id.split("_");
var firstIndex = parseInt(split_id[3]);
var secondIndex = parseInt(split_id[4]);
}
}).attr('readonly', 'readonly');
}
function addDate(date) {
if ($.inArray(date, dates) < 0) dates.push(date);
}
function removeDate(index, date) {
$(".div" + date).remove();
dates.splice($.inArray(date, dates), 1);
}
function printArray(date) {
var printArr = new String;
var j = 0;
dates.forEach(function(val, i) {
var id = $("#event_dates" + val);
if (id.length == 0) {
++j;
printArr += '<div class="dynamicDivDate mb-4 div' + val + '" id="div_' + (i) + '"><div class="row mt-2 mb-2"><div class="col-md-5"><p>event_dates_times[scheduling_date_' + i + '][date]</p><input class="form-control" id="event_dates' + val + '" type="text" required="required" readonly="readonly" name="event_dates_times[scheduling_date_' + i + '][date]" value=' + val + '></div></div>' + '<div class="dynamicAddRemoveMain divTime row" id="dynamicTime_' + j + '"><div class="col-md-5"><input id="start_event_time_' + (j) + '_' + (j + i) + '" type="text" required class="form-control start_event_time_picker" autocomplete="off" placeholder="Select start Time" name="event_dates_times[scheduling_date_' + i + '][time][scheduling_time_' + (j) + '][start_time]"></div>' + '<div class="col-md-5"><input id="end_event_time_' + (j) + '_' + (j + i) + '" type="text" class="form-control end_event_time_picker" required autocomplete="off" placeholder="Select end Time" name="event_dates_times[scheduling_date_' + i + '][time][scheduling_time_' + (j) + '][end_time]"></div><div class=" col-lg-2 col-md-2 col-sm-2 col-2"><button type="button" name="add" id="add-btn-date" required class="btn_add_mtinput_time"><i class="fas fa-plus"></i></button></div></div></div>';
}
});
$('#show_calender_div').append(printArr);
setTimePickerDynamic();
}
// Adds a date if we don't have it yet, else remove it
function addOrRemoveDate(date) {
var index = $.inArray(date, dates);
if (index >= 0) {
removeDate(index, date);
} else {
addDate(date);
printArray(date);
}
}
// Takes a 1-digit number and inserts a zero before it
function padNumber(number) {
var ret = new String(number);
if (ret.length == 1) ret = "0" + ret;
return ret;
}
$("#mdp-demo").multiDatesPicker({
dateFormat: 'dd-mm-yy',
maxPicks: 5,
minDate: 0,
onSelect: function(dateText) {
addOrRemoveDate(dateText);
},
beforeShowDay: function(date) {
var year = date.getFullYear();
// months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009"
var month = padNumber(date.getMonth() + 1);
var day = padNumber(date.getDate());
// This depends on the datepicker's date format
var dateString = month + "-" + day + "-" + year;
var gotDate = $.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
$(document).on('click', '.btn_add_mtinput_time', function() {
// $(".btn_add_mtinput").click(function(e){
var max = 3;
var total = $(this).parents(".dynamicDivDate").children('.divTime').length;
var lastid = $(this).parents(".dynamicDivDate").children(".divTime:last").attr("id");
var checkinput = $(this).parents(".dynamicDivDate").children(".divTime:last");
if (checkinput.find('.start_event_time_picker').val() == '' || checkinput.find('.end_event_time_picker').val() == '') {
// alert('Please select time then add new fields');
// return false;
}
var split_id = lastid.split("_");
var nextindex = Number(split_id[1]) + 1;
// console.log($(this).parents(".dynamicAddRemoveMain").siblings('.divTime').length);
if (total < max) {
var id = $(this).parents(".dynamicAddRemoveMain").parents('.dynamicDivDate').attr('id');
var split_id = id.split("_");
var getindex = parseInt(split_id[1]) + 1;
$(this).parents(".dynamicAddRemoveMain").parents('.dynamicDivDate').append('<div class="row mt-2 mb-2 divTime" id="dynamicTime_' + nextindex + '"><div class="col-lg-5 col-md-5 col-sm-5 col-5"><input id="start_event_time_' + getindex + '_' + (nextindex) + '" type="text" class="form-control start_event_time_picker" required autocomplete="off" placeholder="Select start Time" name="event_dates_times[scheduling_date_' + split_id[1] + '][time][scheduling_time_' + (nextindex) + '][start_time]"></div>' + '<div class="col-lg-5 col-md-5 col-sm-5 col-5"><input id="end_event_time_' + getindex + '_' + (getindex) + '" type="text" required class="form-control end_event_time_picker" autocomplete="off" placeholder="Select end Time" name="event_dates_times[scheduling_date_' + split_id[1] + '][time][scheduling_time_' + (nextindex) + '][end_time]"></div><div class="col-lg-2 col-md-2 col-sm-2 col-2"><button type="button" class="btn_remove_mtinput btn_remove_mtinput_time"><i class="far fa-trash-alt"></i></button></div></div>');
setTimePickerDynamic();
} else {
alert("Maximum limit 3");
}
});
$(document).on('click', '.btn_remove_mtinput_time', function() {
$(this).parents('.divTime').remove();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script>
<div id="mdp-demo"></div>
<div id="show_calender_div"></div>
This calendar multiple dates selected then show the new rows with input start and end time. then click the add button show new row for selected date start time and end time how can validation start time and end time every new row and previous rows.
im using jquery calendar from here it basically change the background color of the disabled dates in red
<input id="iDate">
<script>
var unavailableDates = ["09-10-2018", "14-09-2018", "15-10-2018"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$("#iDate").datepicker({
dateFormat: 'd-m-yy',
beforeShowDay: unavailable
});
});
</script>
as you can see i have 3 disabled dates, the "09-10-2018" and "14-09-2018" does not disable in my calendar because of the leading zeros of day and month but when i try to remove the zeros of the day and month its working.
i also look in here but i dont undestand
by the way the unavailaDates are coming from database so its not hardcoded thats why it generate leading zeros in day and month.
i appreciate whoever help me.
im a beginner
sorry for bad english
The issue is that date.getDate() and date.getMonth() return integers, which cannot have leading zeros, therefore there will never be a match.
Simple fix, create a function:
function pad(num) {
var s = "" + num;
if ( num < 10 ) {
s = "0" + num;
}
return s;
}
Then do:
dmy = pad(date.getDate()) + "-" + pad(date.getMonth() + 1) +
"-" + date.getFullYear();
You can use padStart and compare both formats:
var unavailableDates = ["01-10-2018", "2-10-2018", "13-10-2018"];
function unavailable(date) {
var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
var dmy2 = ((date.getDate()+'').padStart(2,'0')) + "-" + (((date.getMonth() + 1)+'').padStart(2,'0')) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1 && $.inArray(dmy2, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$("#iDate").datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay: unavailable
});
});
.ui-datepicker td.ui-state-disabled>span{background:#c30;}
.ui-datepicker td.ui-state-disabled{opacity:100;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/black-tie/jquery-ui.css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script>
<input id="iDate">
I think #Bryanh maybe on to something.
But direct answer to your question is:
let d = '09-10-2018';
let newD = d.split('-').map(n=>{
return parseInt(n)
}).join('-')
console.log(newD);
I'm trying to write a web page which tells user to input a date of booking, this input field has jQuery calender. I've also successfully disable specific dates so no 2 users book a same date.
My question is how can I read a file from server, get Dates, process and disable them in jQuery calender? Or is there a way to send data from PHP to JavaScript? JSFiddle. Here is my code:
var eventDates = ["28/1/2018", "27/1/2018", "2/2/2018"];
$(function() {
$("#iDate").datepicker({
beforeShowDay : function(date) {
var disDate = date.getDate();
var disMonth = date.getMonth();
var disYear = date.getFullYear();
var formattedDate = disDate + "/" + (disMonth + 1) + "/" + disYear;
if ($.inArray(formattedDate, eventDates) != -1) {
return[false]
} else {
return[true]
}
}
});
});
<html>
<head>
<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
Date: <input id="iDate">
</body>
</html>
Make an ajax request like below, that php service will return disabled dates.
$.get('your_file.php').done(function(eventDates){
$("#iDate").datepicker({
beforeShowDay : function(date) {
var disDate = date.getDate();
var disMonth = date.getMonth();
var disYear = date.getFullYear();
var formattedDate = disDate + "/" + (disMonth + 1) + "/" + disYear;
if ($.inArray(formattedDate, eventDates) != -1) {
return[false]
} else {
return[true]
}
}
});
});
or directly print out your array into html output like below:
<?php
$disabledDates = array("2012-01-01", "2012-02-02");
?>
<script type="text/javascript">
var eventDates = <?php echo json_encode($disabledDates); ?>
$("#iDate").datepicker({
beforeShowDay : function(date) {
var disDate = date.getDate();
var disMonth = date.getMonth();
var disYear = date.getFullYear();
var formattedDate = disDate + "/" + (disMonth + 1) + "/" + disYear;
if ($.inArray(formattedDate, eventDates) != -1) {
return[false]
} else {
return[true]
}
}
});
</script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Try It</title>
<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>
<script type="text/javascript">
var dates = new Array();
function addDates(date) {
if (dates.length > 0) {
dates = [];
}
if (jQuery.inArray(date, dates) < 0){
var i;
var month = date.getMonth()+1;
var day = date.getDate();
var year = date.getFullYear();
for (i=1;i<14;i++){
var value = month + '/' + day + '/' + year;
var dateIsValid = isDate(value);
if (dateIsValid == true) {
day++;
dates.push(value);
} else {
if (month == 12) {
month = 0;
year = year + 1;
day = 0;
}
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
}
console.log(dateIsValid);
console.log(dates);
}
}
}
function isDate(val) {
var date = new Date(val);
return !isNaN(date.valueOf());
}
jQuery(function () {
jQuery("#datepicker").datepicker({
autoclose: false,
onSelect: function (dateText, inst) {
var date = new Date($(this).datepicker('getDate'));
addDates(date);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
I've created a script where it highlights the next 14 days then it checks if the date is valid or not. If Not it will change the date.
Problem is:
When i select the date October 31, 2017
the array should look like this
10/31/2017, 11/1/2017, 11/2/2017,...
But the array returns:
10/31/2017, 11/1/2017, 11/1/2017, 11/2/2017, ...
thanks in advance
Here is the solution using moment.js , it is very easy , you don't need to use that complicated coding which you have. It is add a 14 days in selected date.Moment.js is automatically handle the month change , year change etc , so you don't need that extra conditions which is for change month,year,date etc.
var dates = new Array();
function addDa(date){
dates = [];
var selected_date = moment(date);
var last_date = moment(date).add(14, 'days');
for (var dat=selected_date; dat <= last_date; dat.add(1, 'days'))
{
dates.push(dat.format('MM/DD/YYYY'));
}
console.log(dates);
}
jQuery(function () {
jQuery("#datepicker").datepicker({
autoclose: false,
onSelect: function (dateText, inst) {
var date = new Date($(this).datepicker('getDate'));
addDa(date);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.0/moment.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Try It</title>
<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>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
error in :
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
you pushed value : 11/1/2017 to datas.
then day=1, month=11 :
var value = month + '/' + day + '/' + year;
var dateIsValid = isDate(value);
if (dateIsValid == true) {
day++;
dates.push(value);
}
you push again value : 11/1/2017 . you can add day++ to
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
day++;
same as below :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Try It</title>
<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>
<script type="text/javascript">
var dates = new Array();
function addDates(date) {
if (dates.length > 0) {
dates = [];
}
if (jQuery.inArray(date, dates) < 0){
var i;
var month = date.getMonth()+1;
var day = date.getDate();
var year = date.getFullYear();
for (i=1;i<14;i++){
var value = month + '/' + day + '/' + year;
var dateIsValid = isDate(value);
if (dateIsValid == true) {
day++;
dates.push(value);
} else {
if (month == 12) {
month = 0;
year = year + 1;
day = 0;
}
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
day++;
}
console.log(dateIsValid);
console.log(dates);
}
}
}
function isDate(val) {
var date = new Date(val);
return !isNaN(date.valueOf());
}
jQuery(function () {
jQuery("#datepicker").datepicker({
autoclose: false,
onSelect: function (dateText, inst) {
var date = new Date($(this).datepicker('getDate'));
addDates(date);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
Btw found a solution adding a day++ after pushing it when the date is not valid :)
I have a datepicker. I want to increment the date by 1 day as mouse wheel up is fired and decrement the date by 1 day as mouse wheel down is fired (upto the minimum possible date).
Below is my code snippet:
HTML
<input type="text" id="txtFromDate" class="calender"/>
JS
$(document).ready(function(){
$("#txtFromDate").datepicker({
minDate: new Date()
});
$("#txtFromDate").datepicker("setDate", new Date()); });
$('.calender').bind('mousewheel DOMMouseScroll', function (event) {
$id = $(this).attr('id');
$minDate = $('#' + $id).datepicker("option", "minDate");
$minDate = ($minDate.getMonth() + 1) + "/" + $minDate.getDate() + "/" + $minDate.getFullYear();
$datePickerDate = $('#' + $id).datepicker("getDate");
$datePickerDate = ($datePickerDate.getMonth() + 1) + "/" + $datePickerDate.getDate() + "/" + $datePickerDate.getFullYear();
var days = parseInt("1", 10);
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
$datePickerDate = new Date($datePickerDate);
$datePickerDate = $datePickerDate.setDate($datePickerDate.getDate() + days);
}
else {
if ($datePickerDate >= $minDate && $('#' + $id ).val() != "") {
$datePickerDate = new Date($datePickerDate);
$datePickerDate = $datePickerDate.setDate($datePickerDate.getDate() - days);
}
}
alert($datePickerDate);
$('#' + $id).val($datePickerDate);
$('#' + $id).datepicker("setDate", $datePickerDate);
});
But the $datePickerDate value is coming to be as 1464028200000.
Here is the Non-Working Demo
What am I doing wrong?