ASP.NET with jQuery DatePicker

Question

I would like to do something like this: http://jqueryui.com/datepicker/

However, I'm not exactly sure how:

I have a masterpage-content page, and when I tried to copy that code and paste them into the content page, it will say "XXXX cannot be in the content region".
When the user hit the submit button, how am I going to pass the date in the textbox to the server side code?

Here are parts of my code:

.aspx:

<asp:Content ID="Content4" ContentPlaceHolderID="MainContent1" runat="server">
    <p>Date: <input type="text" id="datepicker"></p>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
    <asp:Label ID="lblOutput" runat="server" Text="Label"></asp:Label>
</asp:Content>

.cs:

protected void btnSubmit_Click(object sender, EventArgs e)
{
    lblOutput.Text = //The date from the datepicker
}

BaCaRoZzo · Accepted Answer · 2016-06-21 10:59:01Z

3

You need to use the runat="server" like this in your html:

<input type="text" id="datepicker" runat="server">

Then on your server side your can refer to datepicker as a server object and access datepicker.Value.

To @C.J comment. This is the source code included on this link added on the question, it is there where the runat=server goes:

This goes on your Master Page:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

This goes on your Content Page:

<p>Date: <input type="text" id="datepicker" class="datepicker"></p>
<script>
  $(document).on('ready',function() {
    $( ".datepicker" ).datepicker();
  });
</script>

edited Jun 21, 2016 at 10:59

BaCaRoZzo

7,7328 gold badges54 silver badges88 bronze badges

answered May 21, 2014 at 14:22

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

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

9 Comments

C.J. Over a year ago

Where do I include the $(function() { $("#datepicker").datepicker(); }); Because if I type them in the content page, it will return errors.

Ragnar Over a year ago

So, now you are copying my answer!! If you want i give you my vote up!! there is no problem!!

C.J. Over a year ago

@Dalorzo I understand the code as per in the link. However, my question is, if I have a Master page, how am I going to call the function in the content page?

Dalorzo Over a year ago

what function do you mean the javascript function?

C.J. Over a year ago

I tried to include the codes <!doctype html> ... <body> in the content page, but it says these codes cannot be included in the content region

|

mariko · Accepted Answer · 2015-08-26 08:19:04Z

1

HTML5 use type="date"

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

answered Aug 26, 2015 at 8:19

mariko

811 silver badge3 bronze badges

Comments

Ragnar · Accepted Answer · 2014-05-21 14:29:05Z

0

You need to initialize your datepicker and add runat="server" to your input like this:

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


<input type="text" id="datepicker" runtat="server">

answered May 21, 2014 at 14:29

Ragnar

4,6281 gold badge33 silver badges42 bronze badges

Collectives™ on Stack Overflow

ASP.NET with jQuery DatePicker

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related