Slighly Enhanced Implimentation Includes Icons, and Today Button (Multi-Instance) #71

hummbugg · 2024-01-24T05:18:19Z

hummbugg
Jan 24, 2024

I was looking for a pure JavaScript Datetime picker to solve the Firefox & Safari problem when using HTML5 input type datetime-local.
The author of this simplePicker did a great job of getting started and I am currently using it in a work related project. There are some improvements that could be made and if I had the time I would contribute to the project. It is totally usable and functional for me, I just hacked a couple of features into it without modifying any existing source code. I don't have the time to check the entire web for the best solution and when I found this in a top 10 or 20 list I was very impressed.
Thought I would share the demo and maybe it will be useful to someone. I believe this project can and should be followed through and when and if I get time I will help. Happy coding.


  <!DOCTYPE html>
  <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>

      <!-- Change the script and link below to point to your server's install of simplePicker -->
      <script src="../../../../simplepicker-2.0.4/dist/simplepicker.js"></script>
      <link rel="stylesheet" href="../../../../simplepicker-2.0.4/dist/simplepicker.css">

      <title>simplepicker-multi</title>
      <style>
        @charset "utf-8";
        .input_icon {
          font-size: 20px;
          float: right;
          margin: 5px;
          margin-left: 0px;
        }

        .inputContainer {
          display: flex;
          align-items: center;
          max-width: 363px;
          border: 1px solid #ddd;
          margin: 0 auto;
        }

        .input_datetime {
          width: 100%;
          border: none;
          background: transparent;
          font-family: Verdana, Geneva, Tahoma, sans-serif;
          font-size: 16px;
          padding: 5px;
          margin: 0 5px;
          color: #016565;
          font-size: 13px;
          text-align: left;
        }

        .date_label{
          margin: 2px;
          width: 105px;
          text-align: right;
        }      
      </style>
    </head>

    <body>
      <div id="startDateContainer" class="startDateContainer">
        <div class="inputContainer">
          <span class="date_label">Start Date: </span>
          <input type="text" id="inputStartDate" class="input_datetime" />
          <div class="inputStartDateInstanceContainer"></div> <!-- Placeholder for instance 1 -->
          <span id="startDateIcon" class="fa fa-calendar input_icon"></span>
        </div>
      </div>
      <br>
      <div id="endDateContainer" class="endDateContainer">
        <div class="inputContainer">
          <span class="date_label">End Date: </span>
          <input type="text" id="inputEndDate" class="input_datetime" />
          <div class="inputEndDateInstanceContainer"></div> <!-- Placeholder for instance 2 -->
          <span id="endDateIcon" class="fa fa-calendar input_icon"></span>
        </div>
      </div>

      <script>
        /////////////////////////////////
        // Initialize Common Elements for simplePickers
        /////////////////////////////////
        // Set Initial Dates for start and end
        let initialDate = new Date()
        let initialDateFormatted = moment(initialDate).format('MMMM Do YYYY, h:mm:ss a'); // January 23rd 2024, 8:02:19 pm
        const inputStartDate = document.querySelector('#inputStartDate');
        const inputEndDate = document.querySelector('#inputEndDate');
        inputStartDate.value = initialDateFormatted;
        inputEndDate.value = initialDateFormatted;

        // Handle Enter and Escape keys for simplePickers based on which one is active if any
        document.addEventListener("keydown", function(e) {
          const simplePickerWrappers = e.target.querySelectorAll('.simplepicker-wrapper');
          simplePickerWrappers.forEach((simplePickerWrapper) => {
            if(simplePickerWrapper.classList.contains('active')){
              const buttonOk = simplePickerWrapper.querySelector('.simplepicker-ok-btn');
              const buttonCancel = simplePickerWrapper.querySelector('.simplepicker-cancel-btn');
              if (e.key === "Enter") {
                e.preventDefault();
                buttonOk.click();
              }
              if (e.key === "Escape") {
                e.preventDefault();
                buttonCancel.click();
              }
              return false;
            }

          });
        }); 

        /////////////////////////////////
        // Start Date
        /////////////////////////////////
        let pickerStartDateTime = new SimplePicker(".inputStartDateInstanceContainer", {
          zIndex: 98,
          compactMode: true,
          disableTimeSection: false,
          selectedDate: initialDate
        });

        const startDateIcon = document.getElementById('startDateIcon');
        const startDateIconParent = startDateIcon.parentElement;
        const startDateIconBottomPart = startDateIconParent.querySelector('.simplepicker-bottom-part');
        startDateIconBottomPart.style.paddingLeft = '25%';
        startDateIconBottomPart.style.width = '80%';
        const startDateIconBottomPartFirstChild = startDateIconBottomPart.children[0];

        // Add a Today Button to simplePicker
        const newStartDateIconTodayButton = document.createElement('button');
        newStartDateIconTodayButton.textContent = 'Today';
        newStartDateIconTodayButton.classList.add('simplepicker-today-btn');
        newStartDateIconTodayButton.classList.add('simplepicker-btn');
        startDateIconBottomPart.insertBefore(newStartDateIconTodayButton, startDateIconBottomPartFirstChild);        

        newStartDateIconTodayButton.addEventListener('click', (e) => {
          pickerStartDateTime.reset(new Date());
        });

        startDateIcon.addEventListener('click', (e) => {
          pickerStartDateTime.open();
        });

        pickerStartDateTime.on("submit", function(date, readableDate) {
          const input = document.querySelector('#inputStartDate');
          input.value = moment(date).format('MMMM Do YYYY, h:mm:ss a'); // January 23rd 2024, 8:02:19 pm
        });


        /////////////////////////////////
        // End Date
        /////////////////////////////////
        let pickerEndDateTime = new SimplePicker(".inputEndDateInstanceContainer", {
          zIndex: 99,
          compactMode: true,
          disableTimeSection: false,
          selectedDate: initialDate
        });

        const endDateIcon = document.getElementById('endDateIcon');
        const endDateIconParent = endDateIcon.parentElement;
        const endDateIconBottomPart = endDateIconParent.querySelector('.simplepicker-bottom-part');
        endDateIconBottomPart.style.paddingLeft = '25%';
        endDateIconBottomPart.style.width = '80%';
        const endDateIconBottomPartFirstChild = endDateIconBottomPart.firstChild;

        // Add a Today Button to simplePicker
        const newEndDateIconTodayButton = document.createElement('button');
        newEndDateIconTodayButton.textContent = 'Today';
        newEndDateIconTodayButton.classList.add('simplepicker-today-btn');
        newEndDateIconTodayButton.classList.add('simplepicker-btn');
        endDateIconBottomPart.insertBefore(newEndDateIconTodayButton, endDateIconBottomPartFirstChild);        

        newEndDateIconTodayButton.addEventListener('click', (e) => {
          pickerEndDateTime.reset(new Date());
        });

        endDateIcon.addEventListener('click', (e) => {
          pickerEndDateTime.open();
        });

        pickerEndDateTime.on("submit", function(date, readableDate) {
          var input = document.querySelector('#inputEndDate');
          input.value = moment(date).format('MMMM Do YYYY, h:mm:ss a'); // January 23rd 2024, 8:02:19 pm
        });

      </script>
    </body>

  </html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Slighly Enhanced Implimentation Includes Icons, and Today Button (Multi-Instance) #71

{{title}}

Replies: 0 comments

Select a reply

Slighly Enhanced Implimentation Includes Icons, and Today Button (Multi-Instance) #71

hummbugg Jan 24, 2024

Replies: 0 comments

hummbugg
Jan 24, 2024