Skip to main content

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

Comments

1 comment

  • Johnny Stevens

    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.