Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 43
  1. #16
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    The link from your page to the jQuery UI css file is broken, that's why.

  2. #17
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear SB65,
    Ok I repaired it ready. I have two more question can the size of the calendar be smaller and another thing is that how to make the format to be dd/mm/yyyy.
    Quote Originally Posted by SB65 View Post
    The link from your page to the jQuery UI css file is broken, that's why.

  3. #18
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    You can have the calendar any size you want, it's just the css that's controlling it. Amend it to whatever you want.

    Date format: http://jqueryui.com/demos/datepicker/#option-dateFormat

  4. #19
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Sb65,
    I have tried like this $( ".pickdate" ).datepicker(); $( ".pickdate" ).datepicker( "option", "dateFormat", 'mm/dd/yyyy' ); but is still not showing how I want it to be.

  5. #20
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Too many ys. If you read the page properly you'll see that:

    Code:
    $( ".pickdate" ).datepicker({ dateFormat: 'mm/dd/yy' });
    will set up the datepicker with the required options.
    Last edited by SB65; 05-02-2011 at 03:18 PM.

  6. #21
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear SB65,
    Nope that give syntax error I have tried ready. I have also modified some of the .css size values but the size is still big. I have change width: 100px; /*must have*/ and height: 100px; /*must have*/



    Code:
    .ui-datepicker { width: 50px; padding: .2em .2em 0; display: none; }
    .ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
    .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
    .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
    .ui-datepicker .ui-datepicker-prev { left:2px; }
    .ui-datepicker .ui-datepicker-next { right:2px; }
    .ui-datepicker .ui-datepicker-prev-hover { left:1px; }
    .ui-datepicker .ui-datepicker-next-hover { right:1px; }
    .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
    .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
    .ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
    .ui-datepicker select.ui-datepicker-month-year {width: 50px;}
    .ui-datepicker select.ui-datepicker-month, 
    .ui-datepicker select.ui-datepicker-year { width: 49%;}
    .ui-datepicker table {width: 50px; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
    .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
    .ui-datepicker td { border: 0; padding: 1px; }
    .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
    .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
    .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
    .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
    
    /* with multiple calendars */
    .ui-datepicker.ui-datepicker-multi { width:auto; }
    .ui-datepicker-multi .ui-datepicker-group { float:left; }
    .ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
    .ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
    .ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
    .ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
    .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
    .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
    .ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
    .ui-datepicker-row-break { clear:both; width:100%; }
    
    /* RTL support */
    .ui-datepicker-rtl { direction: rtl; }
    .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
    .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
    .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
    .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
    .ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
    .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
    .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
    .ui-datepicker-rtl .ui-datepicker-group { float:right; }
    .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
    .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
    
    /* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
    .ui-datepicker-cover {
        display: none; /*sorry for IE5*/
        display/**/: block; /*sorry for IE5*/
        position: absolute; /*must have*/
        z-index: -1; /*must have*/
        filter: mask(); /*must have*/
        top: -4px; /*must have*/
        left: -4px; /*must have*/
        width: 100px; /*must have*/
        height: 100px; /*must have*/

  7. #22
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I missed the closing quote on my previous post, sorry, amended.
    EDIT: Although just looked at your page and you have:

    Code:
           	  $( ".pickdate" ).datepicker();
            	  $( ".pickdate ).datepicker({ dateFormat: mm/dd/yy' });
    You just need

    Code:
    $( ".pickdate" ).datepicker({ dateFormat: 'mm/dd/yy' });
    like it says in the documentation.

    Try changing the font-size on .ui-datepicker.
    Last edited by SB65; 05-02-2011 at 03:18 PM.

  8. #23
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear SB65,
    You miss one quote it should be like this $( ".pickdate" ).datepicker({ dateFormat: 'dd/mm/yy' }); but it still shows as mm/dd/yy.

  9. #24
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    You just need:

    Code:
    $( ".pickdate" ).datepicker({ dateFormat: 'dd/mm/yy' });
    Remove:

    Code:
    $( ".pickdate" ).datepicker();

  10. #25
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear SB65,
    Great it works perfectly now. Incase I want to change the font size in my text input is it possible? Then I saw multiple calendar is it where we can change the year immediately is it? Thank you.

  11. #26
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Incase I want to change the font size in my text input is it possible?
    That's your css, you can make whatever changes you want.

    Then I saw multiple calendar is it where we can change the year immediately is it?
    Do you mean selecting the year directly from the popup? If so amend your code to:

    Code:
    		$( ".pickdate" ).datepicker({dateFormat:"dd/mm/yy",changeYear:true});

  12. #27
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear SB65,
    Great it also works for month I checked ready. Beside this I got one more problem which is quite weird. Can you click on Driver Employement tab and just add one or two rows by clicking the top Add button then you press the bottom "Add" button. You will notice the Driver Details contents appear with the validations. But the Driver Details tab is not highlighted but Driver Employment tab is still highlighted. The snippet of code doing this is as below. The code is in the validateForm() function.

    Code:
    //If any errors occurred, return false, otherwise true
    			if(gotDriverNameError=="true" || gotDateOfBirthError=="true" || gotDriverNewICNoError=="true")
    			{
    				showTab("driverDetails");
    				return false;
    			}
    			else if(gotChild1DateOfBirthError=="true" || gotChild2DateOfBirthError=="true" || gotChild3DateOfBirthError=="true" )
    			{
    				showTab("driverNextOfKin");
    				return false;
    			}
    			else 
    				return true;

  13. #28
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Your second "add" button is a "submit" button - so the whole form will be submitted and validated if this is clicked. The first "add" isn't a submit.

  14. #29
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear SB65,
    Yes I know the second button is the "submit" button. The problem when it submit and finds errors I want it to be showing the relevant tab contents it shows no problem. The only problem it does not select/highlight the right tabs.

  15. #30
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Are you not intending to implement jQuery tabs? The datepicker is still not coming up under the input field. Still caused, as before, by your tab code I think.

    If not then you need to amend your validation code to show the right tab.


 
Page 2 of 3 FirstFirst 123 LastLast

Posting Permissions

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