5 Replies - 5210 Views - Last Post: 30 September 2009 - 11:12 AM

#1 dkean  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 24-September 09

Issue with jQuery datepicker

Post icon  Posted 28 September 2009 - 10:02 AM

The jQuery's datepicker seems not to work perfectly for me. If you select a format other than default and reload the page, it remembers the format and it returns to the date you set on the previous session.

example: "Wednesday, September 23, 2009"

That is great, but now on the second pass, if you pick another date it displays that new date with the default format. Hmmm... Well, I understand that nothing is perfect, so I tried to correct it by forcing a default format on it. Here is the code I got from jQuery first.
<HEAD>
 <!--... a bunch of my stuff, here, followed by the datepicker code -->

	<link type="text/css" href="development-bundle/themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>
	<script type="text/javascript" src="development-bundle/ui/ui.datepicker.js"></script>

	<link type="text/css" href="development-bundle/demos/demos.css" rel="stylesheet" />
	<script type="text/javascript">
	$(function() {
		$("#datepicker").datepicker();
		$("#format").change(function() { $('#datepicker').datepicker('option', {dateFormat: $(this).val()}); });
	});
	</script>
</head>
<body>
<div class="demo" style="position:absolute;left:85px;top:21px;width:502px;height:391px;"> 
	<p>Date: 
		<input type="text" id="datepicker" size="40"/>
	</p>
	<p>Format options:<br />
	<select id="format">
		<option value="mm/dd/yy">Default - mm/dd/yy</option>
		<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
		<option value="d M, y">Short - d M, yy</option>
		<option value="d MM, y">Medium - d MM, yy</option>
		<option value="DD, MM d, yy">Full - DD, MM d, yy</option>
		<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
	</select>
</p>
</div>



My thought was that the snippet "$(this).val()" would force a default format on the datepicker, but it seems not to want to do that. Here is what I did in the header

	$(function() {
		$("#datepicker").datepicker();
				$(this).val()="DD, MM d, yy";
		$("#format").change(function() { $('#datepicker').datepicker('option', {dateFormat: $(this).val()}); });
	});



Is there a way to default to a format and eliminate the SELECT object altogether?

TIA

Is This A Good Question/Topic? 0
  • +

Replies To: Issue with jQuery datepicker

#2 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Issue with jQuery datepicker

Posted 28 September 2009 - 03:56 PM

What is "this" referring to in this code(?):
	$(function() {
		$("#datepicker").datepicker();
				$(this).val()="DD, MM d, yy";
	});

also, you can't set .val() like that, the value is supposed to go inside of the parenthesis: $(this).val("DD, MM d, yy");. :)

Try something like:
	$(function() {
		$("#datepicker").datepicker();
		$("#format").change(function() { $('#datepicker').datepicker('option', 'dateFormat', $(this).val()); });
	});

and see if that works! According to the jQuery UI documentation it should! Hope it helps! :)

This post has been edited by Wimpy: 28 September 2009 - 04:01 PM

Was This Post Helpful? 0
  • +
  • -

#3 dkean  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 24-September 09

Re: Issue with jQuery datepicker

Posted 28 September 2009 - 07:56 PM

View PostWimpy, on 28 Sep, 2009 - 02:56 PM, said:

What is "this" referring to in this code(?):
CODE...
also, you can't set .val() like that, the value is supposed to go inside of the parenthesis: $(this).val("DD, MM d, yy");. :)

Try something like:
CODE...
and see if that works! According to the jQuery UI documentation it should! Hope it helps! :)


Hi Wimpy,

I have no clue as to what "this" refers to. I was hoping that it would be datepicker.

About the Val()="sdfsdf"... sorry... that was rather dumb, but exasperation tends to make you dumb anyway.. :rolleyes:

I tried $(this).val("DD, MM d, yy") and no beans...

I was rather hopeful when I found this site http://docs.jquery.c....7.2/Datepicker as per your suggestion and found this:

Utility functions

* $.datepicker.setDefaults( settings ) - Set settings for all datepicker instances.
* $.datepicker.formatDate( format, date, settings ) - Format a date into a string value with a specified format.
* $.datepicker.iso8601Week( date ) - Determine the week of the year for a given date: 1 to 53.
* $.datepicker.parseDate( format, value, settings ) - Extract a date from a string value with a specified format.


But, where do I insert this? I tried to do it in the <body> tag with the onload event, but it did nothing...
<body onload="$.datepicker.formatDate('DD, MM d, yy', new Date(2009, 9 - 1, 28))";>


So, I am at a standstill. I simply do not understand that $() reference in Javascript to make any sense of what is going on...

And to clarify my comments, yes I am trying to open the website with the date defaulting in the format "formatDate('DD, MM d, yy'..." I do not need the SELECT function as I do not want the user to mess with it. Secondly, it would be nice if I could default to the current date too... Any other suggestions are welcome.
Was This Post Helpful? 0
  • +
  • -

#4 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Issue with jQuery datepicker

Posted 29 September 2009 - 08:41 AM

Try something like:
<HEAD>
<!--... a bunch of my stuff, here, followed by the datepicker code -->

	<link type="text/css" href="development-bundle/themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>
	<script type="text/javascript" src="development-bundle/ui/ui.datepicker.js"></script>

	<link type="text/css" href="development-bundle/demos/demos.css" rel="stylesheet" />
	<script type="text/javascript">
		$(document).ready(funtion()
		{
			$("#datepicker").datepicker({ dateFormat: 'DD, MM d, yy' });
		});
	</script>
</head>
<body>
<div class="demo" style="position:absolute;left:85px;top:21px;width:502px;height:391px;">
	<p>Date:
		<input type="text" id="datepicker" size="40"/>
	</p>
</div>
and see if that gets you anywhere! Hope it helps! :)
Was This Post Helpful? 1

#5 dkean  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 24-September 09

Re: Issue with jQuery datepicker

Posted 30 September 2009 - 10:25 AM

View PostWimpy, on 29 Sep, 2009 - 07:41 AM, said:

Try something like:
<HEAD>
<!--... a bunch of my stuff, here, followed by the datepicker code -->

	<link type="text/css" href="development-bundle/themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>
	<script type="text/javascript" src="development-bundle/ui/ui.datepicker.js"></script>

	<link type="text/css" href="development-bundle/demos/demos.css" rel="stylesheet" />
	<script type="text/javascript">
		$(document).ready(funtion()
		{
			$("#datepicker").datepicker({ dateFormat: 'DD, MM d, yy' });
		});
	</script>
</head>
<body>
<div class="demo" style="position:absolute;left:85px;top:21px;width:502px;height:391px;">
	<p>Date:
		<input type="text" id="datepicker" size="40"/>
	</p>
</div>
and see if that gets you anywhere! Hope it helps! :)


It works great, thanx. Sorry I did not figure it out on my own. jQuery is a little convoluted, unless you understand Javascript well enough. I see now that the other lines concern the select. Very instructional.

So, now I finished HTML DOM and I'm on my way to Javascript. JQuery is great, but unless I understand more about JS I will be just a bleeding heart. Today's agenda... W3Schools Javascript!!! CARRAMBA Madame!

You kindness is appreciated Wimpy...

Best regards,
Was This Post Helpful? 0
  • +
  • -

#6 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Issue with jQuery datepicker

Posted 30 September 2009 - 11:12 AM

jQuery is actually pretty different from Javascript and has a almost complete different syntax, but it is still very important to know and understand the underlying concepts and architectures of jQuery before starting to "only" use jQuery. :)

Happy to have helped! Best of luck! :)

View Postdkean, on 30 Sep, 2009 - 07:25 PM, said:

It works great, thanx. Sorry I did not figure it out on my own. jQuery is a little convoluted, unless you understand Javascript well enough. I see now that the other lines concern the select. Very instructional.

So, now I finished HTML DOM and I'm on my way to Javascript. JQuery is great, but unless I understand more about JS I will be just a bleeding heart. Today's agenda... W3Schools Javascript!!! CARRAMBA Madame!

You kindness is appreciated Wimpy...

Best regards,

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1