JQuery Datepicker Multiple Date Formats

Question

I'm using JQuery Datepicker to output the selected date value to two different divs. I'm not sure how to get the value of the datepicker and apply two different formats.

This is how far I got:

<script>
$(document).ready(function() {

    $("#datepicker").datepicker({ dateFormat: 'dd' });

    $("#datepicker").change(function() {
        $(".date-large").html($("#datepicker").val());
        $.datepicker.formatDate('yy/mm/dd', $(".date-small").html($("#datepicker").datepicker('getDate')));      
    });


  });
</script>

kalps - think-1st.com · Accepted Answer · 2011-06-19 08:56:07Z

2

You can use getDate method of datepicker to get current date from date picker.

In your code you have datepicker assigned to same element with 3 different option of date format, i am not sure that would work well as only the last line executed would be used. In your case small line dateformat will be used for #datepicker.

here is example of getting date form single datepicker.

  <script>
  $(document).ready(function() {

    $("#datepicker").datepicker({ dateFormat: 'D, M dd' });

    $("#datepicker").change(function() {
        $(".date-large").html($("#datepicker").datepicker('getDate'));

        // new edit
        var date_in_different_format = $.datepicker.formatDate('yy/mm/dd', $( ".date-large" ).datepicker('getDate'));
    }); 
  });
</script>

edited Jun 19, 2011 at 8:56

answered Jun 18, 2011 at 5:33

kalps - think-1st.com

1661 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gabriel Over a year ago

Hmm okay I see that. But how can I extract two different date formats from the same picker?

kalps - think-1st.com Over a year ago

I have also modified my answer! with // new edit.. you can get date in different format using dateFormat function provided with datepicker. i.e. $.datepicker.formatDate('yy/mm/dd', $( "#datepicker" ).datepicker('getDate'));

Gabriel Over a year ago

I incorporated your suggestions, but now "date-small" is not displaying any text when I choose a new date. 'getDate' doesn't work since I don't think this outputs HTML. Any other ideas? (edited script in my original post)

Collectives™ on Stack Overflow

JQuery Datepicker Multiple Date Formats

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related