Skip to main content

How can i validate date range with diffent scerios on input Text?

Comments

1 comment

  • Johnny Stevens

    Here is a sample report which includes both a simple jquery validation tool and a DateRangePicker.js implementation which may help you format your InputText Date elements if you so choose.

    The validation will work without DateRangePicker, but to use the DateRangePicker code you'll need to add a transparent, 1px image of your choice to your _SupportFiles named 1.png to run the dateRangePicker content. You can also pick the png files from the IncludeHTML Style references and place your own in _SupportFiles.

    <Report ID="TestDateInputText">
    <Body>
    <Division HtmlDiv="True" ID="divInpFromPicker">
    <InputText Class="dateInputFormat" Format="MM/dd/yyyy" ID="inpFromDate" InputSize="10">
    <Remark>
    <EventHandler DhtmlEvent="onchange">
    <Action ID="dateValidationRef" Javascript="validateMe(document.getElementById('inpFromDate'), document.getElementById('inpThruDate'));" Type="Javascript" />
    </EventHandler>
    </Remark>
    </InputText>
    </Division>
    <Division HtmlDiv="True" ID="divInpThruPicker">
    <InputText Class="dateInputFormat" 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>
    <Image Caption="1.png" Height="1" ID="1piximg" Width="1">
    <EventHandler DhtmlEvent="onload">
    <Action ID="jsTriggerDatePicker" Javascript="$('#inpFromDate').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;});&#xD;&#xA;$('#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>
    </Division>
    <IncludeScript ID="scriptDateValidation" IncludedScript="function validateMe(objStart, objEnd) {&#xD;&#xA; var sDate = new Date(objStart.value);&#xD;&#xA; var eDate = new Date(objEnd.value);&#xD;&#xA;&#xD;&#xA; /* development only */&#xD;&#xA; /*alert(sDate);&#xD;&#xA; alert(eDate);*/&#xD;&#xA;&#xD;&#xA; if (sDate &gt; eDate) {&#xD;&#xA; alert(&quot;failure&quot;);&#xD;&#xA; } else {&#xD;&#xA; alert(&quot;success&quot;);&#xD;&#xA; }&#xD;&#xA;}" />
    <IncludeHtml Html="&lt;style&gt;&#xD;&#xA;.dateInputFormat {&#xD;&#xA; background-image: url(&quot;imgCalendar.png&quot;);&#xD;&#xA; background-repeat: no-repeat;&#xD;&#xA; background-position: 98% 50%;&#xD;&#xA; width: 100px;&#xD;&#xA; cursor:pointer;&#xD;&#xA;}&#xD;&#xA;&#xD;&#xA;.daterangepicker td.start-date.end-date {&#xD;&#xA; background-color: #3f3f3f;&#xD;&#xA;}&#xD;&#xA;&#xD;&#xA;.daterangepicker td {&#xD;&#xA; border-radius: 0px !important;&#xD;&#xA;}&#xD;&#xA;&#xD;&#xA;.daterangepicker .calendar-table thead th {&#xD;&#xA; background-color: #eee !important;&#xD;&#xA; border-radius: 0px !important;&#xD;&#xA; border: none;&#xD;&#xA;}&#xD;&#xA;&#xD;&#xA;.daterangepicker .calendar-table .prev span {&#xD;&#xA; content: url(&quot;PageEnd.png&quot;) !important;&#xD;&#xA; -webkit-transform:scaleX(-1) !important;&#xD;&#xA; border: none !important;&#xD;&#xA; background-position: center center;&#xD;&#xA; margin-top: 8px !important;&#xD;&#xA;}&#xD;&#xA;&#xD;&#xA;.daterangepicker .calendar-table .next span {&#xD;&#xA; content: url(&quot;PageEnd.png&quot;) !important;&#xD;&#xA; -webkit-transform:rotate(0deg) !important;&#xD;&#xA; border: none !important;&#xD;&#xA; background-position: center center;&#xD;&#xA; margin-top: 8px !important;&#xD;&#xA;}&#xD;&#xA;&#xD;&#xA;.daterangepicker .calendar-table th{&#xD;&#xA; background: none;&#xD;&#xA;}&#xD;&#xA;&lt;/style&gt;" />
    </Body>
    <StyleSheet StyleSheet="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <IncludeScriptFile IncludedScriptFile="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js" />
    <IncludeScriptFile IncludedScriptFile="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js" />
    </Report>
    0

Please sign in to leave a comment.