13 Replies Latest reply: May 21, 2012 4:11 AM by hans-g. RSS

    Date picker

    manojb05 Community Member

      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

        • 1. Re: Date picker
          hans-g. MVP

          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

          • 2. Re: Date picker
            manojb05 Community Member

            thanks hans for your prompt reply. In any chance how can copy that .js file because some time i am working offline (if we have a .js file its a safer for future other wise in future link is any updation sort ofthing)

            • 3. Re: Date picker
              hans-g. MVP

              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

              • 4. Re: Date picker
                manojb05 Community Member

                ya i am try it, some problem with coding because nothing happend with calander field?

                 

                 

                <!DOCTYPE html>

                <html lang="en">

                <head>

                          <meta charset="utf-8">

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

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

                                    <script type="text/javascript">

                                              $(function(){

                 

                 

                                                        // Accordion

                                                        $("#accordion").accordion({ header: "h3" });

                 

                                                        // Tabs

                                                        $('#tabs').tabs();

                 

                 

                 

                                                        // Dialog

                                                        $('#dialog').dialog({

                                                                  autoOpen: false,

                                                                  width: 600,

                                                                  buttons: {

                                                                            "Ok": function() {

                                                                                      $(this).dialog("close");

                                                                            },

                                                                            "Cancel": function() {

                                                                                      $(this).dialog("close");

                                                                            }

                                                                  }

                                                        });

                 

                                                        // Dialog Link

                                                        $('#dialog_link').click(function(){

                                                                  $('#dialog').dialog('open');

                                                                  return false;

                                                        });

                 

                 

                                                        // Datepicker

                                                        $('#datepicker').datepicker({

                                                                  inline: true

                                                        });

                 

                                                        // Slider

                                                        $('#slider').slider({

                                                                  range: true,

                                                                  values: [17, 67]

                                                        });

                 

                                                        // Progressbar

                                                        $("#progressbar").progressbar({

                                                                  value: 20

                                                        });

                 

                                                        //hover states on the static widgets

                                                        $('#dialog_link, ul#icons li').hover(

                                                                  function() { $(this).addClass('ui-state-hover'); },

                                                                  function() { $(this).removeClass('ui-state-hover'); }

                                                        );

                 

                                              });

                                    </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>

                • 5. Re: Date picker
                  sudarshan.t MVP

                  Post an active link to your page.

                  • 6. Re: Date picker
                    hans-g. MVP

                    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

                    • 7. Re: Date picker
                      manojb05 Community Member
                      • 8. Re: Date picker
                        sudarshan.t MVP

                        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

                        • 9. Re: Date picker
                          hans-g. MVP

                          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

                          • 10. Re: Date picker
                            manojb05 Community Member

                            thanks hans-g. i am really sorry to late reply.

                            Please chek my link some alignment problem or some code is missing http://www.newtonclients.com/date/date-range.html

                            Master link

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

                            how can i rectify

                            • 11. Re: Date picker
                              hans-g. MVP

                              Hello manoj,

                               

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

                               

                              Hans-Günter

                               

                              P.S.

                              Cant see a succes of my former maeesage.

                              • 12. Re: Date picker
                                manojb05 Community Member

                                my link all are in same directory. i dont get it, what path you saying

                                • 13. Re: Date picker
                                  hans-g. MVP

                                  look a bit more attentively at my screenshots from above