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..

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

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.
}

Answer 3

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