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!

Perhaps you want jQuery validation. Check it here jqueryvalidation.org — صفي
– صفي, Commented Dec 29, 2014 at 11:13

KnuturO · Accepted Answer · 2014-12-29 11:17:18Z

2

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>

answered Dec 29, 2014 at 11:17

KnuturO

1,66516 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

agentpx · Accepted Answer · 2014-12-29 11:21:56Z

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

Mairaj Ahmad · Accepted Answer · 2014-12-29 11:13:43Z

1

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

edited Dec 29, 2014 at 11:13

answered Dec 29, 2014 at 11:08

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

4 Comments

Rifshan Over a year ago

If you could explain what is happening here, it would be great... and how do i apply validations and error messages using this code?

Mairaj Ahmad Over a year ago

Check updated answer now is it clear or need more explanation.

Rifshan Over a year ago

That makes it more clear.. Thanks.. What if i were to do validations i mentioned at the end of the question?

Mairaj Ahmad Over a year ago

For validation you can use jquery plugin.

Collectives™ on Stack Overflow

JQuery DatePicker on ASP.net

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related