Html Question posted in
Some basic documentation can be found here.

convert HTML5 input type date format to like this "01-Jan-2024"?

I am trying to format my HTML5 input date type date format to "01-Jan-2024". I have tried placeholder="dd-mm-yyyy" value="" and required pattern="[0-9]{2}-[0-9]{3}-[0-9]{4}". Nothing working. Can you please help me how to format the date to "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>
Tags:

4

Answers


  1. 0

    The HTML5 input date type only supports the format (yyyy-MM-dd) and does not support the format you want (d-MM-yyyy).
    You can still achieve the desired format using JavaScript.

    Login or Signup to reply.
  2. 0 
       <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>

    With this script, whenever a date is selected, it will be reformatted to the desired format before being displayed in the input field.

    Login or Signup to reply.
  3. 0

    You could implement it like this:

    <!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>
    Login or Signup to reply.
  4. 0

    Certainly! HTML5 input type date doesn’t support custom formats directly. However, you can achieve the desired format using JavaScript. Here’s a step-by-step solution:

    1. Use an HTML input element of type "date".
    2. Use JavaScript to format the date as "dd-MMM-yyyy" (e.g., "01-Jan-2024").
    3. Display the formatted date in a separate field or wherever needed.

    Here’s how you can do it:

    function formatDate(inputDate) {
    const date = new Date(inputDate);
    const options = { day: '2-digit', month: 'short', year: 'numeric' };
    return date.toLocaleDateString('en-GB', options);
}

document.getElementById('inputDate').addEventListener('change', function() {
    const inputDate = this.value;
    const formattedDate = formatDate(inputDate);
    document.getElementById('formattedDate').value = formattedDate;
});
    <input type="date" id="inputDate">
<input type="text" id="formattedDate" readonly>

    `

    This code listens for changes in the input date field. When a date is selected, it formats it using the formatDate() function and displays the formatted date in the "formattedDate" input field.

    This way, you can achieve the desired date format of "01-Jan-2024".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search