I have the Calendar dates setup, i have two input fields and both carry dates and input fields values are coming Like this
I have the following Js code
var picker1 = $('#gameDate2').pickadate({
format: 'mm/dd/yyyy',
selectYears: true,
selectMonths: true,
selectYears: true,
selectMonths: true,
disable: [
true,
[2023, 11, 23],
[2023, 11, 23],
[2023, 11, 23],
[2023, 11, 23],
[2023, 11, 24],
[2023, 11, 24],
[2023, 11, 24],
[2023, 11, 24],
[2023, 11, 25],
[2023, 11, 25],
[2023, 11, 25],
[2023, 11, 25],
[2023, 11, 26],
[2023, 11, 26],
[2023, 11, 26],
[2023, 11, 26],
[2023, 11, 26],
[2023, 11, 27],
[2023, 11, 27],
[2023, 11, 27],
[2023, 11, 27],
[2023, 11, 27],
[2023, 2, 21],
[2023, 3, 21],
[2023, 3, 21],
[2023, 3, 21],
[2023, 3, 22],
[2023, 4, 1],
[2023, 4, 12],
[2023, 4, 21],
[2023, 4, 21],
[2023, 4, 21],
[2023, 4, 21]
],
'min': "12/23/2023",
'max': "05/21/2024",
klass: {
infocus: 'picker__day--enabled',
highlighted: 'picker__day--outfocus'
},
today: '',
clear: '',
close: '',
onSet: function(event) {
var selectedDate = event.select;
if (selectedDate === undefined) {
selectedDate = Date.now();
}
if (typeof selectedDate == "number") {
selectedDate = unixDateTOString(selectedDate);
}
$.ajax({
url: 'schedule_getgame.cfm?gamedate=' + selectedDate + '&clientID=' + '1111',
success: function(data) {
if (data.length > 0) {
var $jsonObject = $.parseJSON(data);
$gameSelect.html('');
if ($jsonObject.length === 0) {
$gameSelect.prop("disabled", true);
$color.css('display', 'none');
} else {
$gameSelect.prop("disabled", false);
$color.css('display', 'inline-block');
$gameSelect.append('<option value="">Please select Game ......</option>');
$.each($jsonObject, function(index, item) {
if (typeof gameIdJs !== 'undefined' && gameIdJs == item.gameID) {
$gameSelect.append("<option selected value='" + item.gameID + "-" + item.clientID + "-" + item.gameNumber + "-" + item.gameDate + "-" + item.gameTime + "-" + item.homeTeam + "-" + item.awayTeam + "'>" + 'Game ' + item.gameNumber + " on " + item.gameDate + " at " + item.gameTime + " between " + item.homeTeam + " and " + item.awayTeam + "</option>");
} else {
$gameSelect.append("<option value='" + item.gameID + "-" + item.clientID + "-" + item.gameNumber + "-" + item.gameDate + "-" + item.gameTime + "-" + item.homeTeam + "-" + item.awayTeam + "'>" + 'Game ' + item.gameNumber + " on " + item.gameDate + " at " + item.gameTime + " between " + item.homeTeam + " and " + item.awayTeam + "</option>");
}
})
}
}
}
});
}
}).pickadate('picker');
if (gameDateJs !== 0) {
$('#gameDate2').val(gameDateJs);
picker1.set('select', gameDateJs, {
format: 'mm/dd/yyyy'
});
}
var picker2 = $('#gameDate3').pickadate({
format: 'mm/dd/yyyy',
selectYears: true,
selectMonths: true,
selectYears: true,
selectMonths: true,
disable: [
true,
[2023, 11, 23],
[2023, 11, 23],
[2023, 11, 23],
[2023, 11, 23],
[2023, 11, 24],
[2023, 11, 24],
[2023, 11, 24],
[2023, 11, 24],
[2023, 11, 25],
[2023, 11, 25],
[2023, 11, 25],
[2023, 11, 25],
[2023, 11, 26],
[2023, 11, 26],
[2023, 11, 26],
[2023, 11, 26],
[2023, 11, 26],
[2023, 11, 27],
[2023, 11, 27],
[2023, 11, 27],
[2023, 11, 27],
[2023, 11, 27],
[2024, 2, 21],
[2024, 3, 21],
[2024, 3, 21],
[2024, 3, 21],
[2024, 3, 22],
[2024, 4, 1],
[2024, 4, 12],
[2024, 4, 21],
[2024, 4, 21],
[2024, 4, 21],
[2024, 4, 21]
],
'min': "12/23/2023",
'max': "05/21/2024",
klass: {
infocus: 'picker__day--enabled',
highlighted: 'picker__day--outfocus'
},
today: '',
clear: '',
close: '',
onSet: function(event) {
var selectedDate = event.select;
if (selectedDate === undefined) {
selectedDate = Date.now();
}
if (typeof selectedDate == "number") {
selectedDate = unixDateTOString(selectedDate);
}
$.ajax({
url: 'schedule_getgame.cfm?gamedate=' + selectedDate + '&clientID=' + '1111',
success: function(data) {
if (data.length > 0) {
var $jsonObject = $.parseJSON(data);
$gameSelectAway.html('');
if ($jsonObject.length === 0) {
$gameSelectAway.prop("disabled", true);
$color1.css('display', 'none');
} else {
$gameSelectAway.prop("disabled", false);
$color1.css('display', 'inline-block');
$gameSelectAway.append('<option value="">Please select Game ......</option>');
$.each($jsonObject, function(index, item) {
if (typeof gameIdJsAway !== 'undefined' && gameIdJsAway == item.gameID) {
$gameSelectAway.append("<option selected value='" + item.gameID + "-" + item.clientID + "-" + item.gameNumber + "-" + item.gameDate + "-" + item.gameTime + "-" + item.homeTeam + "-" + item.awayTeam + "'>" + 'Game ' + item.gameNumber + " on " + item.gameDate + " at " + item.gameTime + " between " + item.homeTeam + " and " + item.awayTeam + "</option>");
} else {
$gameSelectAway.append("<option value='" + item.gameID + "-" + item.clientID + "-" + item.gameNumber + "-" + item.gameDate + "-" + item.gameTime + "-" + item.homeTeam + "-" + item.awayTeam + "'>" + 'Game ' + item.gameNumber + " on " + item.gameDate + " at " + item.gameTime + " between " + item.homeTeam + " and " + item.awayTeam + "</option>");
}
})
}
}
}
});
}
}).pickadate('picker');
if (gameDateJsAway !== 0) {
picker2.set('select', gameDateJsAway, {
format: 'mm/dd/yyyy'
});
}
function unixDateTOString(unix_timestamp) {
var dateObj = new Date(unix_timestamp);
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var year = dateObj.getFullYear();
var month = dateObj.getMonth() + 1;
var date = dateObj.getDate();
var formattedTime = date + '/' + month + '/' + year;
return formattedTime;
}
now it works but what hapens is, when i select the date and from the dropdown it shows dec 2023 but 27 selected and in the second calendar dropdown using piakdate it shows a totaly different date
i am getting lost in this code what is going wrong here
code is updated as above