beginnerForPHP Posted May 16, 2022 Share Posted May 16, 2022 (edited) How do I get a range of dates between the start and end dates using vue? My jsfiddle is as follows: i need to get the proper range of dates instead of the hard coded values in my jsfiddle. Any help is appreciated. https://jsfiddle.net/4b0z1exr/3/ Edited May 16, 2022 by beginnerForPHP Quote Link to comment Share on other sites More sharing options...
Barand Posted May 16, 2022 Share Posted May 16, 2022 I'd use PHP to generate the dates via an AJAX request, putting the returned range into the JS dateRange. <?php if (isset($_GET['ajax'])) { if ($_GET['ajax']=='daterange') { $d1 = new DateTime($_GET['start']); $d2 = new DateTime($_GET['end']); $d2->modify('+1 day'); $interval = new DateInterval('P1M'); $dp = new DatePeriod($d1, $interval, $d2); foreach ($dp as $d) { $dstr = $d->format('Y-m-d'); $dates[$dstr] = ['period'=>$dstr]; } $res = json_encode($dates) ; exit ($res); } } ?> <!DOCTYPE html> <html lang='en'> <head> <title>Sample</title> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type='text/javascript'> var dateRange function getRange() { let start = $("#start_period").val() let end = $("#end_period").val() $.get( "", {"ajax":"daterange", "start":start, "end":end}, function(resp) { dateRange = resp }, "JSON" ) } </script> </head> <body> <div> <input id="start_period" type="date"> <input id="end_period" type="date"> <button onclick="getRange()">Click Me!</button> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.