JQuery Set Datepicker date from input value

I have a form with ajax update panels along with a jQuery Datepicker attached to a textbox.
When someone selects a date some back-end database stuff is done.
I have added the EndRequestHandler to rebuild the datepicker.
I have also had to add an onselect funtion to force the onchange event.
Problem I am having is the date selected on the datepicker does not match the date in the textbox.
What can I do to make this work as expected?

Thanks

 Dates don't match
SheritlwAsked:
Who is Participating?
 
Atique AnsariCommented:
I still think you have not passed date format to date picker.

Go to below URL.

http://jsfiddle.net/attu143/qVFcs/4/

Please try below code.

 
$( "#datepicker" ).datepicker({
    dateFormat: "DD, MM d, yy",
    defaultDate: new Date(1985, 00, 01)
}).val('Wednesday, July 20, 2011').trigger('change');

Open in new window

0
 
guveraCommented:
Please check the below link. They give some of the solution for this one.

http://forums.asp.net/t/1661826.aspx/1
http://stackoverflow.com/questions/5115067/jquery-datepicker-not-working-in-asp-net-page

Regards
Guvera
0
 
Atique AnsariCommented:
I think both the date formats are different. I mean the text box date and data pickers date.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Kumaraswamy RCommented:
Hi

set

  $('#dateselector').datepicker("setDate", new Date(2011,12,11) );

make it textbox value as above format
0
 
Kumaraswamy RCommented:
or

try

var txtDate = new Date();
var setDate =(txtDate .getMonth()+1) + '/' + txtDate .getDate() + '/' +         txtDate .getFullYear(); $("#dateselector'").val(setDate );
0
 
SheritlwAuthor Commented:
I need to set the date to the textbox's date.

Any ideas?
0
 
Atique AnsariCommented:
You can use Datepicker's onSelect event and set the date in textbox on Callback function.
0
 
SheritlwAuthor Commented:

As you can see from my example, I do use the onselect function.
I have no problem setting the date in the textbox, it's the datepickers dropdown date that doesn't show the correct date.
0
 
Atique AnsariCommented:
Are you trying to pass date in format like " Thursday, December 1, 2011 "

If yes then initialize datepicker using below code.

$( "#datepicker" ).datepicker( "option", "dateFormat", 'DD, MM d, yy' );

And if anywhere in script you are re-initializing datepicker then you must again pass dateformat.

Let me me know if I that's what you are looking for.
0
 
Atique AnsariCommented:
For example.

$( "#datepicker" ).datepicker({
    dateFormat: "DD, MM d, yy",
    setDate: "Wednesday, July 20, 2011"
});

Please find the below URL for the same.
http://jsfiddle.net/attu143/qVFcs/
0
 
Atique AnsariCommented:
Updated code.

 
$( "#datepicker" ).datepicker({
    dateFormat: "DD, MM d, yy",
    defaultDate: new Date(1985, 00, 01)
}).val('Wednesday, July 20, 2011').trigger('change');

Open in new window

0
 
SheritlwAuthor Commented:

I have the formatting set on the datepicker and I also have the endRequest to rebuild the selector.
The problem is the datepickers selected date matching the textboxes date.
For example...
Select date July 20 2011 it gets placed in the associated textbox which activates server side code/postback.  After postback the textbox still shows the selected date of July 20 2011, but when you click to show the datepicker, it's selected date is the default date, today.
See datepicker/textbox screen shot above.

Thanks

<script type="text/javascript">
   $(function() {
      $('#ctl00_ContentPlaceHolder1_txtCalendar').datepicker({ dateFormat: 'DD, M dd, yy' });

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

      function EndRequestHandler(sender, args) {
         $('#ctl00_ContentPlaceHolder1_txtCalendar').datepicker({ dateFormat: 'DD, M dd, yy' });
      }

   });
   
   
	</script>

Open in new window

0
 
Atique AnsariCommented:
Can you please post your link here. I am still don't understand what you want to achieve?
0
 
SheritlwAuthor Commented:

The screen that uses the datepicker requires a login.
I have posted another screen shot that pin-points what I am talking about.

Thanks for your help
DatePicker-Error.png
0
 
SheritlwAuthor Commented:

Thank you, thank you... thank you.
With your emphasis on the dateformat, I decided I needed to look at formats in code behind.
When I went through the code, I had set the date using the tolongdatestring. Once I changed to the right format, it worked!
Just in case anyone else has the same problem, I posted my code below.

Thank you again...


'The jQuery that handles postback

<script type="text/javascript">
   $(function() {
      $('#ctl00_ContentPlaceHolder1_txtCalendar').datepicker({ dateFormat: 'DD, M dd, yy' });

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

      function EndRequestHandler(sender, args) {
         $('#ctl00_ContentPlaceHolder1_txtCalendar').datepicker({ dateFormat: 'DD, M dd, yy' });
      }

   });
</script>

'Code behind correct date format

 Me.txtCalendar.Text = DateTime.Now.ToString("dddd, MMM dd, yyyy")

or

Dim d As String = Date.Parse(Me.txtCalendar.Text).ToString("dddd, MMM dd, yyyy")

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.