Input Date Format With Dd/mm/yyyy In The Input Field

June 28, 2023 Post a Comment

I have a classic HTML date input: Now I need to change this format to be dd/mm/yyyy, and I know I can't change that i

Solution 1:

As you already know, you can't change the value format in an input type="date".

The input type="date" uses a localized displaying format, but its value is formatted like this: “YYYY-MM-DD”. (Doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)

Instead of trying to modify or use a pattern on the input of the datepicker, I tried to use the regular input type="date" to work with the datepicker.

The datepicker has got a dateFormat option. It seems that “yy-mm-dd” matches the format required by the input type="date". Using that, I ended-up with a localized datepicker in an easy way:

// Use datepicker on the date inputs
$("input[type=date]").datepicker({
  dateFormat: 'yy-mm-dd',
  onSelect: function(dateText, inst) {
    $(inst).val(dateText); // Write the value in the input
  }
});

// Code below to avoid the classic date-picker
$("input[type=date]").on('click', function() {
  returnfalse;
});

<linkhref="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><inputtype="date">

Hope it helps.

Solution 2:

Add readonly attribute to your html tag. This is restrict the user to enter the input.

<input type="text" name="dto"id="date_timepicker_end"readonly>

As you're using jQuery datepicker, it has option availble to specify the date format that you want to have.

 $("#date_timepicker_end").datepicker()
 {
    "dateFormat" : "dd-mm-yyyy"//any valid format that you want to have
 });

Hope this helps!!

Solution 3:

you can change the date tag to:

<inputtype="date"id="myDate"max="2222-05-26">

This won't allow the users to enter more than 4 chars on year field. Also it doesn't really matter what they enter though, you can always perform Client-server side validations.

Solution 4:

I have come up with a method of using a text box to simulate the date input and do any format you want, here is the code

<html><body>
date : 
<spanstyle="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px"><inputtype="date"class="xDateContainer"onchange="setCorrect(this,'xTime');"style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><inputtype="text"id="xTime"name="xTime"value="dd / mm / yyyy"style="border: none;height: 90%;"tabindex="-1"><spanstyle="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;"tabindex="-1">&#9660;</span></span><scriptlanguage="javascript">var matchEnterdDate=0;
//function to set back date opacity for non supported browserswindow.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any formatfunctionsetCorrect(xObj,xTraget){
    var date = newDate(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script></body></html>

1- please note that this method only work for browser that support date type.

2- the first function in JS code is for browser that don't support date type and set the look to a normal text input.

3- if you will use this code for multiple date inputs in your page please change the ID "xTime" of the text input in both function call and the input itself to something else and of course use the name of the input you want for the form submit.

4-on the second function you can use any format you want instead of day+" / "+month+" / "+year for example year+" / "+month+" / "+day and in the text input use a placeholder or value as yyyy / mm / dd for the user when the page load.

javascript magazin

Input Date Format With Dd/mm/yyyy In The Input Field

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Input Date Format With Dd/mm/yyyy In The Input Field"