I have a 3 Input fields, 1st to select a movie, 2nd to select a date (the date changes accordingly with the movie selected) and the 3rd to select the running time. the 3rd field should get updated only if both previous fields are filled. With my current js code, I have an if statement to check the selected movie and date.
For example if Avengers Endgame and A wednesday is selected it should show 9PM and if Avengers endgame and a saturday is selected it should show 6PM. (Only added those for now)
The issue is, after initially selecting endgame and a wednesday, it does show 9PM, but if I change the date subsequently, to a saturday it does not update, so does changing to a different movie.
Any help is appreciated.
Thanks a lot.
HTML
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<h4></h4>
<select class="form-control" id='selectTime' name='selectTime'>
</select>
</>
CSS
.form-control {
width: auto;
}
/* <!-- Datepicker --> */
label {
margin-left: 20px;
}
#datepicker {
width: 180px;
margin: 0 20px 20px 20px;
}
#datepicker > span:hover {
cursor: pointer;
}
/* Animated Border */
#box {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 200px;
color: black;
font-family: "Raleway";
font-size: 2.5rem;
}
.gradient-border {
--borderWidth: 3px;
background: white;
position: relative;
border-radius: var(--borderWidth);
}
.gradient-border:after {
content: "";
position: absolute;
top: calc(-1 * var(--borderWidth));
left: calc(-1 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 2);
width: calc(100% + var(--borderWidth) * 2);
background: linear-gradient(
60deg,
#f79533,
#f37055,
#ef4e7b,
#a166ab,
#5073b8,
#1098ad,
#07b39b,
#6fba82
);
border-radius: calc(2 * var(--borderWidth));
z-index: -1;
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
}
@keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
h1 {
width: auto;
margin-top: -5.3em;
margin-left: -3em;
background: white;
}
.container-box {
display: flex;
flex-wrap: wrap;
}
JS
// ----Date----
var date = new Date();
date.setDate(date.getDate());
$(function() {
$("#datepicker")
.datepicker({
startDate: date,
autoclose: true,
todayHighlight: true
})
.datepicker("update", new Date());
});
// --functions--
$(document).ready(function() {
var list1 = document.getElementById("selectTitle");
list1.options[0] = new Option("--Select Title--", "");
list1.options[1] = new Option("Avengers Endgame", "endgame");
list1.options[2] = new Option("Top End Wedding", "topend");
list1.options[3] = new Option("Dumbo", "dumbo");
list1.options[4] = new Option("The Happy Prince", "happyprince");
});
function getAvailableDates() {
var list1 = document.getElementById("selectTitle");
var list2 = document.getElementById("selectTime");
var list1SelectedValue = list1.options[list1.selectedIndex].value;
if (list1SelectedValue == "endgame") {
$("#datepicker").datepicker("setDaysOfWeekDisabled", [1, 2]);
$("#datepicker").datepicker("setDate", date);
} else if (list1SelectedValue == "dumbo") {
var selectedDate = $("#datepicker").datepicker("getDate");
var selectedDay = selectedDate.getDay();
document.getElementById("demo").innerHTML = selectedDay;
$("#datepicker").datepicker("setDaysOfWeekDisabled", []);
$("#datepicker").datepicker("setDate", date);
} else if (list1SelectedValue == "happyprince") {
$("#datepicker").datepicker("setDaysOfWeekDisabled", [1, 2]);
$("#datepicker").datepicker("setDate", date);
} else if (list1SelectedValue == "topend") {
$("#datepicker").datepicker("setDaysOfWeekDisabled", [3, 4, 5]);
}
}
// --detect date change--
$("#datepicker")
.datepicker()
.on("changeDate", function(e) {
var selectedDate = $("#datepicker").datepicker("getDate");
var selectedDay = selectedDate.getDay();
var list1 = document.getElementById("selectTitle");
var list2 = document.getElementById("selectTime");
var list1SelectedValue = list1.options[list1.selectedIndex].value;
if ((list1SelectedValue == "endgame") && (selectedDay >=3 && selectedDay<=5)) {
list2.options.length = 0;
list2.options[0] = new Option("9PM", "T18");
}
if ((list1SelectedValue == "endgame") && (selectedDay =6 )) {
list2.options.length = 0;
list2.options[0] = new Option("6PM", "T18");
}
document.getElementById("demo").innerHTML = selectedDay;
});
Aucun commentaire:
Enregistrer un commentaire