Skip navigation
RCMajor
Currently Being Moderated

JQuery UI Datepicker

Feb 14, 2013 4:53 PM

 

I've been searching the web for days and can't find the solution to my problem.

 

Window7

DWCS6

Inserted a Form

Inserted a Form text field

Dragged the pre-set file from Widget Browser in the Form - showing as a blue <div> box below the text field.

In Live showing a Text box with the calendar below.

 

So far so good however I'm stuck beyond this point.

 

I've tried to assign behaviors without success.

 

This datepicker is too good to pass up.

Help would be greatly appreciated.

 

"Just purchased DWCS6 a month ago....be nice!" 

 
Replies
  • Currently Being Moderated
    Feb 15, 2013 4:36 AM   in reply to RCMajor

    The documentation is here: http://api.jqueryui.com/datepicker/ -  this may appear daunting What is the issue - do you want to display the date in the input field once a date is selected?

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2013 8:32 AM   in reply to RCMajor

    Yes you need to code using jQuery I'm afraid

     

    To beging with, here's how to display the date in the text input when it's selected:

    $(function() {

          $("#datepicker").datepicker({ showOtherMonths: false, onSelect : function(dateText, inst){
               $("#date").attr({value: dateText});     
          }});
    });

    #datepicker is the ID of your date picker <div>, and #date is the ID for your <input>.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2013 9:38 AM   in reply to RCMajor

    You need to replace it, not adding to it.

     

    --

    Kenneth Kawamoto

    htp://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2013 10:45 AM   in reply to RCMajor

    No it's not really complex.

     

    Below should do:

    • Hide the date picker initially
    • Show the date picker when #date <input> is clicked
    • Display the date to #date <input> when a date is selected, then hide the date picker

    $(function() {

         $("#datepicker").datepicker({ showOtherMonths: false, onSelect : function(dateText, inst){

              $("#date").attr({value: dateText});   

              $(this).hide(500);

         }}).hide();

     

         $("#date").click(function() {

              $("#datepicker").show(500)

         });

    });

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    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