diff --git a/src/Components/Info.js b/src/Components/Info.js
index a7f12305..7366f838 100644
--- a/src/Components/Info.js
+++ b/src/Components/Info.js
@@ -31,6 +31,8 @@ import delivery_title from "../assets/info_delivery.png";
 import gradient from "../assets/gradient.png";
 import revieworder from "../assets/info_review_order.png";
 import firebase from "./Firestore";
+import DatePicker from "react-date-picker";
+import TimePicker from "react-time-picker";
 import {
   FacebookShareButton,
   FacebookIcon,
@@ -49,6 +51,8 @@ import { BitlyClient } from "bitly";
 const REACT_APP_BITLY_KEY = `${process.env.REACT_APP_BITLY_KEY}`;
 const bitly = new BitlyClient(REACT_APP_BITLY_KEY, {});
 const analytics = firebase.analytics();
+const time_now = new Date();
+time_now.setMinutes(time_now.getMinutes());
 function onLoad(name, item) {
   analytics.logEvent(name, { name: item });
 }
@@ -101,6 +105,42 @@ const popover = (
   </Popover>
 );
 
+const dayName = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+];
+
+const monthNames = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+function formatAMPM(date) {
+  var hours = date.getHours();
+  var minutes = date.getMinutes();
+  var ampm = hours >= 12 ? "pm" : "am";
+  hours = hours % 12;
+  hours = hours ? hours : 12; // the hour '0' should be '12'
+  minutes = minutes < 10 ? "0" + minutes : minutes;
+  var strTime = hours + ":" + minutes + " " + ampm;
+  return strTime;
+}
+
 export class Info extends React.Component {
   constructor(props) {
     super(props);
@@ -117,7 +157,9 @@ export class Info extends React.Component {
       postal: "",
       notes: "",
       customerNumber: "",
-      deliveryTime: "",
+      time: time_now.getHours() + ":" + time_now.getMinutes(),
+      date: time_now,
+      datetime: time_now,
       id: this.props.id || queryString.parse(this.props.location.search).id,
       galleryOpened: false,
       retrieved: false,
@@ -212,10 +254,6 @@ export class Info extends React.Component {
       this.setState({
         customerNumber: inputValue,
       });
-    } else if (inputField === "deliveryTime") {
-      this.setState({
-        deliveryTime: inputValue,
-      });
     } else if (inputField === "unit") {
       this.setState({
         unit: inputValue,
@@ -253,8 +291,8 @@ export class Info extends React.Component {
   callPostal = (postal) => {
     return fetch(
       "https://developers.onemap.sg/commonapi/search?searchVal=" +
-        postal +
-        "&returnGeom=Y&getAddrDetails=Y"
+      postal +
+      "&returnGeom=Y&getAddrDetails=Y"
     )
       .then(function (response) {
         return response.json();
@@ -345,7 +383,14 @@ export class Info extends React.Component {
       " " +
       this.state.postal +
       "*";
-    text = text + "\nDelivery Date/Time: *" + this.state.deliveryTime + "*";
+    let time_text = dayName[this.state.datetime.getDay()] +
+      " " +
+      this.state.datetime.getDate() +
+      " " +
+      monthNames[this.state.datetime.getMonth()] +
+      " " +
+      formatAMPM(this.state.datetime);
+    text = text + "\nDelivery Date/Time: *" + time_text + "*";
     if (this.state.notes !== "") {
       // only display notes if customer added
       text = text + "\nAdditional notes: _" + this.state.notes + "_";
@@ -407,11 +452,11 @@ export class Info extends React.Component {
         this.state.orderData[idx] === 0.0
           ? this.state.totalPrice
           : parseFloat(this.state.totalPrice) -
-            parseFloat(
-              this.state.data.menu_combined[idx].price
-                ? this.state.data.menu_combined[idx].price
-                : 0
-            ),
+          parseFloat(
+            this.state.data.menu_combined[idx].price
+              ? this.state.data.menu_combined[idx].price
+              : 0
+          ),
       orderData: update(this.state.orderData, {
         [idx]: {
           $set:
@@ -436,8 +481,8 @@ export class Info extends React.Component {
             ? (toPush = true)
             : (toPush = false)
           : element.name && element.price
-          ? (toPush = true)
-          : (toPush = false);
+            ? (toPush = true)
+            : (toPush = false);
         if (toPush) {
           data.push(
             <div>
@@ -533,8 +578,8 @@ export class Info extends React.Component {
                             <b>
                               {this.state.orderData[i] !== undefined
                                 ? this.state.orderData[
-                                    JSON.parse(JSON.stringify(i))
-                                  ]
+                                JSON.parse(JSON.stringify(i))
+                                ]
                                 : 0}
                             </b>
                           </span>
@@ -583,7 +628,7 @@ export class Info extends React.Component {
           value="click"
           className={`image-gallery-fullscreen-button${
             isFullscreen ? " active" : ""
-          }`}
+            }`}
           onClick={onClick}
         />
       );
@@ -645,9 +690,47 @@ export class Info extends React.Component {
   handleSubmit = async (event) => {
     event.preventDefault();
     console.log("submit");
-    var text = await this.setOrderText();
-    var url = "https://wa.me/65" + this.state.data.contact + "?text=" + text;
-    window.location = url;
+    if (time_now > this.state.datetime) {
+      alert(
+        "Time cannot be earlier than now"
+      );
+    } else {
+      var text = await this.setOrderText();
+      var url = "https://wa.me/65" + this.state.data.contact + "?text=" + text;
+      window.location = url;
+    }
+  };
+
+  handleTime = async (time) => {
+    this.setState({
+      time: time,
+      datetime: new Date(
+        this.state.date.getMonth() +
+        1 +
+        "/" +
+        this.state.date.getDate() +
+        "/" +
+        this.state.date.getFullYear() +
+        " " +
+        time
+      ),
+    });
+  };
+
+  handleDate = async (date) => {
+    this.setState({
+      date: date,
+      datetime: new Date(
+        date.getMonth() +
+        1 +
+        "/" +
+        date.getDate() +
+        "/" +
+        date.getFullYear() +
+        " " +
+        this.state.time
+      ),
+    });
   };
 
   render() {
@@ -721,60 +804,60 @@ export class Info extends React.Component {
     return this.state.retrieved ? (
       <div className={this.state.className} style={{ paddingTop: "56px", width: "100%" }}>
         {this.state.hasReviewEditMessage ||
-        this.state.hasReviewDeleteMessage ? (
-          <div
-            className="row"
-            style={{
-              marginTop: "20px",
-              marginBottom: "20px",
-            }}
-          >
+          this.state.hasReviewDeleteMessage ? (
             <div
-              className="card shadow"
+              className="row"
               style={{
-                color: "black",
-                backgroundColor: "red",
-                width: "100%",
+                marginTop: "20px",
+                marginBottom: "20px",
               }}
             >
-              <span className="card-body">
-                <div
-                  className="card-title"
-                  style={{
-                    fontSize: "13px",
-                    margin: "10px",
-                  }}
-                >
-                  {this.state.hasReviewEditMessage ? (
-                    <p
-                      style={{
-                        margin: "10px",
-                        fontSize: "30px",
-                        color: "white",
-                        lineHeight: "25px",
-                      }}
-                    >
-                      Your edit(s) will be reflected once they have been
-                      reviewed. Thank you for your patience!
-                    </p>
-                  ) : (
-                    <p
-                      style={{
-                        margin: "10px",
-                        fontSize: "30px",
-                        color: "white",
-                        lineHeight: "25px",
-                      }}
-                    >
-                      This listing will be deleted once your request has
-                      been reviewed. Thank you for your patience!
-                    </p>
-                  )}
-                </div>
-              </span>
+              <div
+                className="card shadow"
+                style={{
+                  color: "black",
+                  backgroundColor: "red",
+                  width: "100%",
+                }}
+              >
+                <span className="card-body">
+                  <div
+                    className="card-title"
+                    style={{
+                      fontSize: "13px",
+                      margin: "10px",
+                    }}
+                  >
+                    {this.state.hasReviewEditMessage ? (
+                      <p
+                        style={{
+                          margin: "10px",
+                          fontSize: "30px",
+                          color: "white",
+                          lineHeight: "25px",
+                        }}
+                      >
+                        Your edit(s) will be reflected once they have been
+                        reviewed. Thank you for your patience!
+                      </p>
+                    ) : (
+                        <p
+                          style={{
+                            margin: "10px",
+                            fontSize: "30px",
+                            color: "white",
+                            lineHeight: "25px",
+                          }}
+                        >
+                          This listing will be deleted once your request has
+                          been reviewed. Thank you for your patience!
+                        </p>
+                      )}
+                  </div>
+                </span>
+              </div>
             </div>
-          </div>
-        ) : null}
+          ) : null}
         {
           this.state.hero ? (
             <div
@@ -891,32 +974,32 @@ export class Info extends React.Component {
                 </div>
               ) : null}
               {this.state.data.pickup_option ||
-              this.state.data.delivery_option ? (
-                <div>
-                  <svg
-                    className="bi bi-bag"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 16 16"
-                    fill="currentColor"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M14 5H2v9a1 1 0 001 1h10a1 1 0 001-1V5zM1 4v10a2 2 0 002 2h10a2 2 0 002-2V4H1z"
-                      clipRule="evenodd"
-                    />
-                    <path d="M8 1.5A2.5 2.5 0 005.5 4h-1a3.5 3.5 0 117 0h-1A2.5 2.5 0 008 1.5z" />
-                  </svg>{" "}
-                  {this.state.data.pickup_option ? (
-                    <span className="badge badge-success">Da Bao</span>
-                  ) : null}
-                  {this.state.data.delivery_option ? (
-                    <span className="badge badge-success">Delivery</span>
-                  ) : null}{" "}
-                  <br />
-                </div>
-              ) : null}
+                this.state.data.delivery_option ? (
+                  <div>
+                    <svg
+                      className="bi bi-bag"
+                      width="14"
+                      height="14"
+                      viewBox="0 0 16 16"
+                      fill="currentColor"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M14 5H2v9a1 1 0 001 1h10a1 1 0 001-1V5zM1 4v10a2 2 0 002 2h10a2 2 0 002-2V4H1z"
+                        clipRule="evenodd"
+                      />
+                      <path d="M8 1.5A2.5 2.5 0 005.5 4h-1a3.5 3.5 0 117 0h-1A2.5 2.5 0 008 1.5z" />
+                    </svg>{" "}
+                    {this.state.data.pickup_option ? (
+                      <span className="badge badge-success">Da Bao</span>
+                    ) : null}
+                    {this.state.data.delivery_option ? (
+                      <span className="badge badge-success">Delivery</span>
+                    ) : null}{" "}
+                    <br />
+                  </div>
+                ) : null}
               {regions.length > 0 ? (
                 <div>
                   <svg
@@ -985,18 +1068,18 @@ export class Info extends React.Component {
               {/* Custom button display: menu, website, message */}
               <div>
                 {this.state.data.menu &&
-                this.state.data.whatsapp &&
-                this.state.data.menu_combined.length > 0 &&
-                this.state.data.menu_combined[0].name !== "" ? (
-                  <span className="">
-                    <img
-                      alt=""
-                      onClick={this.enterDetails}
-                      src={menu_button}
-                      style={{ width: "25%", cursor: "pointer" }}
-                    />
-                  </span>
-                ) : null}
+                  this.state.data.whatsapp &&
+                  this.state.data.menu_combined.length > 0 &&
+                  this.state.data.menu_combined[0].name !== "" ? (
+                    <span className="">
+                      <img
+                        alt=""
+                        onClick={this.enterDetails}
+                        src={menu_button}
+                        style={{ width: "25%", cursor: "pointer" }}
+                      />
+                    </span>
+                  ) : null}
                 {this.state.data.website ? (
                   <a
                     href={
@@ -1040,253 +1123,253 @@ export class Info extends React.Component {
 
                     {/* Display appropriate header - menu / menu with Whatsapp ordering */}
                     {this.state.data.menu &&
-                    this.state.data.whatsapp &&
-                    this.state.data.menu_combined.length > 0 &&
-                    this.state.data.menu_combined[0].name !== "" ? (
-                      <div>
-                        <br />
-                        <br />
-                        <span className="">
-                          <img
-                            alt=""
-                            src={orderleh_title}
-                            style={{ width: "60%" }}
-                          />
-                        </span>
-                      </div>
-                    ) : this.state.data.menu &&
+                      this.state.data.whatsapp &&
                       this.state.data.menu_combined.length > 0 &&
                       this.state.data.menu_combined[0].name !== "" ? (
-                      <div>
-                        <br />
-                        <br />
+                        <div>
+                          <br />
+                          <br />
+                          <span className="">
+                            <img
+                              alt=""
+                              src={orderleh_title}
+                              style={{ width: "60%" }}
+                            />
+                          </span>
+                        </div>
+                      ) : this.state.data.menu &&
+                        this.state.data.menu_combined.length > 0 &&
+                        this.state.data.menu_combined[0].name !== "" ? (
+                          <div>
+                            <br />
+                            <br />
 
-                        <span className="">
-                          <img
-                            alt=""
-                            src={menu_title}
-                            style={{ width: "60%" }}
-                          />
-                        </span>
-                      </div>
-                    ) : null}
+                            <span className="">
+                              <img
+                                alt=""
+                                src={menu_title}
+                                style={{ width: "60%" }}
+                              />
+                            </span>
+                          </div>
+                        ) : null}
                     {/* Display the first item of the menu with a see more button - TODO: boilerplate code */}
                     {this.state.data.menu &&
-                    this.state.data.menu_combined.length > 0 &&
-                    this.state.data.menu_combined[0].name !== "" ? (
-                      <div style={{ zIndex: -999 }}>
-                        <figure
-                          className="shadow row"
-                          style={{
-                            margin: "20px",
-                            minHeight: "100px",
-                            backgroundColor: "#f1f1f1",
-                            borderRadius: "5px",
-                            position: "relative",
-                            display: "flex",
-                            padding: "10px 40px 40px",
-                            zIndex: 1,
-                          }}
-                        >
-                          {/* gradient overlay shows if only 1 item OR >1 item && customer hasn't clicked Menu / see more */}
-                          {(!this.state.wantToOrder &&
+                      this.state.data.menu_combined.length > 0 &&
+                      this.state.data.menu_combined[0].name !== "" ? (
+                        <div style={{ zIndex: -999 }}>
+                          <figure
+                            className="shadow row"
+                            style={{
+                              margin: "20px",
+                              minHeight: "100px",
+                              backgroundColor: "#f1f1f1",
+                              borderRadius: "5px",
+                              position: "relative",
+                              display: "flex",
+                              padding: "10px 40px 40px",
+                              zIndex: 1,
+                            }}
+                          >
+                            {/* gradient overlay shows if only 1 item OR >1 item && customer hasn't clicked Menu / see more */}
+                            {(!this.state.wantToOrder &&
                               this.state.data.menu &&
                               this.state.data.menu_combined.length > 1 &&
                               this.state.data.menu_combined[1] &&
-                              this.state.data.menu_combined[1].name !== "") 
+                              this.state.data.menu_combined[1].name !== "")
                               // addresses case where >1 item and customer hasnt clicked
                               ||
                               (!this.state.wantToOrder &&
                                 this.state.data.menu_combined[1] &&
                                 this.state.data.menu_combined[1].name ===
-                                "") 
-                                // addresses case where there are multiple items in menu_combined but only 1 non-empty item
-                                ||
+                                "")
+                              // addresses case where there are multiple items in menu_combined but only 1 non-empty item
+                              ||
                               (!this.state.wantToOrder &&
                                 this.state.data.menu_combined.length === 1)
-                                // addresses case where there is only 1 item in menu_combined
-? (
-                            <span style={{ height: "0px" }}>
-                              <img
-                                src={gradient}
-                                alt=""
+                              // addresses case where there is only 1 item in menu_combined
+                              ? (
+                                <span style={{ height: "0px" }}>
+                                  <img
+                                    src={gradient}
+                                    alt=""
+                                    style={{
+                                      width: "130%",
+                                      height: "150px",
+                                      borderRadius: "5px",
+                                      position: "absolute",
+                                      bottom: "-30px",
+                                      left: "-15px",
+                                      zIndex: "999",
+                                    }}
+                                  />
+                                </span>
+                              ) : null}
+                            <div className="row">
+                              <span
                                 style={{
-                                  width: "130%",
-                                  height: "150px",
-                                  borderRadius: "5px",
-                                  position: "absolute",
-                                  bottom: "-30px",
-                                  left: "-15px",
-                                  zIndex: "999",
+                                  alignContent: "right",
+                                  fontSize: "110%",
+                                  display: "flex",
                                 }}
-                              />
-                            </span>
-                          ) : null}
-                          <div className="row">
-                            <span
-                              style={{
-                                alignContent: "right",
-                                fontSize: "110%",
-                                display: "flex",
-                              }}
-                            >
-                              <b>
-                                {this.state.data.menu_combined[0] ? (
-                                  <span>
-                                    {this.state.data.menu_combined[0].name}
-                                    {this.state.data.menu_combined[0] &&
-                                    this.state.data.menu_combined[0]
-                                      .description ? (
-                                      <span>
-                                        {" "}
+                              >
+                                <b>
+                                  {this.state.data.menu_combined[0] ? (
+                                    <span>
+                                      {this.state.data.menu_combined[0].name}
+                                      {this.state.data.menu_combined[0] &&
+                                        this.state.data.menu_combined[0]
+                                          .description ? (
+                                          <span>
+                                            {" "}
                                         (
-                                        {
-                                          this.state.data.menu_combined[0]
-                                            .description
-                                        }
+                                            {
+                                              this.state.data.menu_combined[0]
+                                                .description
+                                            }
                                         )
-                                      </span>
-                                    ) : null}
-                                  </span>
-                                ) : null}
-                              </b>
-                            </span>
-                          </div>
-                          <div className="row">
-                            <div
-                              className="col"
-                              style={{
-                                position: "absolute",
-                                left: "5px",
-                                bottom: "13px",
-                              }}
-                            >
-                              <span
-                                className="shadow badge badge-info m-2"
+                                          </span>
+                                        ) : null}
+                                    </span>
+                                  ) : null}
+                                </b>
+                              </span>
+                            </div>
+                            <div className="row">
+                              <div
+                                className="col"
                                 style={{
-                                  backgroundColor: "#b48300",
-                                  alignContent: "left",
-                                  fontSize: "110%",
+                                  position: "absolute",
+                                  left: "5px",
+                                  bottom: "13px",
                                 }}
                               >
-                                $
+                                <span
+                                  className="shadow badge badge-info m-2"
+                                  style={{
+                                    backgroundColor: "#b48300",
+                                    alignContent: "left",
+                                    fontSize: "110%",
+                                  }}
+                                >
+                                  $
                                 {this.state.data.menu_combined[0].price
-                                  ? this.state.data.menu_combined[0].price
-                                  : "TBD"}
-                              </span>
-                            </div>
-                            <div
-                              className="col"
-                              style={{
-                                position: "absolute",
-                                left: "10px",
-                                bottom: "10px",
-                              }}
-                            >
+                                    ? this.state.data.menu_combined[0].price
+                                    : "TBD"}
+                                </span>
+                              </div>
                               <div
-                                className="btn-group float-right"
-                                role="group"
-                                aria-label="Basic example"
+                                className="col"
+                                style={{
+                                  position: "absolute",
+                                  left: "10px",
+                                  bottom: "10px",
+                                }}
                               >
-                                <br />
-                                {this.state.data.whatsapp ? (
-                                  <div>
-                                    <Button
-                                      variant="light"
-                                      size="sm"
-                                      onClick={this.minusItem}
-                                      name={0}
-                                      className="shadow-sm"
-                                      style={{
-                                        backgroundColor: "white",
-                                        color: "black",
-                                        borderRadius: "3px",
-                                        margin: "10px",
-                                      }}
-                                    >
-                                      -
+                                <div
+                                  className="btn-group float-right"
+                                  role="group"
+                                  aria-label="Basic example"
+                                >
+                                  <br />
+                                  {this.state.data.whatsapp ? (
+                                    <div>
+                                      <Button
+                                        variant="light"
+                                        size="sm"
+                                        onClick={this.minusItem}
+                                        name={0}
+                                        className="shadow-sm"
+                                        style={{
+                                          backgroundColor: "white",
+                                          color: "black",
+                                          borderRadius: "3px",
+                                          margin: "10px",
+                                        }}
+                                      >
+                                        -
                                     </Button>
-                                    <span
-                                      style={{
-                                        margin: "10px",
-                                      }}
-                                    >
-                                      <b>
-                                        {this.state.orderData[0] !==
-                                        undefined
-                                          ? this.state.orderData[0] // hardcode 0 to display first menu item
-                                          : 0}
-                                      </b>
-                                    </span>
-                                    <Button
-                                      variant="dark"
-                                      size="sm"
-                                      onClick={this.addItem}
-                                      name={0} // hardcode 0 to display first menu item
-                                      className="shadow-sm"
-                                      style={{
-                                        backgroundColor: "black",
-                                        color: "white",
-                                        borderRadius: "3px",
-                                        margin: "10px",
-                                      }}
-                                    >
-                                      +
+                                      <span
+                                        style={{
+                                          margin: "10px",
+                                        }}
+                                      >
+                                        <b>
+                                          {this.state.orderData[0] !==
+                                            undefined
+                                            ? this.state.orderData[0] // hardcode 0 to display first menu item
+                                            : 0}
+                                        </b>
+                                      </span>
+                                      <Button
+                                        variant="dark"
+                                        size="sm"
+                                        onClick={this.addItem}
+                                        name={0} // hardcode 0 to display first menu item
+                                        className="shadow-sm"
+                                        style={{
+                                          backgroundColor: "black",
+                                          color: "white",
+                                          borderRadius: "3px",
+                                          margin: "10px",
+                                        }}
+                                      >
+                                        +
                                     </Button>
-                                  </div>
-                                ) : null}
+                                    </div>
+                                  ) : null}
+                                </div>
                               </div>
                             </div>
-                          </div>
-                          <br />
-                        </figure>
-                      </div>
-                    ) : null}
+                            <br />
+                          </figure>
+                        </div>
+                      ) : null}
                     {/* See more button shows if only 1 item OR >1 item && customer hasn't clicked Menu / see more */}
                     {(!this.state.wantToOrder &&
                       this.state.data.menu &&
                       this.state.data.menu_combined.length > 1 &&
                       this.state.data.menu_combined[1] &&
                       this.state.data.menu_combined[1].name !== "") ||
-                    (!this.state.wantToOrder &&
-                      this.state.data.menu &&
-                      this.state.data.menu_combined[0] &&
-                      this.state.data.menu_combined[0].name !== "" &&
-                      this.state.data.menu_combined[1] &&
-                      this.state.data.menu_combined[1].name === "") 
+                      (!this.state.wantToOrder &&
+                        this.state.data.menu &&
+                        this.state.data.menu_combined[0] &&
+                        this.state.data.menu_combined[0].name !== "" &&
+                        this.state.data.menu_combined[1] &&
+                        this.state.data.menu_combined[1].name === "")
                       ||
-                    (!this.state.wantToOrder &&
-                      this.state.data.menu &&
-                      this.state.data.menu_combined.length === 1 &&
-                      this.state.data.menu_combined[0] &&
-                      this.state.data.menu_combined[0].name !== "") 
+                      (!this.state.wantToOrder &&
+                        this.state.data.menu &&
+                        this.state.data.menu_combined.length === 1 &&
+                        this.state.data.menu_combined[0] &&
+                        this.state.data.menu_combined[0].name !== "")
                       ? (
-                      <div style={{ marginTop: "30px" }}>
-                        <hr
-                          style={{
-                            color: "grey",
-                            backgroundColor: "grey",
-                            height: "1px",
-                            borderColor: "grey",
-                            width: "100%",
-                            alignItems: "center",
-                            marginBottom: "0px", // aligns See More to divider
-                          }}
-                        />
-                        <div
-                          style={{
-                            textAlign: "center",
-                            paddingRight: "15px",
-                            fontSize: "110%",
-                            cursor: "pointer",
-                            color: "grey",
-                          }}
-                          onClick={this.enterDetails}
-                        >
-                          <b>see more ↓</b>
+                        <div style={{ marginTop: "30px" }}>
+                          <hr
+                            style={{
+                              color: "grey",
+                              backgroundColor: "grey",
+                              height: "1px",
+                              borderColor: "grey",
+                              width: "100%",
+                              alignItems: "center",
+                              marginBottom: "0px", // aligns See More to divider
+                            }}
+                          />
+                          <div
+                            style={{
+                              textAlign: "center",
+                              paddingRight: "15px",
+                              fontSize: "110%",
+                              cursor: "pointer",
+                              color: "grey",
+                            }}
+                            onClick={this.enterDetails}
+                          >
+                            <b>see more ↓</b>
+                          </div>
                         </div>
-                      </div>
-                    ) : null}
+                      ) : null}
 
                     {/* Display the rest of the menu if customer clicks Menu / see more */}
                     {this.state.wantToOrder ? (
@@ -1382,10 +1465,10 @@ export class Info extends React.Component {
                                                     i
                                                   ] !== undefined
                                                     ? this.state.orderData[
-                                                        JSON.parse(
-                                                          JSON.stringify(i)
-                                                        )
-                                                      ]
+                                                    JSON.parse(
+                                                      JSON.stringify(i)
+                                                    )
+                                                    ]
                                                     : 0}
                                                 </b>
                                               </span>
@@ -1518,20 +1601,51 @@ export class Info extends React.Component {
                                 ></input>
                               </div>
                             </div>
+                            <div class="row">
 
-                            <div className="form-group create-title">
-                              <label for="address">Delivery Day/Time</label>
-                              <input
-                                onChange={this.handleCustomerDetails}
-                                value={this.state.deliveryTime}
-                                type="text"
-                                className="form-control"
-                                name="deliveryTime"
-                                style={{ borderColor: "#b48300" }}
-                                placeholder="Eg Thursday 7 May 12.30pm"
-                              ></input>
+                              <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
+                                <div class="form-group create-title">
+                                  <label for="time">
+                                    Delivery Date
+                                  </label>
+                                  <DatePicker
+                                    class="form-control is-invalid"
+                                    dayPlaceholder="dd"
+                                    monthPlaceholder="mm"
+                                    yearPlaceholder="yyyy"
+                                    onChange={this.handleDate}
+                                    value={this.state.date}
+                                    format="dd/MMM/yyyy"
+                                    required
+                                  />
+                                </div>
+                              </div>
+                              <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
+                                <div class="form-group create-title">
+                                  <label for="time">
+                                    Delivery Time
+                                  </label>
+                                  <TimePicker
+                                    class="form-control is-invalid"
+                                    dayPlaceholder="dd"
+                                    monthPlaceholder="mm"
+                                    yearPlaceholder="yyyy"
+                                    hourPlaceholder="hh"
+                                    minutePlaceholder="mm"
+                                    onChange={this.handleTime}
+                                    value={this.state.time}
+                                    format="hh:mma"
+                                    disableClock
+                                    required
+                                  />
+                                  {time_now > this.state.datetime ? (
+                                    <span class="badge badge-danger">
+                                      Time cannot be earlier than now
+                                    </span>
+                                  ) : null}
+                                </div>
+                              </div>
                             </div>
-
                             <div>
                               <div className="row">
                                 {" "}
@@ -1691,9 +1805,9 @@ export class Info extends React.Component {
                     "whatsapp://send?text=" +
                     encodeURIComponent(
                       "Hungry? Try out " +
-                        this.state.data.name +
-                        " now! Order form / more information at www.foodleh.app/info?id=" +
-                        this.state.id
+                      this.state.data.name +
+                      " now! Order form / more information at www.foodleh.app/info?id=" +
+                      this.state.id
                     )
                   }
                 >
@@ -1750,7 +1864,7 @@ export class Info extends React.Component {
                     >
                       <b>{this.state.data.promo}</b>:{" "}
                       {this.state.data.condition &&
-                      this.state.data.condition.length > 40
+                        this.state.data.condition.length > 40
                         ? this.state.data.condition.slice(0, 40) + "..."
                         : this.state.data.condition}
                     </div>
@@ -1778,22 +1892,22 @@ export class Info extends React.Component {
                   </p>
                 ) : null}
                 {this.state.data.description_detail &&
-                this.state.data.description_detail !== "" &&
-                this.state.data.description_detail !== undefined ? (
-                  <div>
-                    <h6 style={{ marginBottom: "0px" }}>
-                      <b>Detailed Description</b>
-                    </h6>
-                    <p
-                      style={{
-                        whiteSpace: "pre-line",
-                        marginBottom: "20px",
-                      }}
-                    >
-                      {this.state.data.description_detail}
-                    </p>
-                  </div>
-                ) : null}
+                  this.state.data.description_detail !== "" &&
+                  this.state.data.description_detail !== undefined ? (
+                    <div>
+                      <h6 style={{ marginBottom: "0px" }}>
+                        <b>Detailed Description</b>
+                      </h6>
+                      <p
+                        style={{
+                          whiteSpace: "pre-line",
+                          marginBottom: "20px",
+                        }}
+                      >
+                        {this.state.data.description_detail}
+                      </p>
+                    </div>
+                  ) : null}
               </Linkify>
               {/* {Menu appears if menu data is present and whatsapp is not present} */}
               {this.state.data.menu && !this.state.data.whatsapp ? (
@@ -1883,13 +1997,13 @@ export class Info extends React.Component {
         </div>
       </div>
     ) : (
-      <div className="row h-100 page-container">
-        <div className="col-sm-12 my-auto">
-          <h3>Loading</h3>
-          <Spinner className="" animation="grow" />
+        <div className="row h-100 page-container">
+          <div className="col-sm-12 my-auto">
+            <h3>Loading</h3>
+            <Spinner className="" animation="grow" />
+          </div>
         </div>
-      </div>
-    );
+      );
   }
 }