How can i validate date range with diffent scerios on input Text?
Hi,
I want to validate the date range on the basis of these scenarios. using input text
1. start date is not greater than the end date.
2. end date is not less than the start date
3. Date must be selected within 30 days
Thanks & Regards
Anvita
0
-
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({ 
"singleDatePicker": true
,"showDropdowns": true
,"opens": "left"
,"autoApply": true
,"minYear": 1990
, "locale": {"daysOfWeek": ["S","M","T","W","T","F","S"],
"monthNames": ["January","February","March","April","May","June","July","August","September","October","November","December"]}
});
$('#inpThruDate').daterangepicker({ 
"singleDatePicker": true
,"showDropdowns": true
,"opens": "left"
,"autoApply": true
,"minYear": 1990
, "locale": {"daysOfWeek": ["S","M","T","W","T","F","S"],
"monthNames": ["January","February","March","April","May","June","July","August","September","October","November","December"]}
});" Type="Javascript" />
</EventHandler>
</Image>
</Division>
<IncludeScript ID="scriptDateValidation" IncludedScript="function validateMe(objStart, objEnd) {
 var sDate = new Date(objStart.value);
 var eDate = new Date(objEnd.value);

 /* development only */
 /*alert(sDate);
 alert(eDate);*/

 if (sDate > eDate) {
 alert("failure");
 } else {
 alert("success");
 }
}" />
<IncludeHtml Html="<style>
.dateInputFormat {
 background-image: url("imgCalendar.png");
 background-repeat: no-repeat;
 background-position: 98% 50%;
 width: 100px;
 cursor:pointer;
}

.daterangepicker td.start-date.end-date {
 background-color: #3f3f3f;
}

.daterangepicker td {
 border-radius: 0px !important;
}

.daterangepicker .calendar-table thead th {
 background-color: #eee !important;
 border-radius: 0px !important;
 border: none;
}

.daterangepicker .calendar-table .prev span {
 content: url("PageEnd.png") !important;
 -webkit-transform:scaleX(-1) !important;
 border: none !important;
 background-position: center center;
 margin-top: 8px !important;
}

.daterangepicker .calendar-table .next span {
 content: url("PageEnd.png") !important;
 -webkit-transform:rotate(0deg) !important;
 border: none !important;
 background-position: center center;
 margin-top: 8px !important;
}

.daterangepicker .calendar-table th{
 background: none;
}
</style>" />
</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.
Comments
1 comment