"d-M-Y h:i A" format
for example "08-Nov-2024 12:00 AM"
in datetime-local input field.
โค้ด: เลือกทั้งหมด
<input type="datetime-local" >
How to change date time format to display as "d-M-Y h:i A" ?
Moderator: mindphp
โค้ด: เลือกทั้งหมด
<input type="datetime-local" >
โค้ด: เลือกทั้งหมด
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DateTime Format Example</title>
</head>
<body>
<label for="datetime">Select Date and Time:</label>
<input type="datetime-local" id="datetime" name="datetime">
<p id="formattedDateTime"></p>
<script>
document.getElementById('datetime').addEventListener('change', function() {
var input = this.value;
var date = new Date(input);
// Format as "d-M-Y h:i A"
var options = { year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: true };
var formattedDate = new Intl.DateTimeFormat('en-US', options).format(date).replace(',', '');
// Manually change the format to include the month in 3-letter format
var day = date.getDate().toString().padStart(2, '0');
var month = date.toLocaleString('en', { month: 'short' });
var year = date.getFullYear();
var hours = date.getHours() % 12 || 12;
var minutes = date.getMinutes().toString().padStart(2, '0');
var ampm = date.getHours() >= 12 ? 'PM' : 'AM';
var customFormattedDate = `${day}-${month}-${year} ${hours}:${minutes} ${ampm}`;
document.getElementById('formattedDateTime').innerText = customFormattedDate;
});
</script>
</body>
</html>
But it displays the desired format in <p id="formattedDateTime"></p>MindPHP Assistant เขียน: ↑08/11/2024 4:35 pm The `datetime-local` input field in HTML is designed to handle date and time in a specific format: `YYYY-MM-DDTHH:MM`. This format is standardized for web forms to ensure consistent data submission, and it doesn't allow for custom display formatting directly through HTML attributes.
However, you can achieve the desired display format using JavaScript. Here’s a general approach:
1. Use JavaScript to listen for changes to the `datetime-local` input.
2. Format the date and time when displaying it elsewhere on the page.
Here is how you can do it:
### Explanation:โค้ด: เลือกทั้งหมด
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DateTime Format Example</title> </head> <body> <label for="datetime">Select Date and Time:</label> <input type="datetime-local" id="datetime" name="datetime"> <p id="formattedDateTime"></p> <script> document.getElementById('datetime').addEventListener('change', function() { var input = this.value; var date = new Date(input); // Format as "d-M-Y h:i A" var options = { year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: true }; var formattedDate = new Intl.DateTimeFormat('en-US', options).format(date).replace(',', ''); // Manually change the format to include the month in 3-letter format var day = date.getDate().toString().padStart(2, '0'); var month = date.toLocaleString('en', { month: 'short' }); var year = date.getFullYear(); var hours = date.getHours() % 12 || 12; var minutes = date.getMinutes().toString().padStart(2, '0'); var ampm = date.getHours() >= 12 ? 'PM' : 'AM'; var customFormattedDate = `${day}-${month}-${year} ${hours}:${minutes} ${ampm}`; document.getElementById('formattedDateTime').innerText = customFormattedDate; }); </script> </body> </html>
1. **HTML Structure**: We have an input of type `datetime-local` and a `<p>` tag to display the formatted date.
2. **JavaScript**:
- An event listener is attached to the input field to detect changes (`change` event).
- When a user selects a date and time, the value from the input (`this.value`) is used to create a JavaScript `Date` object.
- The date is then manually formatted into the desired format: `d-M-Y h:i A`.
- The formatted date is displayed in the `<p>` tag.
### Limitations:
- The format of the native input cannot be changed directly; you can only alter how the data is displayed after selection.
- This example only formats the output display. It doesn't change the appearance of the input field itself during input.
โค้ด: เลือกทั้งหมด
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom DateTime Format Example</title>
</head>
<body>
<label for="datetime">Enter Date and Time:</label>
<input type="text" id="datetime" name="datetime" placeholder="DD-MMM-YYYY HH:MM AM/PM">
<p id="formattedDateTime"></p>
<script>
document.getElementById('datetime').addEventListener('blur', function() {
var input = this.value;
var parsedDate = parseDate(input);
if (parsedDate) {
// Display formatted date
document.getElementById('formattedDateTime').innerText = parsedDate.toLocaleString();
} else {
alert('Invalid date format. Please use "DD-MMM-YYYY HH:MM AM/PM".');
}
});
function parseDate(input) {
var datePattern = /(\d{2})-(\w{3})-(\d{4}) (\d{2}):(\d{2}) (AM|PM)/;
var match = input.match(datePattern);
if (match) {
var day = parseInt(match[1], 10);
var month = new Date(Date.parse(match[2] + " 1, 2020")).getMonth();
var year = parseInt(match[3], 10);
var hours = parseInt(match[4], 10);
var minutes = parseInt(match[5], 10);
var ampm = match[6];
if (ampm === 'PM' && hours < 12) {
hours += 12;
}
if (ampm === 'AM' && hours === 12) {
hours = 0;
}
return new Date(year, month, day, hours, minutes);
}
return null;
}
</script>
</body>
</html>
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 5