How to display the selected datepicker value from the 1st page onto the 2nd page datepicker

Question

I'm working on a hotel booking website. I have basic form with Check-in, Check-out, No. of adults, No. of Children on the main page. When the user enters these details and clicks on "Book Now", another page(booking page) with more input fields will load. On this page, I want to display the selected values from the previous page. I can display the dropdown values but unable to display the datepicker value from the previous page onto this page's datepicker field. How can I get the datepicker values to display onto the 2nd page datepicker field? Thanks for your help.

I've tried to POST the values in the input field of the datepicker but it didn't work. I can get the 1st page datepicker values to POST as text but not in the datepicker field.

This is the datepicker input field on the main page

<div class="booking_dropdown">
    <input type="text" class="datepicker booking_input booking_input_a booking_in" placeholder="Check in" required="required" name="checkin">
</div>
<div class="booking_dropdown">
    <input type="text" class="datepicker booking_input booking_input_a booking_out" placeholder="Check out" required="required" name="checkout">
</div>

This is the second page datepicker input field

<div class="booking_dropdown">
    <input type="text" id="checkin" class="datepicker booking_input booking_input_a booking_in" placeholder="Check in" required="required" name="checkin" value="<?php echo date_format(date_create($_POST['checkin']),"d/m/Y");?>">
</div>
<div class="booking_dropdown">
<input type="text" id="checkout" class="datepicker booking_input booking_input_a booking_out" placeholder="Check out" required="required" name="checkout" value="<?php echo date_format(date_create($_POST['checkout']),"d/m/Y");?>">
</div>

This is the 2nd page datepicker code - UPDATED

function initDatePicker()
{
   if($('.datepicker').length)
   {
      $("#checkin").datepicker({
         minDate: 0,
         onSelect: function (date) {
            var date2 = $('#checkin').datepicker('getDate');
            date2.setDate(date2.getDate());
            $('#checkout').datepicker('setDate', date2);
            //sets minDate to dt1 date + 1
            $('#checkout').datepicker('option', 'minDate', date2);
         }
      });

      $('#checkout').datepicker({
        onClose: function () {
           var dt1 = $('#checkin').datepicker('getDate');
           var dt2 = $('#checkout').datepicker('getDate');
           //check to prevent a user from entering a date below date of dt1
           if (dt2 <= dt1) {
              var minDate = $('#checkout').datepicker('option', 'minDate');
              $('#checkout').datepicker('setDate', minDate);
           }
        }
     });

   }
}

I expect the selected datepicker value from the 1st page to display on the 2nd page datepicker field but it is not displaying the 1st page datepicker value. I want the date format to be dd/mm/yyyy.

CaffeinatedCod3r · Accepted Answer · 2019-09-10T17:51:12.180

1

Try changing

<input type="text">

to

<input type="date">

in both pages

Update : For jqueryui

<input type="text" value="<?php echo date_format(date_create($_POST['checkin']),"Y-m-d");?>">

Update 2 :

<input type="text" id="checkin" class="datepicker booking_input booking_input_a booking_in" name="checkin" value="<?php echo $_REQUEST["checkin"] ?>">
<input type="text" id="checkout" class="datepicker booking_input booking_input_a booking_in" name="checkout" value="<?php echo $_REQUEST["checkout"] ?>">

edited Sep 10 '19 at 17:51

answered Sep 03 '19 at 07:59

CaffeinatedCod3r

821
7
14

It looks like he is using Jquery UI or maybe bootstrap-datepicker. From what I can tell they both require you to set the value with jQuery. Your solution would work fine, just without the fancy design and features. – Emil Sep 03 '19 at 08:02
Yes. I'm using the jQuery UI Datepicker. It requires the input type to be text. – Ivan Tyler Sep 03 '19 at 08:06
@IvanTyler Can you post the output of – CaffeinatedCod3r Sep 03 '19 at 08:12
10/09/2019 is the output of It is taking the datepicker value from the 1st page. – Ivan Tyler Sep 03 '19 at 12:08
@IvanTyler In your value attribute of input text chage it to – CaffeinatedCod3r Sep 04 '19 at 13:06
When I change the "Value" in input, it is displaying the current date on 2nd page instead of the selected one. – Ivan Tyler Sep 04 '19 at 21:53
@CaffeinatedCod3r Thanks a lot! Yes. Your update for jQueryUI worked! But the problem is the date format is messed up on the 2nd page. Example, on the 1st page when I select 10/09/2019 to 11/09/2019(dd/mm/yyyy), on the 2nd page the date displayed is 09/10/2019 to 09/11/2019(dd/mm/yyyy). – Ivan Tyler Sep 08 '19 at 07:08
1

Just wanted to mention. I've changed the date format in the jQuery plugin file(jquery.ui.js) to dd/mm/yy. – Ivan Tyler Sep 08 '19 at 07:34
@CaffeinatedCod3r The date format is still messed up on the 2nd page. Is there a way to get the "value" without mentioning the dateformat? As I've changed the format in the jquery.ui.js file, will it work without mentioning the dateformat in value? – Ivan Tyler Sep 09 '19 at 22:50
@IvanTyler See latest update .Its working fine for me What do you mean by "messed up". Try this and please explain your actual output – CaffeinatedCod3r Sep 10 '19 at 17:52
1

@CaffeinatedCod3r All good! I removed dateformat and just added in value and it's working perfectly. The problem was with my js. I had some condition above the code I posted. I removed that and its working now. Thanks a lot for your help! – Ivan Tyler Sep 11 '19 at 21:38

score 0 · Answer 2 · answered Sep 03 '19 at 07:53

0

Maybe when you are initializing your jquery-ui-datepicker, the dates are getting replaced.

You can try in second page's JavaScript:

$('#checkin').datepicker("setDate", new Date(<?php echo $_POST['checkin']; ?>) );

jQuery-UI datepicker default date

answered Sep 03 '19 at 07:53

arifszn

41
2

Thanks for your reply. I've added my datepicker jQuery code in the question. When I add your suggested code, the 2nd page displays the current date and not the date that was selected on the 1st page. – Ivan Tyler Sep 03 '19 at 08:05
use the dateFormat option to format your data according to previous checkin post data format. – arifszn Sep 03 '19 at 08:35
I'm sorry. I'm new to this. How do I format date using dateFormat? The post date is in dd/mm/yyyy format. I've updated the first line of js. – Ivan Tyler Sep 04 '19 at 07:22
There should be quotes around the date value, otherwise it won’t be valid JS, i.e. `new Date("")` – Jan Misker Sep 04 '19 at 07:26

How to display the selected datepicker value from the 1st page onto the 2nd page datepicker

2 Answers2