我正在尝试将 HTML5 输入日期类型日期格式格式化为“01-Jan-2024”。我已经尝试过
placeholder="dd-mm-yyyy" value=""required pattern="[0-9]{2}-[0-9]{3}-[0-9]{4}""d-MM-yyyy" (like '01-Jan-2024')<div class="form-group col-md-4">
<label asp-for="OrderDate"></label>
<div class="input-group">
<input type="date" asp-for="OrderDate" class="form-control">
</div>
<span asp-validation-for="OrderDate" class="text-danger"></span>
</div>
<div class="form-group col-md-4">
<label asp-for="OrderDate"></label>
<div class="input-group">
<input type="date" asp-for="OrderDate" class="form-control" id="orderDateInput">
</div>
<span asp-validation-for="OrderDate" class="text-danger"></span>
</div>
<script>
document.getElementById('orderDateInput').addEventListener('change', function () {
const selectedDate = new Date(this.value);
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
this.value = ('0' + selectedDate.getDate()).slice(-2) + '-' + monthNames[selectedDate.getMonth()] + '-' + selectedDate.getFullYear();
});
</script>
使用此脚本，每当选择日期时，它都会在显示在输入字段中之前重新格式化为所需的格式。
你可以这样实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Format</title>
</head>
<body>
<div class="form-group col-md-4">
<label for="orderDateInput">Order Date:</label>
<div class="input-group">
<input type="date" id="orderDateInput" class="form-control">
</div>
<span id="selectedDateOutput"></span>
</div>
<script>
// Get the input element
var input = document.getElementById("orderDateInput");
var output = document.getElementById("selectedDateOutput");
// Function to format the date
function formatDate(date) {
var options = { year: 'numeric', month: 'short', day: '2-digit' };
return new Date(date).toLocaleDateString('en-GB', options);
}
// Event listener for input change
input.addEventListener('change', function () {
// Get the value of the input
var dateValue = this.value;
// Format the date
var formattedDate = formatDate(dateValue);
// Display the selected date
output.textContent = formattedDate;
});
</script>
</body>
</html>HTML5输入日期类型仅支持格式（yyyy-MM-dd），不支持你想要的格式（d-MM-yyyy）。 您仍然可以使用 JavaScript 实现所需的格式。