Jquery code shows different result depending on browser

Question

I’m using a <input type="datetime-local"> but unfortunately it doesn’t work on Mozilla.

So I thought to implement something to mask this problem, but for this I need to run a specific code for Mozilla.

My project uses Jquery and Materialize in the Front-end.

Thank you!

Answer 1

You can always use the date and time separately:

<input type="date"/><input type="time">

You can also play a little with css to manipulate the edges

input {  border: 1px solid; outline: none; }
.date { border-right: none; }
.time { border-left: none; }

div:hover input{
  border-color: dodgerblue;
}

<div><input class="date" type="date"/><input class="time" type="time"></div>

Since you are using jquery you can also embed a jquery plugin to help you

Datetimepicker

jQuery('#datetimepicker').datetimepicker();

<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.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/xdan/datetimepicker/master/build/jquery.datetimepicker.min.css"/ >


<input id="datetimepicker" type="text" >