locked
jquery datepicker is not working on webforms in masterpages RRS feed

  • Question

  • User34732094 posted

    Hi,

    I am trying to use datepicker in webforms masterpages. It does not work. I do not understand where i am wrong?

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
       
        <script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
         <link href="Scripts/jquery-ui.min.css" rel="stylesheet" type="text/css" />

        <link href="Scripts/jquery-ui.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function(){
            $('#txtBirthDate').datepicker({
            appendText:'mm/dd/yyyy',
            showOn:'both',
            buttonText:'Calender',
            dateFormat:'dd/mm/yyyy',
              });


        })
    </script>

     <tr><td>BirthDate</td>
           <td>
               <asp:TextBox ID="txtBirthDate" runat="server"></asp:TextBox></td>
               </tr>

    Thank you

    Tuesday, May 11, 2021 5:57 PM

Answers

  • User-821857111 posted

    The HTML5 input type="date" is supported in all modern browsers (not IE 11). You can save yourself a lot of headaches by using the native browser date picker instead of relying on third party stuff. You don't have to worry about date formats either, because the browser takes care of that. All you need to do is to provide a suitable value for the type attribute on the Textbox:

    <asp:TextBox type="date" ID="txtBirthDate" runat="server"></asp:TextBox>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 13, 2021 7:10 AM

All replies

  • User475983607 posted

    The selector is probably wrong due to dynamic IDs in Web Forms or there is an error.  Use the browser's dev tools to verify the ID is what you expect and there are no errors. 

    I recommend using a class selector.

    <asp:TextBox ID="txtBirthDate" runat="server" CssClass="datepicker"></asp:TextBox>
    $('.datepicker').datepicker({

    Tuesday, May 11, 2021 6:16 PM
  • User34732094 posted

    Thank you so much. but when i added these lines 

     changeMonth:true,
     changeYear:true,
     minDate:new Date(1974,12,31),
    maxDate:new Date(2022,12,31)

    It is not showing the dropdownlist from the year 1974

    Tuesday, May 11, 2021 7:27 PM
  • User475983607 posted

    Thank you so much. but when i added these lines 

     changeMonth:true,
     changeYear:true,
     minDate:new Date(1974,12,31),
    maxDate:new Date(2022,12,31)

    It is not showing the dropdownlist from the year 1974

    Please see the new Date() reference documentation for the proper syntax.  It the month index which is zero based.

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date

    minDate: new Date(1974, 11, 31),

    Tuesday, May 11, 2021 7:59 PM
  • User1535942433 posted

     Hi entrylevel,

    As far as I think,you could add yearRange. Just like this:

    <script type="text/javascript">
            $(document).ready(function () {
                $('[id*=txtBirthDate]').datepicker({
                    appendText: 'mm/dd/yyyy',
                    showOn: 'both',
                    buttonText: 'Calender',
                    changeMonth: true,
                    changeYear: true,
                    minDate: new Date(1974, 12 - 1, 31),
                    maxDate: new Date(2022, 12 - 1, 31),
                    yearRange: "1974:2022"
                });
            })
        </script>

    Result:

    Best regards,

    Yijing Sun

    Wednesday, May 12, 2021 2:26 AM
  • User34732094 posted

    Hi Yijing Sun,

    Thank you.

    but when i tried to change the year it is not changing. If I select year first time 1950 and if I change it to 1970 it is not changing.

    Thank you

    Wednesday, May 12, 2021 4:42 PM
  • User475983607 posted

    I added yearRange but when i select the date the year is displaying twice. Like 5/12/20212021.

    Your date format causes this problem. 

     dateFormat: 'dd/mm/yy',

    See the jquery datepicker documentation

    https://api.jqueryui.com/datepicker/#option-dateFormat

    Wednesday, May 12, 2021 5:13 PM
  • User34732094 posted

    Thats true .Thank you. but when i tried to change the year it is not changing. If I select year first time 1950 and if I change it to 1970 it is not changing.

    Wednesday, May 12, 2021 5:34 PM
  • User475983607 posted

    Thats true .Thank you. but when i tried to change the year it is not changing. If I select year first time 1950 and if I change it to 1970 it is not changing.

    You must click on a date in the calendar.  The year selector only changes the calendar year not the input.  

    Please take a moment to read the reference documentation rather than guessing how the DatePicker works.

    Wednesday, May 12, 2021 5:53 PM
  • User-821857111 posted

    The HTML5 input type="date" is supported in all modern browsers (not IE 11). You can save yourself a lot of headaches by using the native browser date picker instead of relying on third party stuff. You don't have to worry about date formats either, because the browser takes care of that. All you need to do is to provide a suitable value for the type attribute on the Textbox:

    <asp:TextBox type="date" ID="txtBirthDate" runat="server"></asp:TextBox>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 13, 2021 7:10 AM
  • User34732094 posted

    Thanks Mike.

    Tuesday, May 18, 2021 8:52 PM