'Alternative to datetime-local

Is there an alternative for that because Firefox and Internet Explorer are not supporting it...

Example:

<form>
<input type="datetime-local">
</form>
html


Solution 1:[1]

You can use <input type="date"> <input type="time"> together. Personally I think this is why datetime-local was removed. There are some great polyfills as well, like this one: http://afarkas.github.io/webshim/demos/index.html

Solution 2:[2]

I ran across this while looking for something to use instead of datetime-local

https://www.daterangepicker.com/

It has similar functionality to datetime-local and some extra. The one thing you would have to account for is being able to limit users' changing the date values in the input box if you do it that way. datetime-local automatically prevents say, putting letters into the time values.

Otherwise, Jonathan's answer still seems the best basic built-in option that works with FF/Chrome.

Solution 3:[3]

In my case, I tried many things but nothing looks perfect, finally, I came with this walk around to split the datetime into two inline inputs and remove the border between them to looks like just one input variable: 

<form action="" class="form-inline">
<div class="form-group">
    <input class="form-control" style=" border-right-style: none" type="date" max="9999-12-12T00:00:00.00" />
</div>
<div class="form-group">
    <input class="form-control" style=" border-left-style: none" type="time" max="9999-12-12T00:00:00.00" />
</div>

Solution 4:[4]

By my side I'm using a class (datetime-local) on all the inputs with type datetime-local. Then I can replace all these inputs by a custome version: CalendarPopup (https://xdsoft.net/jqplugins/calendar-popup/)

var calendar = $('input.datetime-local').CalendarPopup();

Solution 5:[5]

Currently we have many alternatives for a date and time inputs, on a quick search, type="time" and type="date" is not supported on the latest safary version.

I take this list from an admin dashboard theme:

https://bootstrap-datepicker.readthedocs.io/en/stable/

https://github.com/T00rk/bootstrap-material-datetimepicker

http://weareoutman.github.io/clockpicker/

http://www.daterangepicker.com/

https://fullcalendar.io/

https://amsul.ca/pickadate.js/

Solution 6:[6]

https://github.com/andchir/datetime-polyfill

<script src="datetime-polyfill.js"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jonathan Stegall
Solution 2 notsodev
Solution 3 Nomair Ghanem
Solution 4 NicoESIEA
Solution 5 atiquratik
Solution 6 Andchir

Related Questions