We help IT Professionals succeed at work.

Datepicker to trigger associated textbox

Sheritlw
Sheritlw asked
on

I have the jQuery datepicker implemented in my form.
The objective is when a user selects a date a server side event is called to fill a listview with all schedules.
On the datepickers associated textbox I have a ontextchanged event attached which works when typing in a new date but doesn't get triggered when selecting a date.

I am still learning jquery and javascript so my knowledge is limited.

How can I get the datepicker to trigger the code behind event?
Thanks
<script src="../Scripts/jquery.datepick.min.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(function() {
       $('#ctl00_ContentPlaceHolder1_txtCalendar').datepick({ defaultDate: +0, dateFormat: 'DD, M. dd, yyyy', selectDefaultDate: true });

          Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

          function EndRequestHandler(sender, args) {
             $('#ctl00_ContentPlaceHolder1_txtCalendar').datepick({ defaultDate: +0, dateFormat: 'DD, M. dd, yyyy', selectDefaultDate: true });

          }

       });


 </script>
   <link href="../CSS/jquery.datepick.css" rel="stylesheet" type="text/css" />
    

<asp:TextBox ID="txtCalendar" Width="40%" CssClass="controltext" Font-Bold="True" runat="server" 
AutoPostBack="True" OnTextChanged="CalendarChange"></asp:TextBox>

Open in new window

Comment
Watch Question

add an immediate onblur on textbox focus.

Author

Commented:

Hi chaituu,

I used the information from http://forums.asp.net/t/1558262.aspx/1 and now the event gets fired, but when I go back to select another date the datepickers date does not correspond to the textbox date.
The textbox holds the correct date but the datepicker dropdown's date is the current date.
It seems to lose it on postback.
How do I make the dropdown hold the selection?
Thanks,

<script type="text/javascript">
       $(function() {
       $('#ctl00_ContentPlaceHolder1_txtCalendar').datepick({ defaultDate: +0, dateFormat: 'DD, M. dd, yyyy', selectDefaultDate: true,
       onSelect: function() {
          this.fireEvent && this.fireEvent('onchange') || $(this).change();
       }
        });

          Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

          function EndRequestHandler(sender, args) {
             $('#ctl00_ContentPlaceHolder1_txtCalendar').datepick({ defaultDate: +0, dateFormat: 'DD, M. dd, yyyy', selectDefaultDate: true,
             onSelect: function() {
                this.fireEvent && this.fireEvent('onchange') || $(this).change();
             }

              });

          }

       });


 </script>

Open in new window

how can you upload the screen shot where you have struck and the problem you are facing?

Author

Commented:
Hi chaituu:

I've attached a screen shot that shows the drop down date does not correspond to the date in the textbox.

Thanks
DatePicker-Error.png
you mean to say drop down date should be selected as July 20,2011 same as text box date.
tell me one thing are you entering date in the textbox manually or through datepicker you selected date and displaying it in textbox.

and agian if you selecting datepicker;drop down datepicker not showing correct date as showed in the textbox.

Author

Commented:

I am selecting a date from the date picker and it puts the correct date in the textbox.  When I come back to the date picker and open it to select another date, it is not the date in the textbox.

I looked at all the links you posted but none of say anything about the date pickers date.

Any other ideas?

Thanks
"you mean to say drop down date should be selected as July 20,2011 same as text box date. "

say yes or no.

Author

Commented:
yes