Date Pickers, Calendar Controls, and Calendar resources

Jason Lee Hayes · Feb 9, 2026

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:

solar · Mar 23, 2026

"Linear Year Attendance Calendar" original source 'MajP'.
The original design utilized time-off codes on the day grid, while this redesign version uses the employee name on the day grid. As a single form it's limited to 22" max width.
Redesign enhancements:
-grid re-colorization and other stylization.
-two week tracker subform (current and next week)
-wider format intended for full width screen monitor
-narrow header zone for tools etc
-two viewing modes: Show All / Hide All
-uses most of the original code

The_Doc_Man · Mar 23, 2026

RonPaii said:
The problem with using the Outlook calendar is New Outlook. I assume any automation to show the Outlook calendar will fail for anyone using new Outlook.

Sadly, you are quite correct. New Outlook is totally not compatible with Component Object Model automation methods.

Imb · Tuesday at 10:53 PM

solar said:
"Linear Year Attendance Calendar" original source 'MajP'.
The original design utilized time-off codes on the day grid, while this redesign version uses the employee name on the day grid. As a single form it's limited to 22" max width.

Is this a static calendar, or a dynamical calender, that is, can you enter an employee name by clicking (dblclicking, rightmouseclick) on a specific date?

Date Pickers, Calendar Controls, and Calendar resources

Jason Lee Hayes

Active member

Attachments

solar

New member

Attachments

The_Doc_Man

Immoderate Moderator

Imb

Member

Similar threads

Users who are viewing this thread