12 Replies Latest reply: May 10, 2012 9:30 AM by crhanes RSS

    Has anyone ever gotten the Date Picker to work?

    Brad Lawryk ACP/MVP

      Title says it all ... ;-)

       

      Brad Lawryk

      Adobe Community Professional: Dreamweaver

      Northern British Columbia Adobe Usergroup: Manager

      Thompson Rivers University: Dreamweaver Instructor

      My Adobe Blog: http://blog.lawryk.com

        • 1. Re: Has anyone ever gotten the Date Picker to work?
          Scott DRichards Community Member

          Are you referring to the jQuery Date Picker?  It works fine for me, what is the problem you are having?

           

          -Scott Richards

          Dreamweaver Team

          • 2. Re: Has anyone ever gotten the Date Picker to work?
            Brad Lawryk ACP/MVP

            Thanks for the reply Scott,

             

            Well, I can't get it to do anything, just displays an empty text box ... nothing else. So what problems I have after that I am not sure yet. Have to get it to actually display first. I have tried several times to contact support at the developers site but no reply was ever given.

             

            It looks like an amazing Date Picker.

             

            Brad Lawryk

            Adobe Community Professional: Dreamweaver

            Northern British Columbia Adobe Usergroup: Manager

            Thompson Rivers University: Dreamweaver Instructor

            My Adobe Blog: http://blog.lawryk.com

            • 3. Re: Has anyone ever gotten the Date Picker to work?
              Scott DRichards Community Member

              Are you talking about the jQuery UI Date Picker Widget that I posted for the Widget Browser? This Widget is just a <div> with an id it relies on jQuery to create the Datepicker control but Javascript needs to be running so you have to click the "Live View" button in Dreamweaver or select "Preview in Browser" after saving the file.  Then you will see the Datepicker control.

               

              -Scott Richards

              Dreamweaver Team

              • 4. Re: Has anyone ever gotten the Date Picker to work?
                Brad Lawryk ACP/MVP

                Hi Scott,

                 

                Yeah thats the one ... I think its the only Date Picker in the Widget Browser? I guess you have to be a jQuery programmer to use it? I know nothing of jQuery coding (well very little anyways) and have yet to get anything but a blank text field. So obviously I am doing something wrong.

                 

                Its was actually this widget that prompted me to write a blog article on the Widget Browser. I have to say though ... it looks like the best dang Date Picker I have seen anywhere. Very good job on it. Guess I have to learn jQuery now ........

                 

                Thanks again for the reply!

                 

                Brad Lawryk

                Adobe Community Professional: Dreamweaver

                Northern British Columbia Adobe Usergroup: Manager

                Thompson Rivers University: Dreamweaver Instructor

                My Adobe Blog: http://blog.lawryk.com

                • 5. Re: Has anyone ever gotten the Date Picker to work?
                  Scott DRichards Community Member

                  No sorry if I was not clear.  Getting the jQuery UI Datepicker Widget inserted in your site does not require knowledge of jQuery.

                   

                  After you insert the Widget in Dreamweaver you should see the bounding rectangle around the widget like below:

                   

                  InsertedInDw.PNG

                  Now Save the document.

                  Dreamweaver will prompt you to save all of the .js and .css files.

                  Dreamweaver should fix up the links to the corresponding location in your web site.

                  To see the Widget in Dreamweaver's Design View. The Javascript needs to get run because the code uses jQuery to transform that simple div into html and dynamically applies css to it.

                  Click the "Live View" button in the toolbar at the top of the document, it should like the following:

                   

                  LiveView.png

                  After you have saved the file, you can Preview in any browser

                   

                  PreviewInFirefox.PNG

                   

                  You can watch a tutorial that show's how to use the Widget Browser here:

                   

                  http://tv.adobe.com/watch/learn-dreamweaver-cs5/using-the-widget-browser/

                  • 6. Re: Has anyone ever gotten the Date Picker to work?
                    Brad Lawryk ACP/MVP

                    Thanks again Scott,

                     

                    But that simply just displays a calender on the page. It really has no function. It needs to pop up or display when entering a date in a form field. Just inserting it into a page really has no point to it?

                     

                    I am aware of how to use the widget browser, I use several of the widgets. I just see no way to get this one to work with a real form without know how to code jQuery or at least some documentation of what needs to be changed where. I certainly don't mind having to do some coding by hand, I actually enjoy it, but I can't make heads or tails out of what I have to do to tie it into a form and actually use it.

                     

                    I am beginning to feel like some of the people I try to help on the DW forums - probably over thinking it. But I just don't get it for some reason. Your time is appreciated.

                     

                    Brad Lawryk

                    Adobe Community Professional: Dreamweaver

                    Northern British Columbia Adobe Usergroup: Manager

                    Thompson Rivers University: Dreamweaver Instructor

                    My Adobe Blog: http://blog.lawryk.com

                    • 7. Re: Has anyone ever gotten the Date Picker to work?
                      Scott DRichards Community Member

                      To have the calendar pop up when you enter an edit field and fill in the contents with the selected date just replace the <div id="datepicker"></div> tag with <input type="text" id="datepicker" />.

                       

                      Here is what it looks like in Live View when you click in the edit field

                      Capture.PNG

                       

                      If you want to do something more than what is surfaced by the Widget Developer when you click on the Configure button you should reference the documentation for the widget.  There are great examples of different ways to use the DatePicker and different things it can do. They show the code and javascript parameters you need to specify to get the different functionality here:

                       

                      http://jqueryui.com/demos/datepicker/

                       

                      Also you can modify the css classes for the widget to the get the look you desire after inserting it in Dreamweaver.

                       

                      There is a link in the property inspector when the widget is selected to the Widgets documentation "Widget Help". Click on that for help on modifying the Widget beyond what is available in the Widget Browser.  See below:

                      Capture2.PNG

                      • 8. Re: Has anyone ever gotten the Date Picker to work?
                        EMSUser Community Member

                        After configuring my calandar to pup up, I can't get it to submit the Fields. The rest of my form is submitted through email, but the selected dates from the Calander aren't sent. Would you happen to know why?

                         

                        thanks.

                         

                        Edgar

                        • 9. Re: Has anyone ever gotten the Date Picker to work?
                          Scott DRichards Community Member

                          You can wire up the Date Picker to an edit field as I pointed in the above instructions and as long as the edit field is in your form it will be submitted when you click on the form.  If you want to submit multiple dates you are going to have to dive into the Javascript code for the jQuery datepicker.

                           

                          Here is the documentation and some examples:

                           

                          http://jqueryui.com/demos/datepicker/

                           

                          -Scott

                          • 10. Re: Has anyone ever gotten the Date Picker to work?
                            crhanes Community Member

                            I am trying to use the Date Picker on a form. It looks like everything is working but when I receive the form data the date is not received. What do you mean by 'wire up the Date Picker to an edit field'?

                             

                            Can I send you a link to my form to see what is wrong?

                             

                            Thanks,

                            Cindy

                            • 11. Re: Has anyone ever gotten the Date Picker to work?
                              Brad Lawryk ACP/MVP

                              Hi Cindy,

                               

                              I was the original poster of this thread and have since gotten it to work. It really isn't hard at all. I was making it harder than it should be.

                               

                              <script>

                                        $(function() {

                                                  $( "#datepicker" ).datepicker();

                                        });

                                        </script>

                               

                              Notice the  part in italics ... this is the part that tells the page which text field you want to have the datepicker used on. This script goes into the <Head> tag. I usually put it just before the closing </Head> tag so i can find it easily.

                               

                              <div class="demo">

                              <p>Date: <input type="text" id="datepicker"></p>

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

                               

                              This part is the actual form field in the form. Again notice the italics. You need to give your form field an Id. This should be the same as you have in the script code above. In other words the two parts I have in italics should be the same. This is what 'wires up' the form and the datepicker.

                               

                              Also you must make sure that you are also including links to the jQuery library in the header as well. Hope this helps you.

                              • 12. Re: Has anyone ever gotten the Date Picker to work?
                                crhanes Community Member

                                How do I  include links to the jQuery library in the header?

                                 

                                Cindy