How to change the format of input type datetime-local?

Question

I am giving an input field with type datetime-local,

<input type="datetime-local" class="form-control" name="booking_checkin">

In which after filling and viewing it, the format is like this,

2017-08-06T02:32 .

It looks like awkward and i need this pattern to be changed,

I would like to have format like this,

2017-08-06, 02:32.

I apologise for not posting what i have tried because i don't even have a start up idea to get it after searching a lot here.. Kindly help me to solve it..

Genovese

You can find your answer here. Thanks – Propitiatory

You're not being clear, are you getting that string when you fetch the elements value? If so, it's a valid date that you can pass to new Date to get anything you want – Cardona

On which browser do you get the described behavior? – Granada

The input sent to the server is always normalised to yyyy-mm-dd. It is up to you to parse it, store the result and display it differently, on the server side. Changing the format input in the frontend is possible (e.g. with a custom component etc), but discouraged because you are overriding user preferences. – Scutcheon

Answer 1

Change date format on server-side

    <?php 
$date = date('Y-m-d, h:i',strtotime($_POST['booking_checkin']));
?>

Playwright

Answer 2

When getting the value, it's valid date string, and you can pass it to new Date and then parse the individual values anyway you'd like

$('.form-control').on('change', function() {
	var parsed = new Date(this.value);
  var ten    = function(x) { return x < 10 ? '0'+x : x};
  var date   = parsed.getFullYear() + '-' + (parsed.getMonth() + 1) + '-' + parsed.getDate();
  var time   = ten( parsed.getHours() ) + ':' + ten( parsed.getMinutes() );
  
  console.log( date + ', ' + time)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="datetime-local" class="form-control" name="booking_checkin">

Using jQuery for simplicity, it has nothing to do with how one parses a date

Cardona

Date and time i will fill it, but when i am viewing it, the format is like this 2017-08-06T02:32 which i need to change like this 2017-08-06, 02:32 . To explain in clear i am filling out the date and time as like the input given by you in the answer and i also submitted the form but the format it displays the date and time need to be changed.. – Genovese

The format in the input itself is as it says local. I'm getting 01.12.2017 01:01, I haven't heard anyone getting an UTC string in the input, so I assumed that was the fetched value, which you change with javascript – Cardona

I am getting a continuous pattern with letter T in middle which i don't need here.. If i assign input type="datetime-local" i am getting output like 2017-08-06T02:32 this only.. – Genovese

Yes, that's a valid date string, if you want to change it, either change it on the clientside before the data is submitted or change it on the serverside, which most of the time also supports that format. You can't make that input return anything else from getting the value – Cardona

Answer 3

To change the format of the date and time displayed in the input field, you can use JavaScript to manipulate the value of the input field.

<input type="datetime-local" class="form-control" name="booking_checkin" id="booking_checkin">

<script>
  // Get the input field element
  const input = document.getElementById('booking_checkin');

  // Add an event listener to the input field to detect when the value changes
  input.addEventListener('change', (event) => {
    // Get the value of the input field
    const value = event.target.value;

    // Convert the value to a Date object
    const date = new Date(value);

    // Format the date and time using the toLocaleString method
    const formattedDate = date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
    const formattedTime = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });

    // Set the value of the input field to the formatted date and time
    event.target.value = `${formattedDate}, ${formattedTime}`;
  });
</script>

This code listens for the change event on the input field and then formats the value using the toLocaleString method of the Date object. The formatted date and time are then set as the value of the input field.

Note that this code assumes that the user's browser is set to the en-US locale. If your application supports multiple locales, you may need to adjust the arguments to the toLocaleDateString and toLocaleTimeString methods accordingly.

Denudate