JQuery DatePicker on ASP.net

Question

Well,

Im trying to put Date Picker on ASP.net form..

I saw that this code can do it..

<script>
$(function() {
    $( "#<%= txtDate.ClientID %>" ).datepicker();
});
</script>

<form id="form1" runat="server">
  <div>
    <asp:TextBox ID="txtDate" runat="server" />
  </div>
</form>

Im just wondering how to apply validations on this and how display the error messages..?

Validations such as format, if i put 2 dates, 1st < 2nd.. and Date>Today etc..

Very new to JQuery, any help would be appreciated!

Answer 1

try this if your looking for validation.

<script>
$(function() {
    $( "#<%= txtDate.ClientID %>" ).datepicker({
                minDate:0,
                dateFormat: 'dd-mm-yy',
                showOtherMonths: true,
                onSelect: function( selectedDate ) {
                    console.log(selectedDate);
                    // Here you can do all the validation you want.
                }
  });
});
</script>

Answer 2

I pulled out my code for this. The code is self explanatory if you know jQuery/Javascript.

 var dateToday = new Date();
 var fromDate = (dateToday.getMonth() + 1) + "/" + dateToday.getDate() + "/" +    dateToday.getFullYear()
 var toDate = (dateToday.getMonth() + 1) + "/" + dateToday.getDate() + "/" + dateToday.getFullYear()

// Initialize FromDate

 $('#datepicker1').datepicker({
    todayBtn: "linked",
    multidate: false,
    autoclose: true,
    todayHighlight: true
 });

// Handle fromDate Click

$('#datepicker1').datepicker('setDate', fromDate);

$('#datepicker1').datepicker().on('changeDate', function (e) {
    fromDate = $('#datepicker1').val().toString();
    if (fromDate > toDate) {
        toDate = fromDate;
        $('#datepicker2').datepicker('setDate', toDate);
    }
});

// Initialize toDate

$('#datepicker2').datepicker({
    todayBtn: "linked",
    multidate: false,
    autoclose: true,
    todayHighlight: true
});

//Handle toDate Click

$('#datepicker2').datepicker('setDate', toDate);

$('#datepicker2').datepicker().on('changeDate', function (e) {
    toDate = $('#datepicker2').val().toString();
    if (toDate < fromDate) {
        fromDate = (new Date(toDate).getMonth() + 1) + "/01/" + new Date(toDate).getFullYear();
        $('#datepicker1').datepicker('setDate', fromDate);
    }
});

I forgot to mention that am using this https://github.com/eternicode/bootstrap-datepicker/blob/release/docs/index.rst

Answer 3

Change your script to this

<script>
$(function() {
$("input[id$=txtDate]").datepicker();
});
</script>

This will get the input element with exact id of txtDate.

$("input[id$=txtDate]").datepicker();

And here is what you can check for validation

var txtValue=$("input[id$=txtDate]").val();
if(txtValue)
{
//it means textbox has some value proceed further.
}