Use JQuery DatePicker on Textbox asp.net

Question

How to attach a DatePicker to Textbox in JQuery.

Answer 1

You should check out the jQuery UI DatePicker.

ASP.NET Example

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

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

Answer 2

Where date of birth is a textbox.

A basic example:

$(document).ready(function () {
            $("#DateOfBirth").datepicker(            
            });
        });

More complex example:

$(document).ready(function () {
    $("#DateOfBirth").datepicker({
        defaultDate: "-25y",
        dateFormat: "dd-mm-yy",
        yearRange: "c-80:c+40",
        inline: true,
        showAnim: 'fadeIn',
        changeMonth: true,
        changeYear: true,
        minDate: "-120y",
        maxDate: "-18y",
        });
});

Some Explanations: defaultDate is set to today minus 25 years.

dateFormat is set to 26/12/2014. Don't use 'yyyy' otherwise the 4 character year will show twice.

yearRange sets the number of years that show in the year drop down box (enabled by 'changeyear: true' option) to be the current year minus 80 years and plus 40 years (but constrained to min and max date settings)

Some basic options:

1. showOn: button (shows when the calendar button is clicked)
2. showOn: focus (shows when the input the calendar is attached to gets focus)
3. showsOn: both (shows both as above)
4. defaultDate: new Date(2014, 12, 26)
5. defaultDate: "-25y" (shows the today's date minus 25 years)
6. minDate: new Date(1926, 1, 1)
7. maxDate: "+1m +1w" (adds 1 month and 1 week to current set date)
8. maxDate: new Date(2012, 1, 1)
9. dateFormat: "yy-mm-dd"
10. dateFormat: "dd-mm-yy"
11. dateFormat: 'DD, MM d, yy'
12. navigationAsDateFormat: true (removes silly 'prev' and 'next' button text and replaces with prev and next month names).
13. stepMonths: 3 (when the next or prev buttons are clicked will move this many months at once).
14. numberOfMonths: [ 2, 3 ] (shows 3 calendars at once)
15. showCurrentAtPos: 2 (must be used in conjunction with above 'numberOfMonths:'. Sets the present month in selected position where multiple months are shown.)
16. showButtonPanel: true (shows a button panel underneath the cal with 'Today' button for setting the date to today and 'Done' button which will close the calendar')
17. showWeek: true (shows the week number out of 52 for the year)
18. changeMonth: true (allow the user to change the month via a drop down list)
19. changeYear: true (allow the user to change the year via a drop down list)
20. yearRange: "c-80:c+40" (c is for current. Year range is current year minus 80 years and plus 40 years but this is constrained by min and max dates settings is
21. yearRange: "1990:2014" (in the year drop down list shows the range of years available in the drop down list)

Check here for the full reference: http://api.jqueryui.com/datepicker/

Answer 3

$(function() {
      $("#txtDatepicker").datepicker();
});

see the Example for how to use this function.

Answer 4

Here are two ways with Jquery Css selectors:

1) Use the fully resolved ID of your textbox based on the containers it is in. You should be able to verify how the ID comes through using your browser's built in developer tools.

Example of a form view using master pages with placeholder would be something like:

ContentPlaceHolder ID + FormView ID + Textbox ID

$("#MainContent_F3_TextBox1").datepicker();

2) Or add a css class to the TextBoxID for all your dates fields:

<asp:TextBox ID="TextBox1" CssClass="datepick" runat="server"></asp:TextBox>

$(".datepick").datepicker();

Answer 5

I've encountered another issue when I needed to add datepicker to asp.net textbox which was inside Bootstrap modal popup and inside gridview as well. The issue is caused by timing I believe and to resolve it you need assign datepicker after the modal is already loaded. The best way is to do it after calling the modal to show. in my case it was also called from code behind using ScriptManager:

$('#myModal').modal('show');  
$('.datepick').datepicker();