Input Type Datetime - Value Format

Input type DateTime - Value format?

For <input type="datetime" value="" ...

A string representing a global date and time.
Value: A valid date-time
as defined in [RFC 3339], with these additional qualifications:
•the literal letters T and Z in the date/time syntax must always be uppercase
•the date-fullyear production is instead defined as four or
more digits representing a number greater than 0
Examples:
1990-12-31T23:59:60Z
1996-12-19T16:39:57-08:00

http://www.w3.org/TR/html-markup/input.datetime.html#input.datetime.attrs.value

Update:

This feature is obsolete. Although it may still work in some browsers,
its use is discouraged since it could be removed at any time. Try to
avoid using it.
The HTML was a control for entering a date and
time (hour, minute, second, and fraction of a second) as well as a
timezone. This feature has been removed from WHATWG HTML, and is no
longer supported in browsers.
Instead, browsers are implementing (and developers are encouraged to
use) the datetime-local input type.

Why is HTML5 input type datetime removed from browsers already supporting it?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime

Is there any way to change input type= date format?

It is impossible to change the format

We have to differentiate between the over the wire format and the browser's presentation format.

Wire format

The HTML5 date input specification refers to the RFC 3339 specification, which specifies a full-date format equal to: yyyy-mm-dd. See section 5.6 of the RFC 3339 specification for more details.

This format is used by the value HTML attribute and DOM property and is the one used when doing an ordinary form submission.

Presentation format

Browsers are unrestricted in how they present a date input. At the time of writing Chrome, Edge, Firefox, and Opera have date support (see here). They all display a date picker and format the text in the input field.

Desktop devices

For Chrome, Firefox, and Opera, the formatting of the input field's text is based on the browser's language setting. For Edge, it is based on the Windows language setting. Sadly, all web browsers ignore the date formatting configured in the operating system. To me this is very strange behaviour, and something to consider when using this input type. For example, Dutch users that have their operating system or browser language set to en-us will be shown 01/30/2019 instead of the format they are accustomed to: 30-01-2019.

Internet Explorer 9, 10, and 11 display a text input field with the wire format.

Mobile devices

Specifically for Chrome on Android, the formatting is based on the Android display language. I suspect that the same is true for other browsers, though I've not been able to verify this.

How to format datetime -local value in php fetched from mysql?

T is a format character(Timezone abbreviation e.g: EST, MDT…) so you can't use it directly. Escape it (\T) to get a literal T character:

datetime.format.php

You can prevent a recognized character in the format string from being expanded by escaping it with a preceding backslash.

<?php
    $date = date("Y-m-d\TH:i:s", strtotime($result['schedule']));
?>

<input type="datetime-local" name="schedule" value="<?php echo $date; ?>"/>

use <?=$date?> instead of <?php echo $date; ?>

How to fill up input value of datetime-local when editing in table?

In order to define a datetime-local input field you still need to provide the datetime in a standardised format, see here How to set the value for the input type datetime-local?.

So, something like "2021-05-21T08:23" would be accepted.

var id = "";
  $(document).on('click', '.fa-edit', function () {
    row2edit = $(this).parent().parent();
    id = $(this).parent().parent().attr('id');
    // Copy original data from row to edit into
    // edit row input fields and columns
    let newEditRow = $("#row_edit").clone();
    newEditRow.children().eq(0).text(row2edit.children(".id").text());
    let in_fields = [{ 'td_class': 'td.id' },
    { 'td_class': 'td.event_name', 'id_edit': '#in_event_name' },
    { 'td_class': 'td.event_start_date', 'id_edit': '#in_event_start_date' },
    { 'td_class': 'td.event_end_date', 'id_edit': '#in_event_end_date' },
    { 'td_class': 'td.location', 'id_edit': '#in_location' },
    { 'td_class': 'td.status', 'id_edit': '#in_status' },
    ];

    $.each(in_fields, function (idx, item) {
      let in_field_edit = newEditRow.children().eq(idx).children(item.id_edit);
      in_field_edit.val(row2edit.children(item.td_class).text());
      if (idx>1 && idx<4) {
        let in_field_edit = newEditRow.children().eq(idx).children(item.id_edit);
        in_field_edit.val(row2edit.children(item.td_class).text().split(".").reverse().join("-")+"T00:00");
      }
    });

    newEditRow.show();
    row2edit.before(newEditRow);
    row2edit.hide();

    $('.fa-edit').hide();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="w3-table-all w3-small w3-hoverable" id="table" style="width: 100%;">
          <thead>
            <tr class="w3" style="background-color: rgb(205, 226, 210); color: white;">
              <th>ID</th>
              <th>Event Name</th>
              <th>Event Start Date</th>
              <th>Event End Date</th>
              <th>Location</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr id="template_row_data" class="w3-hover-grey">
              <td class="numeric id">123</td>
              <td class="text event_name">myEvent</td>
              <td class="text event_start_date">23.04.2021</td>
              <td class="text event_end_date">24.04.2021</td>
              <td class="text location">somewhere</td>
              <td class="text status">Active</td>
              <td class="icon" style="text-align: center; vertical-align: middle;">
                <i class="fa fa-eye w3-large w3-text-grey view-btn" aria-hidden="true" title="Show QR"></i>   
                <i class="fa fa-edit w3-large w3-text-grey edit-btn" aria-hidden="true" title="Edit row">edit</i>   
                <i class="fa fa-circle-o-notch fa-spin w3-large w3-text-grey" aria-xhidden="true"
                  title="Save to server"></i>
              </td>
            </tr>
          </tbody>
          <tr id="row_edit" class="w3-hover-khaki">
            <td class="text id">
            </td>
            <td class="text event_name">
              <input type="text" id="in_event_name" class="text" style="border:1px solid black"><br>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_name"></i>
            </td>
            <td class="text event_start_date">
              <input type="datetime-local" id="in_event_start_date" class="text" style="border:1px solid black"><br>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_start_date"></i>
            </td>
            <td class="text event_end_date">
              <input type="datetime-local" id="in_event_end_date" class="text" style="border:1px solid black"><br>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_end_date"></i>
            </td>
            <td class="text location">
              <input type="text" id="in_location" class="text" style="border:1px solid black"><br>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_location"></i>
            </td>
            <td class="text status">
              <select name="in_status" id="in_status" class="text" style="border:1px solid black; ">
                <option value="Active">Active</option>
                <option value="Inactive">Inactive</option>
              </select>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_status"></i>
            </td>
            <td class="icon" style="text-align: center;">
              <i class="fa fa-save w3-large w3-text-grey" aria-hidden="true" title="Save data"></i>   
              <i class="fa fa-times w3-large w3-text-red" aria-hidden="true" title="Cancel"></i>
            </td>
          </tr>
        </table>

set input of type date value from a string

You will have to format the date into YYYY-MM-DD before passing it to the date input.

To do this, you can use:

const str = "29/11/2020";

const [day, month, year] = str.split('/');

const date = `${year}-${month}-${day}`;

<input type="date" value={date} />

Setting format and value in input type= date

The format is YYYY-MM-DD. You cannot change it.

$('#myinput').val('2013-12-31'); sets value

How to set a value for the input type 'datetime-local'?

I don't know exacly what is in $row['Time'] but it should be as follows:

Definition

A valid date-time as defined in RFC 3339 with these
additional qualifications:

the literal letters T and Z in the date/time syntax must always be uppercase

the date-fullyear production is instead defined as four or more digits representing a number greater than 0

Examples

1990-12-31T23:59:60Z

1996-12-19T16:39:57-08:00

Solution

To create RFC 3339 format in PHP you can use:

echo date('Y-m-d\TH:i:sP', $row['Time']);

or in another way:

echo date("c", strtotime($row['Time']));

or if you prefer objective style:

echo (new DateTime($row['Time']))->format('c');

In your code

So in your code it would look as follows:

<input type="datetime-local"  value="<?php echo date('Y-m-d\TH:i:sP', $row['Time']); ?>" class="date" name="start" REQUIRED>

<input type="datetime-local"  value="<?php echo date("c", strtotime($row['Time'])); ?>" class="date" name="start" REQUIRED>

Manual

More informations can be found here
PHP date Manual
PHP DateTime Manual

How do I change format datetime in HTML to dd/mm/yyyy

With input type=date you cannot change how the value is displayed.

The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#value

If you need a different display, you will have to resort to input type=text.

Input Type Datetime - Value Format