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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Kumaraswamy RCommented:
Hi

set

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

make it textbox value as above format
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.