How to format date in firefox

Question

I was making a web page and needed a textarea to date. When I put type date input into Chrome it creates a date mask, not allowing users to type letters and do not need to type the / to separate the date. But in Mozilla Firefox does not do this, it is a normal textarea.

I wondered if it has how to format this textarea the same way as Chrome or similar, at least do the functions of not allow to type number and separate the date with the / automatically? And if so, what would that be like?

Answer 1

firefox does not support pro date still, the ideal would be you use a javascript library to facilitate pro user, I recommend the datepicker of jqueryui:

https://jqueryui.com/datepicker/

But if you just want to make a mask for the user to enter a date correctly, you can use jquery Mask:

https://igorescobar.github.io/jQuery-Mask-Plugin/

Answer 2

Panchester, you can make a module with a Feature Detection (in case, to check if the browser supports the input[type='date']).

var DatePicker = (function () {
  var DatePicker = function (element) {
    var that = this;
    if (element instanceof jQuery) {
      this.element = element[0];
      this.wrapper = element;
    } else {
      this.element = element;
      this.wrapper = $(this.element);
    }

    if (this.isNative)
      return;

    this.element.type = "text";
    this.wrapper.datetimepicker({
      timepicker: false,
      mask: true,
      format: 'd/m/Y',
      onChangeDateTime: function (data, input) {
        var event = new Event("input");
        that.element.dispatchEvent(event);
      }
    });
    
    
    Object.defineProperty(this.element, "valueAsDate", {
      get: function () {
        return that.wrapper.datetimepicker("getValue");
      },
      set: function (value) {
        that.wrapper.datetimepicker({ value: value });
      }
    })
  }

  var input = document.createElement("input");
  Object.defineProperty(DatePicker.prototype, "isNative", {
    writerable: false,
    configurable: false,
    value: "valueAsDate" in input
  })

  return DatePicker;
})();

var element = document.getElementById("data");
var datePicker = new DatePicker(element);

element.valueAsDate = new Date(2012, 10, 2);
element.addEventListener("input", function (event) {
  console.log(element.valueAsDate);
})

<link href="https://cdn.rawgit.com/xdan/datetimepicker/master/jquery.datetimepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/xdan/datetimepicker/master/build/jquery.datetimepicker.full.js"></script>

<input id="data" type="date" />