locked
Using jQuery DatePicker with Content Page along with Master Page in ASP.Net? RRS feed

  • Question

  • User-479973300 posted

    how to use date picker in textbox in content page along with master page.  :(

    Tuesday, April 12, 2016 9:03 AM

Answers

  • User177399542 posted

    Hi

          Step1: Add Required Jquery and CSS to your master page:

    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>

    Step2: Add textboxes in Master and content page:

    //Master page
     <div>
                <asp:TextBox CssClass="myCal" runat="server" ID="txtInMasterPage" />
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
    
    
    //---- Content page.
     <asp:TextBox ID="txtInContentPage" runat="server" CssClass="myCal"></asp:TextBox>
    
    //----- Add CSSClass "myCal" to textboxes where you want to show calendar.

    Step3: Initiate calendar:(From masterpage)

    </form>
        <script type="text/javascript">
            $(".myCal").datepicker();
        </script>
    </body>
    
    //--- Add code above closing tag of body section.

    Note: Here I have applied CssClass="myCal" to textboxes where I want to show calendar. If you have any other css applied on textboxes you can assign multiple CSS class like:
    CssClass="OtherClasses myCal"

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 12, 2016 9:30 AM
  • User177399542 posted

    For offline access: Go to jquery.com and download above mentioned files and copy to your website folder, then reference jquery and style sheets from your website folder.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 13, 2016 4:01 AM
  • User61956409 posted

    Hi rajaganapathy,

    Already i had tried this but they need without online query.

    Firstly, you could select Widgets and theme you want to include and download the jQuery UI library from the following link. Then you could include the jQuery UI library in your project and add references to required CSS and JS files in your master page.

    http://jqueryui.com/download/

    Secondly, you could check this sample to learn the basic usage of jQuery datepicker widget.

    https://jqueryui.com/datepicker/

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 13, 2016 6:33 AM

All replies

  • User177399542 posted

    Hi

          Step1: Add Required Jquery and CSS to your master page:

    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>

    Step2: Add textboxes in Master and content page:

    //Master page
     <div>
                <asp:TextBox CssClass="myCal" runat="server" ID="txtInMasterPage" />
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
    
    
    //---- Content page.
     <asp:TextBox ID="txtInContentPage" runat="server" CssClass="myCal"></asp:TextBox>
    
    //----- Add CSSClass "myCal" to textboxes where you want to show calendar.

    Step3: Initiate calendar:(From masterpage)

    </form>
        <script type="text/javascript">
            $(".myCal").datepicker();
        </script>
    </body>
    
    //--- Add code above closing tag of body section.

    Note: Here I have applied CssClass="myCal" to textboxes where I want to show calendar. If you have any other css applied on textboxes you can assign multiple CSS class like:
    CssClass="OtherClasses myCal"

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 12, 2016 9:30 AM
  • User-479973300 posted

    How to create without using online query means

     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    Already i had tried this but they need without online query.i had tried open the links and save the files in online queries but this is not working. :(

    Tuesday, April 12, 2016 10:35 AM
  • User177399542 posted

    For offline access: Go to jquery.com and download above mentioned files and copy to your website folder, then reference jquery and style sheets from your website folder.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 13, 2016 4:01 AM
  • User61956409 posted

    Hi rajaganapathy,

    Already i had tried this but they need without online query.

    Firstly, you could select Widgets and theme you want to include and download the jQuery UI library from the following link. Then you could include the jQuery UI library in your project and add references to required CSS and JS files in your master page.

    http://jqueryui.com/download/

    Secondly, you could check this sample to learn the basic usage of jQuery datepicker widget.

    https://jqueryui.com/datepicker/

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 13, 2016 6:33 AM