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

admin管理员组

文章数量:1332345

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..

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..

• javascript
• html
• datetime
• input-type-file

Share Improve this question Follow asked Aug 7, 2017 at 10:45 Maniraj MuruganManiraj Murugan 9,0842424 gold badges7373 silver badges122122 bronze badges 4

• You can find your answer here. Thanks – Rahul Parikh Commented Aug 7, 2017 at 10:51
• 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 – adeneo Commented Aug 7, 2017 at 10:55
• On which browser do you get the described behavior? – svet Commented Feb 26, 2021 at 18:23
• 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 ponent etc), but discouraged because you are overriding user preferences. – Christian Commented Nov 26, 2023 at 22:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 0

Change date format on server-side

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

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./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

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.

本文标签： javascriptHow to change the format of input type datetimelocalStack Overflow