I have two readonly textboxes, one textbox is linked with the jquery datepicker and the other textbox is linked with the timepicker jquery. Now the great thing about the jquery datepicker is that I can range my dates so that the user cannot select any dates before the current date. But the Jquery timepicker cannot be ranged so the time is before the current time.
Because of this there is a possbile chance that the user can select the current date but a time before the current time. Obviously this means the time chosen has passed the current time of the current day which I don’t want happening. So a validation is needed where if date textbox and time textbox is past the current date and time, then a message is displayed stating “The Date and Time you have selected is before the Current Date and Time” else if time and date together is past current date and time then display “”.
How can I do this. Below is my best attempt at it but I couldn’t get it to work.
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
<script type="text/javascript">
function validation() {
var dateTextO = document.getElementById("datepicker");
var timeTextO = document.getElementById("timepicker");
var errDateTimeMsgO = document.getElementById("dateTimeAlert")
var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear()
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
if (hours < 10){
hours = "0" + hours
}
if((dateTextO < currentDate) && (timeTextO < currentTime)){
errDateTimeMsgO.innerHTML = "The Date and Time you have selected is before the Current Date and Time";
} else {
errDateTimeMsgO.innerHTML = "";
}
}
</script>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><strong>4: Date:</strong> <input type="text" id="datepicker" readonly="readonly"></p>
<p><strong>5: Time:</strong> <input type="text" id="timepicker" readonly="readonly"><span class="timepicker_button_trigger"><img src="Images/clock.gif" alt="Decrease" /></span></p>
<div id="dateTimeAlert"></div>
</form>
</body>