How to show a date a user picked with php?

Question

I'm making a restaurant website for a school project and my group thought it would be cool to do online reservations. For the online reservation, we wanted it to be like a form where they input their name, pick the date and time, and submit the form and the success page will show them the date and time for their reservation. Like a "Thank you _____, your reservation is set for DATE at Time". I was able to accomplish this with PHP, I made a form

<form action= "reservation_post.php" method="post">

  <div class="resNames">

    <div class = "resFlexGroup">
      <label class="resTitle">First Name</label>
      <input type="text" name="fName" class="resHalf">
    </div>

    <div class = "resFlexGroup">
      <label class="resTitle">Last Name</label>
      <input type="text" name="lName" class="resHalf">
    </div>
  </div>

  <div class="resSizeDateTime resRow">

    <div class=" flexSmallThird">
      <label class="resTitle">Party Size</label>
      <select class="partySize" name="partySize">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
       </select>
     </div>


    <div class = "flexThird">
      <label class="resTitle">Reservation Date</label>
      <input type="text" name="datepicker" id="datepicker">
    </div>



      <div class="flexThird">
      <label class="resTitle">Reservation Time</label>
      <select id="partySize" name="resTime" class="resHalf">
        <option value="1:00 PM">1</option>
        <option value="2: 00 PM">2</option>
        <option value="partyThree">3</option>
        <option value="partyFour">4</option>
        <option value="partyFive">5</option>
        <option value="partySix">6</option>
        <option value="partySeven">7</option>
        <option value="partyEight">8</option>
        <option value="partyNine">9</option>
        <option value="partyTen">10</option>
       </select>
     </div>

</div>

  <div class="resAccess resRow">
    <input type="checkbox" name="access" class="checkAccess"> <label class="resTitle">Need Accessable Seating?</label>
  </div>

    <div id="yesAccess">
      <label class="resTitle">How many in party?</label>
      <select class="partySize" name="partyAccess">
         <option value="partyOne">1</option>
         <option value="partyTwo">2</option>
         <option value="partyThree">3</option>
         <option value="partyFour">4</option>
         <option value="partyFive">5</option>
         <option value="partySix">6</option>
         <option value="partySeven">7</option>
         <option value="partyEight">8</option>
         <option value="partyNine">9</option>
         </select>
       </div>
                 <div class="submit-button">
    <input type="Submit" name="SubmitThis" value="Submit" class="submit-btn">
                </div>
   </form>

That's the code I have for the form.

<?php
include ('components.php');
$fName = $_POST['fName'];
$lNamee = $_POST['lName'];
$partySize = $_POST['partySize'];
$date = $_POST['var'];
$time = $_POST['resTime'];
$checkbox = $_POST['access'];
$bgcolor = $_POST['partyAccess'];

$permitted_chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
$code = substr(str_shuffle($permitted_chars), 0, 5);

$output="<p>Thank you <span class='resEmphasis'>$fName</span>, we'll have a table ready for your party of <span class='resEmphasis'>$partySize</span> at <span class='resEmphasis'>$time</span> on <span class='resEmphasis'>$date</span>. </p> <p>Your code is:</p><span id='resCode'>$code</span> <p>Show this code to the host to check in.</p>";

?>

This is the code I have to call on the user input.

(Sorry for all the divs and such i used it for CSS. Also it's pretty incomplete so I know the time is wrong.)

For the date, I was able to get it to work when I used the HTML date input, but when I called the function on the other page it was formatted like "2020-04-03", which I found very ugly and not very user friendly. I read that there was no way to reformat it, so I decided to download the JQuery UI datepicker. I personally found it to be more aesthetically pleasing, but now I had no idea how to call on the function and show it to the user. Also when I was calling on the date picker I also tried using datepicker instead of var but i still had no results. I think what i have to do is somehow get the selected value from the jquery part but I don't know how to do that ):

It's just for a school project so if I have to resort back to the HTML input I will but it's so ugly and I really don't want to do that. Also if there's a way to do that with the time I would rather do that too, I just made it a dropdown menu so I could format it to look more user friendly in the post form.

jQuery Datepicker will give you a nice UI for users to select dates, and you can configure the format they are displayed on the page and sent to your backend. [Check the examples](https://jqueryui.com/datepicker/), and the [`dateFormat` option](https://api.jqueryui.com/datepicker/#option-dateFormat). Alternatively, use an HTML5 `date` input, as already suggested. The format that sends to your backend will be `YYYY-MM-DD`, you could then use PHP `DateTime` to parse and format it, [for example](https://stackoverflow.com/questions/2767324/how-to-parse-a-date-string-in-php). — Don't Panic, Apr 22 '20 at 03:09

score 0 · Answer 1 · answered Apr 24 '20 at 20:14

if you are storing the data in the database, you can create an SQL query using the function DATE_FORMAT(), it will help you get the date and the time with the format you want, here is how it works:

SELECT pseudo, message, DATE_FORMAT(date, '%d/%m/%Y %Hh%imin%ss') AS
date FROM members

where date has DATETIME as a type in my database, and the second parameter contain symbols of how you want to display your date.

How to show a date a user picked with php?

1 Answers1