Date Pickers, Calendar Controls, and Calendar resources (1 Viewer)

Jason Lee Hayes · Monday at 2:23 PM

Sorry; only just tested; that may not appear as expected (You may see an overlap issue)...

Use the following which is what i believe you requested:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Inline Datepicker</title>

  <!-- InView V1.2 -->
  <!-- jQuery + jQuery UI -->
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.min.js"></script>

  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    #selectedDate {
      padding: 6px 8px;
      width: 160px;
      margin-bottom: 15px; /* ensures the calendar never covers the input */
    }

    #calendar {
      margin-top: 10px;
    }
  </style>

  <script>
    $(function () {
      $("#calendar").datepicker({
        dateFormat: "dd/mm/yy",
        changeMonth: true,
        changeYear: true,
        onSelect: function (dateText) {
          $("#selectedDate").val(dateText); // update the input
        }
      });
    });
  </script>
</head>

<body>

  <p>
    Date:
    <input type="text" id="selectedDate" readonly>
  </p>

  <!-- Permanent calendar -->
  <div id="calendar">

Updated to allow range selection & added [Today]; add time T/F aswell..

The beauty of HTML is you can easily modify to your specific requirement. you could add seconds, AM PM, Preset Buttons (Last Month, Last 7 Days etc) or add multiple month views and layout format/color with basic HTML/CSS knowledge.

Just making sure WebView2 control compatible and it works well.

Video Preview

Daniel @ DevHUT did a good write up on modern Date Picker which is the route i take:

Date Pickers, Calendar Controls, and Calendar resources (1 Viewer)

Jason Lee Hayes

Active member

Attachments

Similar threads

Users who are viewing this thread