DateTimePicker
DateTimePicker copied to clipboard
Published
20 hours ago •
nehakadam
nehakadam
Set a second datetime maximum to be on the same day as the first?
Is it possible to set a second datetime maximum to be on the same day as the first? (after the first datetime picker has been set).
The minimum of the second datetime picker would also be set to the value in the first picker
Please try the code given below -
<!DOCTYPE html>
<html>
<head>
<title>Period Range - SecondField Min = FirstField + 5 minutes, SecondField Max = FirstField DayEnd</title>
<link rel="stylesheet" type="text/css" href="../src/DateTimePicker.css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../src/DateTimePicker.js"></script>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="../src/DateTimePicker-ltie9.css" />
<script type="text/javascript" src="../src/DateTimePicker-ltie9.js"></script>
<![endif]-->
<style type="text/css">
p
{
margin-left: 20px;
}
input
{
width: 200px;
padding: 10px;
margin-left: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<form>
<!------------------------ DateTime Picker ------------------------>
<p>Start DateTime : </p>
<input class="startDateTime" type="text" data-field="datetime" readonly>
<p>End DateTime : </p>
<input class="endDateTime" type="text" data-field="datetime" readonly>
</form>
<div id="dtBox"></div>
<script type="text/javascript">
var oDTP, dDateTime,
sDateFormat = "dd-MM-yyyy hh:mm:ss AA",
startElemClass = "startDateTime",
endElemSel = ".endDateTime";
$(document).ready(function()
{
$("#dtBox").DateTimePicker({
dateTimeFormat: sDateFormat,
settingValueOfElement: function(sElemValue, dElemValue, oElem)
{
oDTP = this;
if(oElem.hasClass(startElemClass))
{
dDateTime = new Date(dElemValue.getFullYear(), dElemValue.getMonth(), dElemValue.getDate(), dElemValue.getHours(), dElemValue.getMinutes() + 5, 0, 0);
$(endElemSel).data("min", oDTP.getDateTimeStringInFormat("datetime", sDateFormat, dDateTime));
// Set DateTime in the End Date field if the EndDate Set in the input field is Less than the StartDate set. Use method setDateTimeStringInInputField: function(oInputField, dInput) to achieve this.
dDateTime = new Date(dElemValue.getFullYear(), dElemValue.getMonth(), dElemValue.getDate(), 23, 59, 59, 0);
$(endElemSel).data("max", oDTP.getDateTimeStringInFormat("datetime", sDateFormat, dDateTime));
}
}
});
});
</script>
</body>
</html>
