problem with JQuery Datepicker

Question

0.00/5 (No votes)

See more:

Hi All,

I have used JQuery Datepicker for my application.
Here is my code

XML

<link rel="stylesheet" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>

Here is my script

JavaScript

<script type="text/javascript" style.ui-widget { font-size: 62.5% }>
        $(document).ready(function() {
        $("#ctl00_ContentPlaceHolder1_txtPDOB").datepicker({
            changeYear: true,
            changeMonth:true,
            dateFormat: 'dd/mm/yy',
            minDate: new Date('01/01/1900'),
            maxDate: '+1Y',
            yearRange: '1900:' + Date().getFullYear
        });
        });
</script>

Here,
When i say submit button txtPDOB.text is showing empty & I am trying to convert the text which is in txtPDOB.text into Datetime. Bt the textbox showing empty & iam getting error there.

Can anybody tell me for what reason its not taking the text from textbox after selecting Date from JQuery datepicker.

Posted 24-May-12 0:42am

SIVA RAMAMOORTHY

Updated 24-May-12 1:24am

Ed Nutting

v2

Add a Solution

Comments

Jim Jos 24-May-12 7:15am

Are you seeing the date in the textbox after selection?

SIVA RAMAMOORTHY 25-May-12 3:15am

Ya.. Im seeing date in textbox. after pressing submit button its showing that is null.

SIVA RAMAMOORTHY 25-May-12 10:17am

Guys
I found that its due to textboxwatermarkextender

Ed Nutting 24-May-12 7:25am

Edit: Fixed formatting.

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dylan Morley · Answer 1 · 2012-05-24T01:48:00

Once useful trick for this is to give your textboxes a CssClass property of 'date-picker', then you can easily apply jQuery Datepicker like so...

<asp:textbox id="fromDateSelection" cssclass="date-picker" runat="server"></asp:textbox>

JavaScript

<script type="text/javascript" >
    $(document).ready(function() {
        $(".date-picker").datepicker({
            changeYear: true,
            changeMonth:true,
            dateFormat: 'dd/mm/yy',
            minDate: new Date('01/01/1900'),
            maxDate: '+1Y',
            yearRange: '1900:' + Date().getFullYear
        });
    });
</script>

This is particularly helpful when working with multiple textboxes on the page that need datepicker, and also means you don't have to work with the mangled master page identifiers.

As for your problem, if you are using a textbox like above and you're seeing the datepicker display & set the textbox value, you should be able to access the value on the server. Can you confirm all that is happening?

Update: Some questions I asked OP in a non-solution answer I'm about to delete!

Please answer the following questions so people can help you

1) Is the date picker showing in the UI? When you click in the text box, do you see the datepicker?

2) When you choose a date, is it setting the value in the text box. Does the textbox correctly show the selected value?

3) Is it only when you post your form that it is reset to blank?

4) Are you sure you don't have any initialisation code in your page that is setting the txtDOP to empty string?

admlange · Answer 2 · 2016-01-06T21:06:00

For those of you that may have been going crazy over this... Here's what finally solved my problem:
http://www.aspsnippets.com/Articles/Implement-jQuery-DatePicker-Plugin-with-ASPNet-TextBox-Control.aspx

My situation: ASCX user control opened in a modaldialog popup (DotNetNuke module within dnnPopup which actually works with an iFrame) with a gridview that has inline editting and contains, amongst others, a JQuery UI datepicker. Everything in the popup works as expected, but at the postback to the server i can not access the ".Text" value of the asp:Textbox that was used for the datepicker. As to the questions above:
1)Datepicker is showing in UI
2)It's setting the value in textbox and it's showing correctly..
3)N.A.
4)Nothing what so ever

The frontend:

ASP.NET

<EditItemTemplate>
    <asp:TextBox ID="cldValidFrom" runat="server" CssClass="ETCI_DatePickerInput" Text='<%#Eval("ValidFrom") %>'/>
</EditItemTemplate>

The Javascript (invoked from document.ready):

function ETCI_SetDatePicker() {
    $(".ETCI_DatePickerInput").each(function () {
        InitDatePicker(this);
    });
}
function InitDatePicker(obj) {
    $(obj).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yy-mm-dd',
        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        defaultDate: +0
    });
}

The code that DID NOT WORK:

C#

TextBox cldValidFrom = (TextBox)gridInspectionRights.Rows[e.RowIndex].FindControl("cldValidFrom");
DateTime? ValidFrom = null;
if (!String.IsNullOrEmpty(cldValidFrom.Text))
    ValidFrom = Convert.ToDateTime(cldValidFrom.Text);

The code that DOES work:

C#

TextBox cldValidFrom = (TextBox)gridInspectionRights.Rows[e.RowIndex].FindControl("cldValidFrom");
                string strValidFrom = Request.Form[cldValidFrom.UniqueID];
                DateTime? ValidFrom = null;
                if (!String.IsNullOrEmpty(strValidFrom))
                    ValidFrom = Convert.ToDateTime(strValidFrom);

I hope this helps someone...

problem with JQuery Datepicker

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0

problem with JQuery Datepicker

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us