Skip navigation
Currently Being Moderated

Date picker

May 1, 2012 1:59 AM

Dear all,

I am try to incorporate a datepicker from jquirey some thing like http://jqueryui.com/demos/datepicker/#date-range

How can in corporate in website plz help me. I am download entire thing but lots of thing clubed.

Regards

Manoj

 
Replies
  • Currently Being Moderated
    May 1, 2012 2:43 AM   in reply to manojb05

    Hello Manoj,

     

    nice to see you! What concerns "datepicker": can you see "New window"?

    drdatepick01.jpg

     

    Clicking there you will get a website only with the datepicker. From there you could copy the necessary parts of the source code:

     

    drdatepick02.jpg

     

    Good luck!

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2012 7:00 AM   in reply to manojb05

    Hello Manoj,

     

    click his download menu, clik download again in th new website and you will see this:

     

    drdatepick03.jpg

     

     

     

    Click "speichern" (you will see store I think) > done.

     

    Hans-Günter

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    May 1, 2012 7:29 AM   in reply to manojb05

    Post an active link to your page.

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2012 7:30 AM   in reply to manojb05

    Hi,

     

    when these files are stored in your according directory/ies it should work.

     

    <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.3.custom.css" rel="stylesheet" />

                        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

                        <script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>

     

     

    Use an offline browser or load it up to your server to control it.

     

    Hans-Günter

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    May 1, 2012 7:38 AM   in reply to manojb05

    I think it is because you're missing the CSS file that defines the date picker popup styles.

     

    <link rel="stylesheet" href="../demos.css">

    as found in http://jqueryui.com/demos/datepicker/date-range.html

     
    |
    Mark as:
  • Currently Being Moderated
    May 2, 2012 5:58 AM   in reply to manojb05

    Hello Manoj,

     

    in addition to Sudarshan's hint about the missing "<link rel="stylesheet" href="../demos.css">" you should have a look whether you could download all the necessary files, needed for the datepicker. Here ist the original source code, maybe you could work first/again with it:

     

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>jQuery UI Datepicker - Select a Date Range</title>

    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">

    <script src="../../jquery-1.7.2.js"></script>

    <script src="../../ui/jquery.ui.core.js"></script>

    <script src="../../ui/jquery.ui.widget.js"></script>

    <script src="../../ui/jquery.ui.datepicker.js"></script>

    <link rel="stylesheet" href="../demos.css">

    <script>

    $(function() {

      var dates = $( "#from, #to" ).datepicker({

       defaultDate: "+1w",

       changeMonth: true,

       numberOfMonths: 3,

       onSelect: function( selectedDate ) {

        var option = this.id == "from" ? "minDate" : "maxDate",

         instance = $( this ).data( "datepicker" ),

         date = $.datepicker.parseDate(

          instance.settings.dateFormat ||

          $.datepicker._defaults.dateFormat,

          selectedDate, instance.settings );

        dates.not( this ).datepicker( "option", option, date );

       }

      });

    });

    </script>

    </head>

    <body>

     

    <div class="demo">

     

    <label for="from">From</label>

    <input type="text" id="from" name="from"/>

    <label for="to">to</label>

    <input type="text" id="to" name="to"/>

     

    </div><!-- End demo -->

     

     

     

    <div class="demo-description">

    <p>Select the date range to search for.</p>

    </div><!-- End demo-description -->

     

    </body>

    </html>

     

    Here my DW with your source code:

     

    drdateManoj.jpg

     

     

    and here with the original source code:

     

    drdateOrig.jpg

     

     

    As you can see that in your code are only three advices, the original code "wants" six.

     

    ... and don't forget to control the pathes!

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    May 21, 2012 2:37 AM   in reply to manojb05

    Hello manoj,

     

    you should control control your pathes  > ../ or ../../ eg.

     

    Hans-Günter

     

    P.S.

    Cant see a succes of my former maeesage.

     
    |
    Mark as:
  • Currently Being Moderated
    May 21, 2012 4:11 AM   in reply to manojb05

    look a bit more attentively at my screenshots from above

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points