Set a second datetime maximum to be on the same day as the first? #141

matthewmalone · 2017-11-30T23:49:48Z

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

nehakadam · 2017-12-13T17:40:13Z

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>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Set a second datetime maximum to be on the same day as the first? #141

Set a second datetime maximum to be on the same day as the first? #141

matthewmalone commented Nov 30, 2017

nehakadam commented Dec 13, 2017

Set a second datetime maximum to be on the same day as the first? #141

Set a second datetime maximum to be on the same day as the first? #141

Comments

matthewmalone commented Nov 30, 2017

nehakadam commented Dec 13, 2017