title: Get the data of Date and pass it from another page using jquery/javascript/php
body: <p>I was hopeless to solve this :(</p>
  <p>Can you help me to figure out this :( I debug for a wholeday but nothing gonna change.
  i have two php file which is the index.php and home.php</p>
  <p>inside the index.php include the Date which is the daterangepicker and my concern is.
  imagine in index.php I want to pass the Date of Daterangepicker and send to home.php.</p>
  <p>I want to load the Date in home.php. something like that
  here's my code hope you get my point. I'm really sorry</p>
  <p>should i use php session? or localstorage ?
  I have an example output shown in image below
  <a href="https://i.stack.imgur.com/OEvVQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OEvVQ.png" alt="index.php" /></a></p>
  <p><a href="https://i.stack.imgur.com/ftrZo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ftrZo.png" alt="home.php" /></a></p>
  <p>and here's i want to achieved...</p>
  <p>disclaimer: the gif you see is the output that i want to achieved...
  <a href="https://i.stack.imgur.com/GPVv3.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GPVv3.gif" alt="Output" /></a></p>
  <p><strong>This is my code in index.php</strong></p>
  <pre><code>            &lt;!DOCTYPE html&gt;
              &lt;html lang=&quot;en&quot;&gt;
              &lt;head&gt;
                  &lt;meta charset=&quot;UTF-8&quot;&gt;
                  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
                  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
                  &lt;title&gt;1st Page&lt;/title&gt;
                  &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x&quot; crossorigin=&quot;anonymous&quot;&gt;
                  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css&quot; /&gt;
                  &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.js&quot; integrity=&quot;sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
                  &lt;script src=&quot;https://kit.fontawesome.com/526540c6e4.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
                  &lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.jsdelivr.net/momentjs/latest/moment.min.js&quot;&gt;&lt;/script&gt;
                  &lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js&quot;&gt;&lt;/script&gt;
                  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
              &lt;/head&gt;
              &lt;body&gt;
  
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;col-12 col-lg-4 offset-lg-4&quot;&gt;
                      &lt;h3  class=&quot;text-center&quot;&gt;1st page&lt;/h3&gt;
                          &lt;form action=&quot;home.php&quot; method=&quot;post&quot;&gt;
                              &lt;div id=&quot;reportrange&quot; class=&quot;form-control form-control-lg text-center form-group &quot; tabindex=&quot;2&quot; style=&quot;background: #fff; cursor: pointer; &quot;&gt;
                                  &lt;i class=&quot;fa fa-fw fa-calendar fa-lg text-muted&quot;&gt;&lt;/i&gt;&amp;nbsp;&lt;span id=&quot;span_booked&quot;&gt;&lt;/span&gt;     
                              &lt;/div&gt; 
                              &lt;button type=&quot;submit&quot; class=&quot;btn btn-success btn-block&quot; onclick=&quot;passvalues();&quot;&gt;Submit&lt;/button&gt;     
                          &lt;/form&gt;    
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;script&gt;
                      function passvalues(){
                          var firstname = document.getElementById('reportrange').value;
                          localStorage.setItem(&quot;txt_data&quot;,firstname);
                          return false;
                      }
                  &lt;/script&gt;
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>
  <p><strong>and here's my code in home.php</strong></p>
  <pre><code>            &lt;!DOCTYPE html&gt;
              &lt;html lang=&quot;en&quot;&gt;
              &lt;head&gt;
                  &lt;meta charset=&quot;UTF-8&quot;&gt;
                  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
                  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
                  &lt;title&gt;2nd Page&lt;/title&gt;
                  &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x&quot; crossorigin=&quot;anonymous&quot;&gt;
                  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css&quot; /&gt;
                  &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.js&quot; integrity=&quot;sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
                  &lt;script src=&quot;https://kit.fontawesome.com/526540c6e4.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
                  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js&quot; integrity=&quot;sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
                  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;    
                  &lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.jsdelivr.net/momentjs/latest/moment.min.js&quot;&gt;&lt;/script&gt;
                  &lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js&quot;&gt;&lt;/script&gt;
                  &lt;script src=&quot;script2.js&quot;&gt;&lt;/script&gt;
              &lt;/head&gt;
              &lt;body&gt;
  
              &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;col-4 offset-4&quot;&gt;
                  &lt;h3  class=&quot;text-center&quot;&gt;2nd page&lt;/h3&gt;
                      &lt;div id=&quot;reportrange&quot; class=&quot;form-control form-control-lg text-center form-group &quot; tabindex=&quot;2&quot; style=&quot;background: #fff; cursor: pointer; &quot;&gt;
                          &lt;i class=&quot;fa fa-fw fa-calendar fa-lg text-muted&quot;&gt;&lt;/i&gt;&amp;nbsp;&lt;span id=&quot;span_booked&quot;&gt;&lt;/span&gt;     
                      &lt;/div&gt;        
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>
  <p><strong>and lastly, my javascript script code</strong></p>
  <pre><code>    $(function() {
  
      var string_date = new Date();
      var string_year = string_date.getFullYear() + 1;
      var date_today = moment().format('ddd, MMM D, YYYY');
      var max_date = moment().format('ddd, MMM D,' + string_year);
  
      var start = moment();
      var end = moment().add(1, 'days');
  
        function cb(start, end) {
          $('#reportrange #span_booked').html(start.format('ddd, MMM D') + ' - ' + end.format('ddd, MMM D')); // Date String Format example: Mon, May 24 - Tue, May 25
        }
  
        $('#reportrange').daterangepicker({
          startDate: start,
          endDate: end,
          minDate: date_today, // Minimum Date 
          maxDate: max_date, // Maximum Date is date today and +1 from this year
          maxSpan: { &quot;days&quot;: 30 }, // the maximum days that the customer stay is 60 days only!
          locale: {
                cancelLabel: 'Close', 
                format: 'ddd, MMM D, YYYY',          
                monthNames: [
                            &quot;January&quot;,
                            &quot;February&quot;,
                            &quot;March&quot;,
                            &quot;April&quot;,
                            &quot;May&quot;,
                            &quot;June&quot;,
                            &quot;July&quot;,
                            &quot;August&quot;,
                            &quot;September&quot;,
                            &quot;October&quot;,
                            &quot;November&quot;,
                            &quot;December&quot;
                        ]
            },
          opens: 'center',
          cancelClass: &quot;btn btn-danger&quot;,
          applyButtonClasses: &quot;btn btn-success&quot;        
        }, cb);
        
        cb(start, end);
  
        $('#reportrange #span_booked').on('apply.daterangepicker', function(ev, picker) {
          $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        });
  
        $('#reportrange #span_booked').on('cancel.daterangepicker', function(ev, picker) {
          $(this).val('');
        });
  
      });
  </code></pre>