I'm having scenario like choosing/entering of date from datepicker. I have used jquery plugin for datepicker. It worked perfectly.
As I said earlier, user also having an advantage of entering date directly in textbox instead of choosing from calendar. At this stage, as we all know that the user may happen to enter the date wrongly. Hence I stepped in jquery datepicker validation plugin. There I found some articles to proceed.
The useful links are as follows,
[Keith Wood][1]
[jsfiddle][2] or [Chridam says][3]
What I tried is:
As first link says(Keith wood), I tried with datepicker.validation.js. But nothing happens when i enter the wrong date. Below is the complete code which I tried,
<html xmlns="http://ift.tt/lH0Osb">
<head runat="server">
<meta charset="UTF-8">
<title> Test for date picker</title>
<link rel="stylesheet" type="text/css" href="http://ift.tt/1F8kjRm">
<script type="text/javascript" src="http://ift.tt/1fEahZI"></script>
<script type="text/javascript" src="http://ift.tt/1vKzLQs"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker.validation.js"></script>
<script src="demo.js" type="text/javascript"></script>
</head>
<body>
<form id="validateForm" action="#">
<script >
$('#validateForm').validate({
errorPlacement: $.datepicker.errorPlacement,
rules: {
validDefaultDatepicker: {
required: true,
dpDate: true
},
validBeforeDatepicker: {
dpCompareDate: ['before', '#validAfterDatepicker']
},
validAfterDatepicker: {
dpCompareDate: { after: '#validBeforeDatepicker' }
},
validTodayDatepicker: {
dpCompareDate: 'ne today'
},
validSpecificDatepicker: {
dpCompareDate: 'notBefore 01/01/2012'
}
},
messages: {
validFormatDatepicker: 'Please enter a valid date (yyyy-mm-dd)',
validRangeDatepicker: 'Please enter a valid date range',
validMultiDatepicker: 'Please enter at most three valid dates',
validAfterDatepicker: 'Please enter a date after the previous value'
}
});
</script>
<p>
Select Date:
<input type="text" size="10" name="validDefaultDatepicker" id="validDefaultDatepicker"/></p>
<script>
$(function () {
$('#validDefaultDatepicker').datepicker();
});
</script>
</form>
As per the second link(chridam), I tried with type = date concept directly. It gave me hope as it worked perfectly. Though the solution is nice, it is now working IE browsers. Below is the complete code,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">
<head runat="server">
<title></title>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src="http://ift.tt/Pg8IDD"></script>
<script type='text/javascript' src="http://ift.tt/1iBzfxv"></script>
<script type="text/javascript">
$(function () {
$("#jQueryValidateTest").validate();
$("[type=date]").datepicker({
onClose: function () {
$(this).valid();
}
});
});
</script>
<style>
.valid {
background: green;
color: #fff;
}
.error {
background: red;
color: #fff;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<form id="jQueryValidateTest">
<input type="date" required>
</form>
</td>
</tr>
</table>
</body>
</html>
Hope I'm now confusing you. Kindly help me to overcome this hurdle. Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire