How to format the date in firefox [closed]

Question

How to format the date in firefox [closed]

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I was doing a web page and needed a textarea for the date. When I put the input with the type date in Chrome it creates a date mask, not allowing users to type letters and do not have to type the / to separate the date. But in Mozilla Firefox does not do that, it's a normal textarea.

I wanted to know if you have to format this textarea in the same way as Chrome or similar, at least make the functions of not allow entering number and separating date with / automatically? And if so, what would that be like?

javascript html5 firefox

asked by anonymous 28.10.2016 / 01:04

2 answers

0

Firefox does not support pro date yet, ideally you would use a javascript library to make it easier for the user, I recommend the jqueryui datepicker:

link

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

link

28.10.2016 / 12:31

Media wants to ignore attributes Android listView view listViewItem

score 0 · Accepted Answer

Panchester, you can make a module with a feature detection (in this case, to check if the browser supports 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><scriptsrc="https://cdn.rawgit.com/xdan/datetimepicker/master/build/jquery.datetimepicker.full.js"></script>

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