To validate your ASP.Net textbox control we use an ajax control toolkit dll file. First you add an ajax control toolkit dll file in your solution. Then add this below control in your Design page of .aspx page.
<asp:TextBox ID="datepicker1" runat="server" CssClass="input" placeholder="mm/dd/yyyy" onfocus="this.value = '';" onblur="if (this.value == ''){this.value = '';}" onchange="dateCheck();" />
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="datepicker1" Format="MM/dd/yyyy" runat="server" OnClientDateSelectionChanged="checkDate">
</asp:CalendarExtender>
Then write the javascript for validating textbox in your design page.
<script>
function dateCheck() {
debugger;
var date = document.getElementById('<%=datepicker1.ClientID%>').value;
var fields = date.split('/');
if (fields.length == 3)
{
var today = new Date();
var dd = today.getDate();
var mm = (today.getMonth() + 1); //January is 0!
var yyyy = today.getYear()+1900;
var today = mm + '/' + dd + '/' + yyyy;
// var selecteddate = sender._selectedDate;
var dd1 = fields[1];
var mm1 = fields[0]; //January is 0!
var yyyy1 = fields[2];
if (yyyy1 < yyyy) {
alert("You cannot select a day earlier than today!");
document.getElementById('<%=datepicker1.ClientID%>').value = '';
}
else if (yyyy1 == yyyy) {
if (mm1 < mm) {
alert("You cannot select a day earlier than today!");
document.getElementById('<%=datepicker1.ClientID%>').value = '';
}
else if (mm1 == mm) {
if (dd1 < dd) {
alert("You cannot select a day earlier than today!");
document.getElementById('<%=datepicker1.ClientID%>').value = '';
}
}
}
}
}
function checkDate(sender, args) {
debugger;
var today = new Date();
var dd = today.getDate();
var mm = (today.getMonth()+1); //January is 0!
var yyyy = today.getYear();
var today = mm + '/' + dd + '/' + yyyy;
var selecteddate = sender._selectedDate;
var dd1 = selecteddate.getDate();
var mm1 = (selecteddate.getMonth()+1); //January is 0!
var yyyy1 = selecteddate.getYear();
if (yyyy1 < yyyy) {
alert("You cannot select a day earlier than today!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
else if (yyyy1 == yyyy) {
if (mm1 < mm) {
alert("You cannot select a day earlier than today!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
else if (mm1 == mm) {
if (dd1 < dd) {
alert("You cannot select a day earlier than today!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
}
}
</script>
After that run your website and see that the textbox not taking previous date. It only takes date from current date to upcoming date.
Related Links :
For more validations for your textbox..
<asp:TextBox ID="datepicker1" runat="server" CssClass="input" placeholder="mm/dd/yyyy" onfocus="this.value = '';" onblur="if (this.value == ''){this.value = '';}" onchange="dateCheck();" />
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="datepicker1" Format="MM/dd/yyyy" runat="server" OnClientDateSelectionChanged="checkDate">
</asp:CalendarExtender>
Then write the javascript for validating textbox in your design page.
<script>
function dateCheck() {
debugger;
var date = document.getElementById('<%=datepicker1.ClientID%>').value;
var fields = date.split('/');
if (fields.length == 3)
{
var today = new Date();
var dd = today.getDate();
var mm = (today.getMonth() + 1); //January is 0!
var yyyy = today.getYear()+1900;
var today = mm + '/' + dd + '/' + yyyy;
// var selecteddate = sender._selectedDate;
var dd1 = fields[1];
var mm1 = fields[0]; //January is 0!
var yyyy1 = fields[2];
if (yyyy1 < yyyy) {
alert("You cannot select a day earlier than today!");
document.getElementById('<%=datepicker1.ClientID%>').value = '';
}
else if (yyyy1 == yyyy) {
if (mm1 < mm) {
alert("You cannot select a day earlier than today!");
document.getElementById('<%=datepicker1.ClientID%>').value = '';
}
else if (mm1 == mm) {
if (dd1 < dd) {
alert("You cannot select a day earlier than today!");
document.getElementById('<%=datepicker1.ClientID%>').value = '';
}
}
}
}
}
function checkDate(sender, args) {
debugger;
var today = new Date();
var dd = today.getDate();
var mm = (today.getMonth()+1); //January is 0!
var yyyy = today.getYear();
var today = mm + '/' + dd + '/' + yyyy;
var selecteddate = sender._selectedDate;
var dd1 = selecteddate.getDate();
var mm1 = (selecteddate.getMonth()+1); //January is 0!
var yyyy1 = selecteddate.getYear();
if (yyyy1 < yyyy) {
alert("You cannot select a day earlier than today!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
else if (yyyy1 == yyyy) {
if (mm1 < mm) {
alert("You cannot select a day earlier than today!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
else if (mm1 == mm) {
if (dd1 < dd) {
alert("You cannot select a day earlier than today!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
}
}
</script>
After that run your website and see that the textbox not taking previous date. It only takes date from current date to upcoming date.
Related Links :
For more validations for your textbox..
0 Comments