0

I have been searching around for a simple standard date time picker and a lot of the websites say that:

<input type="datetime" name="formStartDate">

Should produce a supported date time picker but I am having no such luck and I really don't want to go through the process of importing and downloading a whole bunch a frameworks and documents for such a simple feature...

Ok so since it's no longer supported is there a simple way to get one without a ton of frameworks? Or did the seriously just delete it without providing something else?

Ok that works great! except for I can only have one working on the page and I would like two. I think it has to do with the fact that these two snippets communicate through id and those have to unique. Can you please help me get multiple working on the same page?

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>
T Neate
  • 403
  • 2
  • 6
  • 18

4 Answers4

2

According to W3School, this feature is not supported in Chrome, Firefox, or Internet Explorer : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_datetime

Here's an explanation about why they removed the support : Why is HTML5 input type datetime removed from browsers already supporting it?

You can find many alternatives (using JavaScript) around the web, jQueryUI implements one : https://jqueryui.com/datepicker/

Community
  • 1
  • 1
AntoineB
  • 4,535
  • 5
  • 28
  • 61
0

I'm using Eonasdan's implementation of the datetimepicker as found here. For me, having multiple pickers per page is as simple as attaching them to different #ids on the page.

Here's what I'm using to implement four datetimepickers. The first one (job) loads existing data out of a template engine, and the second defaults to a mix of current date-level information and constant times. 

$(function () {
        var d = new Date();
        var month = d.getMonth();
        var day = d.getDate();
        var year = d.getFullYear();

        $('#jobDateStart').datetimepicker({
            defaultDate: moment("{{ $data['job_info']['start_date'] }}",'m/d/Y H:i:s')
        });
        $('#jobDateEnd').datetimepicker({
            defaultDate: moment("{{ $data['job_info']['end_date'] }}",'m/d/Y H:i:s')
        });
        $('#dayDateStart').datetimepicker();
        $("#dayDateStart").data("DateTimePicker").date(new Date(year, month, day, 7, 00));
        $('#dayDateEnd').datetimepicker();
        $("#dayDateEnd").data("DateTimePicker").date(new Date(year, month, day, 17, 00));
});
Luciasar
  • 393
  • 3
  • 7
  • 21
0

if you need to show a data picker on web use the code

import React from "react";

export default function DateTimePicker({ value, onChange }) {
  return React.createElement("input", {
    type: "date",
    value: value,
    onInput: onChange,
  });
}
Mina Fawzy
  • 20,852
  • 17
  • 133
  • 156
-1

It looks like the input type 'datetime' isn't supported by any popular browser.

You can try 

<input type='datetime-local' name="formStartDate">

instead. Which is supported by Chrome, Safari, and Opera, but not IE or Firefox

Source: http://www.w3schools.com/html/html_form_input_types.asp

Djent
  • 1