提问人：Maniraj Murugan 提问时间：8/7/2017 更新时间：7/28/2023 访问量：10552
如何更改输入类型datetime-local的格式？
How to change the format of input type datetime-local?
问：
我给出了一个类型为 ，datetime-local
<input type="datetime-local" class="form-control" name="booking_checkin">
其中填写查看后，格式是这样的，
2017-08-06T02:32.
看起来很尴尬，我需要改变这种模式，
我想要这样的格式，
2017-08-06, 02:32.
我很抱歉没有发布我尝试过的内容，因为在这里搜索了很多之后，我什至没有启动的想法来获得它。. 请帮我解决它..
答：
0赞
perumal N
8/7/2017
#1
在服务器端更改格式date
<?php
$date = date('Y-m-d, h:i',strtotime($_POST['booking_checkin']));
?>
0赞
adeneo
8/7/2017
#2
获取值时，它是有效的日期字符串，您可以将其传递给各个值，然后根据需要解析各个值new Date
$('.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">为了简单起见，使用 jQuery，它与如何解析日期无关
评论
0赞
Maniraj Murugan
8/7/2017
日期和时间我将填写它，但是当我查看它时，格式是这样的，我需要像这样更改。为了清楚地解释，我正在填写日期和时间，就像您在答案中输入的那样，我也提交了表格，但它显示日期和时间的格式需要更改。2017-08-06T02:322017-08-06, 02:32
0赞
adeneo
8/7/2017
输入本身的格式是本地的。我得到了，我没有听说有人在输入中获取 UTC 字符串，所以我认为这是获取的值，您使用 javascript 更改它01.12.2017 01:01
0赞
Maniraj Murugan
8/7/2017
我得到了一个中间有字母的连续模式，我在这里不需要。.如果我分配，我只得到这样的输出。Tinput type="datetime-local"2017-08-06T02:32
0赞
adeneo
8/7/2017
是的，这是一个有效的日期字符串，如果要更改它，请在提交数据之前在客户端更改它，或者在服务器端更改它，大多数时候服务器端也支持该格式。您不能使该输入从获取值中返回任何其他内容
0赞
Akalanka Ekanayake
2/26/2023
#3
要更改输入字段中显示的日期和时间的格式，您可以使用 JavaScript 来操作输入字段的值。
<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>
此代码侦听输入字段上的更改事件，然后使用 Date 对象的 toLocaleString 方法设置值的格式。然后，将格式化的日期和时间设置为输入字段的值。
请注意，此代码假定用户的浏览器设置为 en-US 区域设置。如果应用程序支持多个区域设置，则可能需要相应地调整 toLocaleDateString 和 toLocaleTimeString 方法的参数。
评论
new Date