myPicker = new Picker.Date($$('a.open, #pk1date'), {
toggle: $$('.toggle'),
positionOffset: {x: -10, y: 20}
});
I am trying to change the date format to DD/MM/YY
Honestly, on this occasion I have tried every possible combination using dateFormat: ‘dd/mm/yy’ within this code but I simply cannot get it working because of syntax issues.
Can someone please assist me.
also within this code i would only future days (including current day) to be displayed, can that be added in this section also or deeper into the code?
Head to http://jqueryui.com/demos/datepicker/#option-dateFormat and in the Options tab look at the dateFormat option.
Am I along the right lines with this Paul (obviously this doesn’t actually work)?
<script>
window.addEvent('domready', function(){
var dateFormat = $( "a.open" ).myPicker( "#pk1date", "dateFormat" ), {
$( "a.open" ).myPicker( "#pk1date", "dateFormat", 'dd-mm-yy' )
toggle: $$('.toggle'),
positionOffset: {x: -10, y: 20}
});
$('open').addEvent('click', function(e){
e.stop();
myPicker.open();
});
$('close').addEvent('click', function(e){
e.stop();
myPicker.close();
});
$('toggle').addEvent('click', function(e){
e.stop();
myPicker.toggle();
});
});
</script>
How it’s done depends on which date picker plugin you are using. Which one are you using?
hi paul, i’m using this one
http://www.monkeyphysics.com/mootools/script/2/datepicker
this believe it or not was the simplest one i could find. i couldn’t get any others to work
Well if you scroll down on that page, you will see a Date Formatting section.
The default date format is shown further up on the page as being d-m-y
Are you wanting to just adjust it so that slashes are used instead of dashes?
Hi Paul, what I want is the date to be displayed in this format dd/mm/yy (by default it is displaying mm/dd/yy) and I do not want past dates to be selectable. Only the current and future dates.
here is a preview of it working but showing the month before the day
http://www.londonheathrowcars.com/bookings/testdate.asp
here is the code for that page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script src="mootools-core.js" type="text/javascript"></script>
<script src="mootools-more.js" type="text/javascript"></script>
<script src="Source/Locale.en-US.DatePicker.js" type="text/javascript"></script>
<script src="Source/Picker.js" type="text/javascript"></script>
<script src="Source/Picker.Attach.js" type="text/javascript"></script>
<script src="Source/Picker.Date.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" />
<link href="Source/datepicker.css" rel="stylesheet">
<script>
window.addEvent('domready', function(){
myPicker = new Picker.Date($$('a.open, #pk1date'), {
toggle: $$('.toggle'),
positionOffset: {x: -10, y: 20}
});
$('open').addEvent('click', function(e){
e.stop();
myPicker.open();
});
$('close').addEvent('click', function(e){
e.stop();
myPicker.close();
});
$('toggle').addEvent('click', function(e){
e.stop();
myPicker.toggle();
});
});
</script>
</head>
<body>
<p><input class="biginput" type="text" id="pk1date" name="pk1date" /></p>
</body>
</html>
okay then, let’s start by setting the format option when you create the date picker
I have been trying that in various combinations
e.g.
myPicker = new Picker.Date($$('a.open, #pk1date'), {
dateFormat: 'dd/mm/yy'
toggle: $$('.toggle'),
positionOffset: {x: -10, y: 20}
});
Look again at the documentation.
Hint: you’re doubling up
paul sorry i really don’t know.
i’m sure there is a very basic syntax problem, i’ve tried putting the format on a single line eg var myPicker = $(‘#pk1date’).datepicker({ dateFormat: ‘dd-mm-yy’ }); and i have tried lots of different examples online and I just can’t get it working. you should realise that i have no knowledge at all of basic javascript syntax ie how the { and ’ should separate the various elements
Let me spell it out more clearly then.
You are using double letters when you should be only using single letters.
<script>
window.addEvent('domready', function(){
myPicker = new Picker.Date($$('a.open, #pk1date'), {
dateFormat: 'd/m/y'
toggle: $$('.toggle'),
positionOffset: {x: -10, y: 20}
});
$('open').addEvent('click', function(e){
e.stop();
myPicker.open();
});
$('close').addEvent('click', function(e){
e.stop();
myPicker.close();
});
$('toggle').addEvent('click', function(e){
e.stop();
myPicker.toggle();
});
});
</script>
lol, a much clearer hint there!
the code above does not load the calendar so now i’m certain there is a syntax error
ok i have got the calendar working by adding the missing ,
code is currently
<script>
window.addEvent('domready', function(){
myPicker = new Picker.Date($$('a.open, #pk1date'), {
dateFormat: 'dd/mm/yy',
toggle: $$('.toggle'),
positionOffset: {x: -10, y: 20}
});
$('open').addEvent('click', function(e){
e.stop();
myPicker.open();
});
$('close').addEvent('click', function(e){
e.stop();
myPicker.close();
});
$('toggle').addEvent('click', function(e){
e.stop();
myPicker.toggle();
});
});
</script>
BUT with both dateFormat: ‘d/m/y’, AND dateFormat: ‘dd/mm/yy’, the format is still wrong
Each of the settings in your options need to be comma separated.
already resolved, moving on
Let’s go back to the documentation then.
I see that you’re using dateFormat, whereas the documentation just shows that it should be called format instead.
i see. ok this is a new problem
myPicker = new Picker.Date($$('a.open, #pk1date'), {
format: 'd/m/y',
toggle: $$('.toggle'),
positionOffset: {x: -10, y: 20}
});
when i use this the calendar actually chooses d/m/y into the input field
The date picker does this:
var formatted = date.format(this.options.format),
passing the date formatting on to the mootools library to format things itself.
That seems to indicate that the date picker is now doing its part properly now, and that what you have to now look at mootools and fix it up so that it’s date.format() method does its job in a manner that is expected by the date picker that you’re using.