Using jQuery Datepicker and Dialog Box To Select Date Range

This post has been updated and moved to:
http://www.jensbits.com/2011/09/06/using-jquery-datepicker-and-dialog-box-to-select-date-range-2/

Posted in jquery, Web development. Tags: . Permalink. Both comments and trackbacks are closed.

13 Comments

  1. Matthew
    August 23, 2010 at 8:33 pm | Permalink

    Thanks Jen worked perfectly :)

  2. August 23, 2010 at 2:42 pm | Permalink

    @Matthew
    Bump up the z-index on the ui-datepicker class. I used 1009 and it worked. You can go higher if you want. I also tried 9999 and it worked.

  3. Matthew
    August 23, 2010 at 11:33 am | Permalink

    Heres the link to the test page, I tested it on the latest versions of chrome, firefox and internet explorer all on windows 7. Hope that helps

    https://www.onlinefilefolder.com/3sDilNKUZK5qs8

  4. August 23, 2010 at 7:22 am | Permalink

    @Matthew
    If you could send me a test page, I may be able to help.
    Also, let me know what browser and OS you are testing it in.

  5. Matthew
    August 22, 2010 at 11:02 am | Permalink

    Thanks Jen, this script has really helped me learn alot about Jquery dialog and datepicker functions. However I am having the same trouble as @thom.

    I havnt modified your code at all really so I dont understand why the calender appears behind the dialog box the second time it gets loaded?

    any help would be greatly appreciated

  6. February 22, 2010 at 7:02 pm | Permalink

    @Thom

    Try loading the dialog another way:

    http://bit.ly/aykowY

  7. thom
    February 22, 2010 at 6:18 pm | Permalink

    I would love to give you a URL, but it is on a password protected site so I do not really want to publish that here. I am calling this a little differently:

    $('#addPayment').click(function() {
    $('#dialog').dialog({
    modal: true,
    autoOpen: false,
    width: 500,
    height: 500,
    close: function() {
    $('#date').datepicker('hide')
    }
    }).load('/trip/<?=$trip_id?>/payments/addPayment/modal').dialog('open');
    return false;
    });

    It seems like it is calling this function the initial time loaded, but not on subsequent times. The width is not even correct on the subsequent dialog boxes.

  8. February 22, 2010 at 6:07 pm | Permalink

    @Thom
    I don't know. I tried to replicate with my demo and couldn't. If you can send me a URL to a test page where this is happening, maybe I can take a look.

    In the meantime, I updated my code a bit to clear the input boxes and error/success message. Nothing major.

  9. thom
    February 22, 2010 at 3:55 pm | Permalink

    HI. THanks for the script. I have been looking for this all day.

    I have a problem where the second time I call the dialog box the datepicker is behind the dialog. Any ideas why or how the z-index would not be hte same both times?

    Thom

  10. Gaurav Dhol
    February 16, 2010 at 5:03 am | Permalink

    HI

    thanks

    it is working