[Solved] Jquery datepicker set value in textbox (Asp.net and Html Control)

Jquery date picker 

Today I going to show you how you set value in textbox using the Jquery date picker in asp.net or any other control (like HTML). Here we take a simple HTML textbox to pick a date using Jquery UI, in this process we use 3 ajax-official script link.Here we need to match the id of HTML Textbox $("#HTMLtxtbox").datepicker(); with the jquery id selector. If you want to implement date picker with asp.net textBox then try this $('#<%=ASPtxtbox.ClientID%>').datepicker();


Jquery datepicker set value textbox



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {

            //For HTML TextBOX
            $("#HTMLtxtbox").datepicker();
            $("#anim").on("change", function () {
                $("#HTMLtxtbox").datepicker("option", "showAnim", $(this).val());
            });


            //For Asp.Net TextBox
            $('#<%=ASPtxtbox.ClientID%>').datepicker();
            $("#anim").on("change", function () {
                $('#<%=ASPtxtbox.ClientID%>').datepicker("option", "showAnim", $(this).val());
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Jquery DatePicker With Asp.net TextBox</td>
                    <td>
                        <asp:TextBox ID="ASPtxtbox" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>Jquery DatePicker With HTML TextBox</td>
                    <td>
                        <input type="text" id="HTMLtxtbox" />
                    </td>
                </tr>
            </table>
        </div>
    </form>

</body>
</html>


Post a Comment

Post a Comment (0)

Previous Post Next Post