Input datetime has no calendar option

Asked

Viewed 80 times

-1

In input date gives the option to open calendar to select the date, in the datetime you don’t have that option.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="datetime" name="DataInicio" id="DataInicio" >

<input type="date" name="DataReserva" id="DataReserva">

How can I solve the problem?

html

  • A very simple way to solve this is by using jQuery. Here are some references https://xdsoft.net/jqplugins/datetimepicker/ https://eonasdan.github.io/bootstrap-datetimepicker/ I hope you solve this.

2 answers

2


Hello, the right thing would be datatime-local, even so it will have limitations that will depend on your browser.

It is a feature of HTML5, where the Browser that has to adapt, no more as before rsrsrs, that the language worked on top of the browser, now it is the opposite, the browsers that have to keep track of the languages.

But I don’t think Chrome and Firefox not supported 100% yet.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="datetime-local" name="DataInicio" id="DataInicio" >
<input type="date" name="DataReserva" id="DataReserva">

  • According to the documentation, Chrome >= 20 already has support for datetime-local (but Firefox, Safari and IE don’t have) - I even did the test here and it only worked in Chrome anyway...

  • It’s... just the part of the Hour that’s still manual, it only loads the calendar.

0

To do this I usually use jQuery-UI. Below is a generic use example.

$("#DataInicio").on("click", function() {
  $("#DataInicio").datepicker({
    dateFormat: 'dd-mm-yy'
  });
});

$("#DataReserva").on("click", function() {
  $("#DataReserva").datepicker({
    dateFormat: 'dd-mm-yy'
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

<input type="text" name="DataInicio" id="DataInicio" >

<input type="text" name="DataReserva" id="DataReserva">

  • Important use of placeholder (Html5) for better communication with the user.

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.