To Get Selected Date From Calendar in PHP using Ajax, we use jQuery date-picker and bootstrap form. Here are the steps to get the selected date from the form using Ajax,
Live View Below
- Set up jQuery calendar using jQuery CDN.
- HTML form for input From and To Date.
- Ajax Script to POST the selected date.
- Create a PHP script to get posted date.
We made two major files, one file where we do create a calendar and form the other is a PHP script file to get selected data.
- index.php
- getDate.php
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<head> <meta charset="utf-8" /> <title>How to Get Selected Date From Calendar in PHP Using Ajax</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> </head> <div class="container col-md-5"> <div class="mb-3"> <label for="from" class="form-label">From</label> <input type="text" class="form-control" id="from" name="from" /> </div> <div class="mb-3"> <label for="to" class="form-label">to</label> <input type="text" class="form-control" id="to" name="to" /> </div> <div class="mb-3"> <button id="getDate" class="form-control btn btn-success">Get Date</button> </div> <p id="message"></p> </div> <script type="text/javascript"> $(function() { $( "#from" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 2, onClose: function( selectedDate ) { $( "#to" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 2, onClose: function( selectedDate ) { $( "#from" ).datepicker( "option", "maxDate", selectedDate ); } }); }); $(document).ready(function(){ $("#getDate").click(function(){ var from = $("#from").val(); var to = $("#to").val(); $.ajax({ url:'getDate.php', type:'post', data:{from:from,to:to}, success:function(response){ $("#message").html(response); } }); }); }); </script> |
Code Highlights:
- Using the ID attribute of the input field to set jQuery date-picker. Like this
$( "#to" ).datepicker({}); numberOfMonths: 2,using this we show 2 months all date on date-picker.- Using Ajax script we send the user-selected date to PHP script getDate.php
getDate.php
|
1 2 3 4 5 6 |
<?php $from = $_POST['from']; $to = $_POST['to']; echo "<b>From</b>: ".$from."<br><b>To</b>: ".$to; ?> |
Here we take the data and send it to in ajax response. Here is a live view of the process.
You can get more about date-picker from here: https://jqueryui.com/datepicker/
Also Check:
- Login with Google Account using PHP Step by Step
- How to Keep Value After Page Reload in PHP
- Save contact form data in CSV file using PHP
- 2 Ways to Open URL in New Tab Using JavaScript
- How to Embed PDF in Website Using HTML
Was this article helpful?
YesNo
[…] Get Selected Date From Calendar in PHP using Ajax […]
[…] Get Selected Date From Calendar in PHP using Ajax […]