How can we set the ending date as Today date in Calendar.

Seema Verma

• July 01, 2021 12:58
• Edited

Hii 

Currently  I am using the daterangepicker.js but which code I am using is not giving me desired result .I am looking for a way via which I can  set the ending date as a today date in the calendar and also want to allow the calendar element to be able to take both user input and/or select the dates on the calendar.

 

1

• 

  Johnny Stevens

  • Logi Info Ninja
  • Logi Forum Guru
  • July 01, 2021 13:33

  Hi Akhil,

  Since this question is specific to daterangepicker.js, you may get better results in a different venue like Stack Overflow. That said, we are using daterangepicker.js in our Info application in combination with a Local Datalayer to populate the date picker element with today's date.

  1. We use a Local Datalayer to set "inpThruDate" to today's date.
  2. Next, we have a Logi InputText element to house the datepicker:

  3. <InputText Class="WhiteBG dateInputFormat" DefaultValue="@Local.inpThruDate~" Format="MM/dd/yyyy" ID="inpThruDate" InputSize="10">
       <EventHandler DhtmlEvent="onchange">
         <Action ID="dateValidationRef" Javascript="validateMe(document.getElementById('inpFromDate'), document.getElementById('inpThruDate'));" Type="Javascript" />
       </EventHandler>
     </InputText>

      
  4. Our CSS for the field (along with other styling CSS) is as follows. This gives us the calendar icon and field to look like an InputDate even though the field is InputText:
     

     .dateInputFormat {
     background-image: url("imgCalendar.png");
     background-repeat: no-repeat;
     background-position: 98% 50%;
     width: 100px;
     cursor:pointer;
     }

  5. Finally, we have a 1px transparent image that runs onload with an EventHandler. This sets the daterangepicker parameters:

  6. <Image Caption="1.png" Height="1" ID="1piximg" Width="1">
       <EventHandler DhtmlEvent="onload">
         <Action ID="jsTriggerDatePicker" Javascript="$('#inpThruDate').daterangepicker({    &#xD;&#xA;&quot;singleDatePicker&quot;: true&#xD;&#xA;,&quot;showDropdowns&quot;: true&#xD;&#xA;,&quot;opens&quot;: &quot;left&quot;&#xD;&#xA;,&quot;autoApply&quot;: true&#xD;&#xA;,&quot;minYear&quot;: 1990&#xD;&#xA;, &quot;locale&quot;: {&quot;daysOfWeek&quot;: [&quot;S&quot;,&quot;M&quot;,&quot;T&quot;,&quot;W&quot;,&quot;T&quot;,&quot;F&quot;,&quot;S&quot;],&#xD;&#xA;&quot;monthNames&quot;: [&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;,&quot;August&quot;,&quot;September&quot;,&quot;October&quot;,&quot;November&quot;,&quot;December&quot;]}&#xD;&#xA;});" Type="Javascript" />
       </EventHandler>
     </Image>

  The result of this setup (although we use 2 inputs, one for From one for Thru), is that the Thru defaults to today while still allowing the user to click for the calendar picker and/or directly add text dates with validation.

  

  0

Please sign in to leave a comment.