Asp.net - Is someone input type datetime local working in FireFox?

Bersek
January 28, 2024
219 views
0 votes
2 Answers

I’m try to implement a Datetime-local in Firefox but don’t work, someone have an solution for this?, or a js that can ilustrate something similar like datetime-local?

This is like look in FireFox :

I only want to found a solution for this, that the user can write a Date-time on input

Answers

- AlbertDKallal
- January 3, 2024 at 7:43 pm
- 0 votes
0
Gee, you are 100% correct. FireFox is a absolute mess and a big train falling off the tracks in a HUGE ball of flames.

Given this simple markup:
```
        <div style="float: left">
            <h3>TextMode="Date"</h3>
            <asp:TextBox ID="txtMyDate" runat="server"
                TextMode="Date">
            </asp:TextBox>
        </div>
        <div style="float:left;margin-left:45px">
            <h3>TextMode="Time"</h3>
            <asp:TextBox ID="txtMyTime" runat="server"
                TextMode="Time">
            </asp:TextBox>
        </div>
        <div style="float:left;margin-left:35px">
            <h3>TextMode="DateTimeLocal"</h3>
            <asp:TextBox ID="txtMyDTime" runat="server"
                TextMode="DateTimeLocal">
            </asp:TextBox>
        </div>
```
In Edge (new Chrome version), and in Google Chrome, we get/see this:

As you can see, for Date, Time, and DateTime, BOTH Edge and Google Chrome browsers work fine.

However, FireFox falls down, does not work, and creates a huge ball of flames in failure:

WOW! I’ve always been a big fan of Firefox, but this is a HUGE deal breaker for the whole asp.net community.

So, as above shows, with FireFox, then the data picker does work, but the time picker does not pop a dialog (it DOES show a input mask). And the Date+time picker fails in a huge ball of flames.

So, there are two solutions I can think of:

One: simple warn and tell users not to use FireFox, since it simple fails, does not work, and can’t do simple web based tasks like picking a time.

Two: Adopt a 3rd party jQuery or bootstrap library that allows some kind of pop dialog or time picker. There are many to choose from, but attempts to use a input control on a form with a automatic time picker with FireFox is simply not an option at this point in time.

So, FireFox simply does not work, can’t be used, or as noted, if you want to support FireFox, then you have to introduce a 3rd party time picker, as the built in browser based ones can’t be used.

There are endless choices of sample JavaScript libraries, but Firefox out of the box is not such a valid choice. You need to adopt 3rd party code for this to work.
Login or Signup to reply.

I have totally scrapped the idea of using datetime-local because the users complained when using Firefox and Safari. I have spent all this week trying to use the JQuery ui Datepicker and merge another time time picker into one.
I have a solution that is working great for my application. I used the clocklet library for the time portion. The only drawback is that you can’t edit the final datetime, you must use the date and time buttons.

Operation is straight forward, select date then select time and press enter.

Here is the code:

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/clocklet.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <style>

      @charset "utf-8";

      .timeCloseHidden{
        height: 0;
        width: 0;
        border: none;
        background: none;
        margin: 0px;
        padding: 0 px;
        position: absolute;
        top: -100px;
      }

      .input_icon {
        font-size: 20px;
        float: right;
        margin: 5px;
        margin-left: 0px;
      }

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

      .input_datetime {
        border: none;
        width: 0px;
        opacity: 0.0;
      }

      .input_datetime_mask{
        width: 140px;
      }

      .inputStartDateInstanceContainer{
        margin: 0px;
      }

      .date_label{
        margin: 2px;
        width: 75px;
        text-align: right;
      }

      .clocklet-options-2 {
        font-family: "Frank Ruhl Libre", serif;
        font-weight: 500;
      }

      #inputStartClock{
        margin: 0 auto;
        margin-right: auto;
        margin-left: auto;
        display: block;
        margin-left: 5px;
        margin-right: 5px;
        /*width: 62px;*/
        border: none;
        opacity: 0.0;
        width: 0px;
      }

      #startTimeIcon{
        background: url(https://stealth-apsvaw.streamhoster.com/aetv_dashboard_hd/icons/clock_20.png);
        height: 20px;
        width: 20px;    
        margin-left: -10px;
      }

    </style>
  </head>
  <body>
  <button class="timeCloseHidden"></button>
  <div id="startDateContainer" class="startDateContainer">
    <div class="inputContainer">
      <span class="date_label">Start Date: </span>
      <!--<input  type="datetime-local" id="divStartDatetime" class="input_datetime_mask">-->
      <div id="divStartDatetime" class="input_datetime_mask"></div>
      <input type="text" id="inputStartDate" class="input_datetime" />
      <div class="inputStartDateInstanceContainer">
      <input id="inputStartClock" class="clocklet-events"
        data-clocklet="class-name: clocklet-options-2; format: hh:mm a; alignment: right; append-to: parent;"
        placeholder="hh:mm am"> 
      </div>
      <div id="startTimeIcon"></div>
    </div>
  </div>

  <script>
    (function () {

      $( "#inputStartDate" ).datepicker({
        showOn: "button",
        buttonImage: "https://stealth-apsvaw.streamhoster.com/aetv_dashboard_hd/icons/calendar_20.png",
        buttonImageOnly: true,
        dateFormat: "mm/dd/yy",
        changeMonth: true,
        changeYear: true,
        minDate: 0,
        onSelect: function(dateText) {
          var inputEvent = new Event('input', {
              bubbles: true
          });
          document.getElementById("inputStartDate").dispatchEvent(inputEvent);
        }
      });

      const divStartDatetime = document.querySelector('#divStartDatetime');

      const inputStartClock = document.querySelector('#inputStartClock');
      if(inputStartClock.value === ''){
        inputStartClock.value = getTimeFromDate(new Date());
      }

      const inputStartDate = document.querySelector('#inputStartDate');
      if(inputStartDate.value === ''){
        inputStartDate.value = new Date();
      }

      divStartDatetime.innerHTML = formatDisplayDateTime(inputStartDate, inputStartClock);

      var inputElement = document.querySelector('.clocklet-events');

      document.getElementById("inputStartDate").addEventListener('input', function (event) {
        divStartDatetime.innerHTML = formatDisplayDateTime(inputStartDate, inputStartClock);
        inputElement.focus();
      });

      var startTimeIcon = document.querySelector('#startTimeIcon');
      startTimeIcon.addEventListener('click', function (event) {
        inputElement.focus();
      });

      inputElement.addEventListener('clocklet.opening', function (event) {
        console.log(event.type, event.target.value, event.detail.options);
      });

      inputElement.addEventListener('clocklet.opened', function (event) {
        console.log(event.type, event.target.value, event.detail.options);
      });

      inputElement.addEventListener('clocklet.closing', function (event) {
        console.log(event.type, event.target.value);
      });

      inputElement.addEventListener('clocklet.closed', function (event) {
        console.log(event.type, event.target.value);
      });

      inputElement.addEventListener('input', function (event) {
        divStartDatetime.innerHTML = formatDisplayDateTime(inputStartDate, inputStartClock);
        console.log(event.type, event.target.value, event.target.value);
      });

      inputElement.addEventListener('keydown', function (event) {
        //event.preventDefault();
        document.querySelector('.timeCloseHidden').focus();
      });

      function formatDisplayDateTime(theDate, theTime){
        return getDateFromDate(new Date(theDate.value)) + " " + formatAMPM(new Date('01/01/1970 '+theTime.value));
      }

      function convertDate2DateTimePickerMidnight(dateToConvert){
        var yyyy = dateToConvert.getFullYear();
        var month = (dateToConvert.getMonth()+1).toString().padStart(2, '0');
        var day = dateToConvert.getDate().toString().padStart(2, '0');
        return yyyy+'-'+month+'-'+day+'T00:00';
      }

      function convertDate2DateTimePicker(dateToConvert){
        var yyyy = dateToConvert.getFullYear();
        var month = (dateToConvert.getMonth()+1).toString().padStart(2, '0');
        var day = dateToConvert.getDate().toString().padStart(2, '0');
        var hour = dateToConvert.getHours().toString().padStart(2, '0');
        var minute = dateToConvert.getMinutes().toString().padStart(2, '0');
        return yyyy+'-'+month+'-'+day+'T'+hour+':'+minute;
      }

      function convertDateEndOfToday2DateTimePicker(dateToConvert){
        var yyyy = dateToConvert.getFullYear();
        var month = (dateToConvert.getMonth()+1).toString().padStart(2, '0');
        var day = dateToConvert.getDate().toString().padStart(2, '0');
        return yyyy+'-'+month+'-'+day+'T'+'23'+':'+'59';
      }

      function getTimeFromDate(dateToConvert){
        var hour = dateToConvert.getHours().toString().padStart(2, '0');
        var minute = dateToConvert.getMinutes().toString().padStart(2, '0');
        return hour+':'+minute;
      }

      function getDateFromDate(dateToConvert){
        var yyyy = dateToConvert.getFullYear();
        var month = (dateToConvert.getMonth()+1).toString().padStart(2, '0');
        var day = dateToConvert.getDate().toString().padStart(2, '0');
        return month+'/'+day+'/'+yyyy;
      }

      function formatAMPM(date) {
        console.log(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;
        return hours + ':' + minutes + ' ' + ampm;
      }

    })();
  </script>

  </body>
  </html>

  (function() {

   $("#inputStartDate").datepicker({
     showOn: "button",
     buttonImage: "https://stealth-apsvaw.streamhoster.com/aetv_dashboard_hd/icons/calendar_20.png",
     buttonImageOnly: true,
     dateFormat: "mm/dd/yy",
     changeMonth: true,
     changeYear: true,
     minDate: 0,
     onSelect: function(dateText) {
       var inputEvent = new Event('input', {
         bubbles: true
       });
       document.getElementById("inputStartDate").dispatchEvent(inputEvent);
     }
   });

   const divStartDatetime = document.querySelector('#divStartDatetime');

   const inputStartClock = document.querySelector('#inputStartClock');
   if (inputStartClock.value === '') {
     inputStartClock.value = getTimeFromDate(new Date());
   }

   const inputStartDate = document.querySelector('#inputStartDate');
   if (inputStartDate.value === '') {
     inputStartDate.value = new Date();
   }

   divStartDatetime.innerHTML = formatDisplayDateTime(inputStartDate, inputStartClock);

   var inputElement = document.querySelector('.clocklet-events');

   document.getElementById("inputStartDate").addEventListener('input', function(event) {
     divStartDatetime.innerHTML = formatDisplayDateTime(inputStartDate, inputStartClock);
     inputElement.focus();
   });

   var startTimeIcon = document.querySelector('#startTimeIcon');
   startTimeIcon.addEventListener('click', function(event) {
     inputElement.focus();
   });

   inputElement.addEventListener('clocklet.opening', function(event) {
     //console.log(event.type, event.target.value, event.detail.options);
   });

   inputElement.addEventListener('clocklet.opened', function(event) {
     //console.log(event.type, event.target.value, event.detail.options);
   });

   inputElement.addEventListener('clocklet.closing', function(event) {
     //console.log(event.type, event.target.value);
   });

   inputElement.addEventListener('clocklet.closed', function(event) {
     //console.log(event.type, event.target.value);
   });

   inputElement.addEventListener('input', function(event) {
     divStartDatetime.innerHTML = formatDisplayDateTime(inputStartDate, inputStartClock);
     //console.log(event.type, event.target.value, event.target.value);
   });

   inputElement.addEventListener('keydown', function(event) {
     //event.preventDefault();
     document.querySelector('.timeCloseHidden').focus();
   });

   function formatDisplayDateTime(theDate, theTime) {
     return getDateFromDate(new Date(theDate.value)) + " " + formatAMPM(new Date('01/01/1970 ' + theTime.value));
   }

   function convertDate2DateTimePickerMidnight(dateToConvert) {
     var yyyy = dateToConvert.getFullYear();
     var month = (dateToConvert.getMonth() + 1).toString().padStart(2, '0');
     var day = dateToConvert.getDate().toString().padStart(2, '0');
     return yyyy + '-' + month + '-' + day + 'T00:00';
   }

   function convertDate2DateTimePicker(dateToConvert) {
     var yyyy = dateToConvert.getFullYear();
     var month = (dateToConvert.getMonth() + 1).toString().padStart(2, '0');
     var day = dateToConvert.getDate().toString().padStart(2, '0');
     var hour = dateToConvert.getHours().toString().padStart(2, '0');
     var minute = dateToConvert.getMinutes().toString().padStart(2, '0');
     return yyyy + '-' + month + '-' + day + 'T' + hour + ':' + minute;
   }

   function convertDateEndOfToday2DateTimePicker(dateToConvert) {
     var yyyy = dateToConvert.getFullYear();
     var month = (dateToConvert.getMonth() + 1).toString().padStart(2, '0');
     var day = dateToConvert.getDate().toString().padStart(2, '0');
     return yyyy + '-' + month + '-' + day + 'T' + '23' + ':' + '59';
   }

   function getTimeFromDate(dateToConvert) {
     var hour = dateToConvert.getHours().toString().padStart(2, '0');
     var minute = dateToConvert.getMinutes().toString().padStart(2, '0');
     return hour + ':' + minute;
   }

   function getDateFromDate(dateToConvert) {
     var yyyy = dateToConvert.getFullYear();
     var month = (dateToConvert.getMonth() + 1).toString().padStart(2, '0');
     var day = dateToConvert.getDate().toString().padStart(2, '0');
     return month + '/' + day + '/' + yyyy;
   }

   function formatAMPM(date) {
     //console.log(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;
     return hours + ':' + minutes + ' ' + ampm;
   }

 })();

    @charset "utf-8";

    .timeCloseHidden {
      height: 0;
      width: 0;
      border: none;
      background: none;
      margin: 0px;
      padding: 0 px;
      position: absolute;
      top: -100px;
    }

    .input_icon {
      font-size: 20px;
      float: right;
      margin: 5px;
      margin-left: 0px;
    }

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

    .input_datetime {
      border: none;
      width: 0px;
      opacity: 0.0;
    }

    .input_datetime_mask {
      width: 140px;
    }

    .inputStartDateInstanceContainer {
      margin: 0px;
    }

    .date_label {
      margin: 2px;
      width: 75px;
      text-align: right;
    }

    .clocklet-options-2 {
      font-family: "Frank Ruhl Libre", serif;
      font-weight: 500;
    }

    #inputStartClock {
      margin: 0 auto;
      margin-right: auto;
      margin-left: auto;
      display: block;
      margin-left: 5px;
      margin-right: 5px;
      /*width: 62px;*/
      border: none;
      opacity: 0.0;
      width: 0px;
    }

    #startTimeIcon {
      background: url(https://stealth-apsvaw.streamhoster.com/aetv_dashboard_hd/icons/clock_20.png);
      height: 20px;
      width: 20px;
      margin-left: -10px;
    }

  <html lang="en">

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Datepicker - Default functionality</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/clocklet.min.css">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
      <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
      <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    </head>

    <body>
      <button class="timeCloseHidden"></button>
      <div id="startDateContainer" class="startDateContainer">
        <div class="inputContainer">
          <span class="date_label">Start Date: </span>
          <!--<input  type="datetime-local" id="divStartDatetime" class="input_datetime_mask">-->
          <div id="divStartDatetime" class="input_datetime_mask"></div>
          <input type="text" id="inputStartDate" class="input_datetime" />
          <div class="inputStartDateInstanceContainer">
            <input id="inputStartClock" class="clocklet-events" data-clocklet="class-name: clocklet-options-2; format: hh:mm a; alignment: right; append-to: parent;" placeholder="hh:mm am">
          </div>
          <div id="startTimeIcon"></div>
        </div>
      </div>
    </body>

  </html>

Please signup or login to give your own answer.

Click here to cancel reply.

Asp.net – Is someone input type datetime local working in FireFox?

Answers