SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dateformat jquery datepicker

    Code:
    		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.

  2. #2
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Head to http://jqueryui.com/demos/datepicker/#option-dateFormat and in the Options tab look at the dateFormat option.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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)?

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

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by antonyx View Post
    Am I along the right lines with this Paul (obviously this doesn't actually work)?
    How it's done depends on which date picker plugin you are using. Which one are you using?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi paul, i'm using this one

    http://www.monkeyphysics.com/mootool...t/2/datepicker

    this believe it or not was the simplest one i could find. i couldn't get any others to work

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by antonyx View Post
    hi paul, i'm using this one

    http://www.monkeyphysics.com/mootool...t/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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    <!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>

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by antonyx View Post
    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)
    okay then, let's start by setting the format option when you create the date picker
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been trying that in various combinations
    e.g.
    Code:
    	myPicker = new Picker.Date($$('a.open, #pk1date'), {
    			dateFormat: 'dd/mm/yy'
    			toggle: $$('.toggle'),
    			positionOffset: {x: -10, y: 20}
    		});

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by antonyx View Post
    I have been trying that in various combinations
    Look again at the documentation.
    Hint: you're doubling up
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by antonyx View Post
    paul sorry i really don't know.

    i'm sure there is a very basic syntax problem
    Let me spell it out more clearly then.

    You are using double letters when you should be only using single letters.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    	<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

  15. #15
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i have got the calendar working by adding the missing ,

    code is currently

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

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by antonyx View Post
    lol, a much clearer hint there!

    the code above does not load the calendar so now i'm certain there is a syntax error
    Each of the settings in your options need to be comma separated.

    Edit:

    already resolved, moving on
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i see. ok this is a new problem

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

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by antonyx View Post
    when i use this the calendar actually chooses d/m/y into the input field
    The date picker does this:

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •