JQuery UI - Datepicker - Display date in another element

Question

I have the following code on Codepen.

My aim is to allow users to input their own dates and then it gets outputted into another element in a more readable format e.g. Type date or choose date, and then display date in a paragraph tag in the following format "Wednesday 7th August".

Also, I have a few additional pieces of functionality I require, which would be awesome if someone could give me some direction;

Once the date is outputted into paragraphs for each input, output the number of nights in between the two dates into another element
Be able to use the same date picker for both inputs. similar to the behaviour used on the following form; http://www.hipmunk.com/hotels-search

It would great if you guys could help me out.

Thanks in advance,

B

Raidri · Accepted Answer · 2013-08-07 09:24:09Z

1

Look here to get you started:

$(function() {
    $( "#datepicker" ).datepicker({
        altField: "#alternate",
        altFormat: "DD, d MM, yy"
    });
});

answered Aug 7, 2013 at 9:24

Raidri

17.7k11 gold badges69 silver badges70 bronze badges

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

1 Comment

PI. Over a year ago

Thanks, but this seems to be limited to input fields. When I change the alternative field to a paragraph is does not work

Community · Accepted Answer · 2017-05-23 12:20:23Z

0

You can catch the select event of the datepicker, and display the output in your p tag:

$(function() {
    $('#datepicker').datepicker( {
        onSelect: function(date) {
            // Format and display the date in a p tag
            $('#yourptag').html( $.datepicker.formatDate('dd M yy', date) );
        }
    });
});

For finding the date difference, you can refer to: Find difference between two dates picked from jQuery datepicker

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Aug 7, 2013 at 10:29

Praxis Ashelin

5,2472 gold badges22 silver badges46 bronze badges

Collectives™ on Stack Overflow

JQuery UI - Datepicker - Display date in another element

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related