Kain India Kain India - 2 months ago 6
CSS Question

Date input field DD/MM/YYYY with input type text

Iam trying to make an date input but NOT date-formate of HTML5 field.

So lets say that my input is

<input type="text" id="dateField" />


Allowed characters only numbers and '
/
'
So is there any way to make this field (With out using the
type="date"
)
UPDATE The purpose is not to use any of the HTML 5 attributes.

Answer

I have some code that I made in the past for this field :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <style type="text/css">
        .errInput{
            border-color: rgba(255,0,0,0.5);
        }
    </style>
    <script type="text/javascript">
        function checkDate(e){
    $( e ).removeClass("errInput");
    var string = $( e ).val();
    var theDate = string.split("/"); 
    var err = false;
    switch (theDate.length){

        case 0:
            break; 
        case 1:
            if (checkDay(theDate[0]) == false){
                $( e ).addClass("errInput");
                return;
            }
            if (theDate[0].length > 1){
                $( e ).val( $( e ).val() + "/");
            }
            else{
                $( e ).val("0"+ $( e ).val() + "/");
            }
            break; 
        case 2:
            if (theDate[0] == "" || theDate[0].length ==0 ){
                $( e ).addClass("errInput");
                return;
            }
            if (checkDay (theDate[0]) == false){
                $( e ).addClass("errInput");
                return;
            }
            if (checkMonth(theDate[1]) == false){
                $( e ).addClass("errInput");
                return;
            }
            if (theDate[1].length > 1)
             $( e ).val( $( e ).val() + "/");
            else if(theDate[1].length == 1 && parseInt(theDate[1]) > 3 )
                $( e ).val( theDate[0] + "/0"+theDate[1]+"/");
            break; 
        case 3:
            if (theDate[0] == "" || theDate[0].length ==0 ){
                $( e ).addClass("errInput");
                return;
            }
            if (theDate[1] == "" || theDate[1].length ==0 ){
                $( e ).addClass("errInput");
                return;
            }
            if (checkDay (theDate[0]) == false){
                $( e ).addClass("errInput");
                return;
            }
            if (checkMonth(theDate[1]) == false){
                $( e ).addClass("errInput");
                return;
            }
            if (theDate[1].length == 1){
                $( e ).val( theDate[0] + "/0"+theDate[1]+"/" + theDate[2]);
            }
            if (checkYear(theDate[2]) == false){
                $( e ).addClass("errInput");
                return;
            }
            return true;
            break; 
        default:
        $( e ).addClass("errInput");
        err = true;     
        break;
    } 
}
function checkDay (d){
    var MAXDAY = 12;
    if (d.length ==0 || d == ""){
        return false; 
    }
    for (var i = 0 ; i < d.length ; i++){
        if (d.charAt(i) > "9" || d.charAt(i) < "0"   )  {
            return false; 
        }
    }
    if(parseInt(d) > MAXDAY || parseInt(d) < 1){
        return false;
    }
    if(d.length > 2){
        return false;
    }
    return true;
}
function checkMonth (m){
    var MAXMONTH = 31;
    if (m.length == 0 || m == ""){
        return false
    }
    for (var i = 0 ; i < m.length ; i++){
        if (m.charAt(i) > "9" || m.charAt(i) < "0"   )  {
            return false; 
        }
    }
    if(parseInt(m) > MAXMONTH || parseInt(m) < 1){
        return false;
    }
    if(m.length > 2){
        return false;
    }
    return true;
}
function checkYear (y){
    if (y.length == 0 || y == ""){
        return false;
    }
    var MAXYEAR =  new Date();
    MAXYEAR = MAXYEAR.getFullYear(); 
    for (var i = 0 ; i < y.length ; i++){
        if (y.charAt(i) > "9" || y.charAt(i) < "0")     {
            return false;
        }
    }
    if(parseInt(y) < 1900 || parseInt(y) > MAXYEAR){
        return false; 
    }
    if(y.length > 4){
        return false;
    }
    return true;
}
    </script>
</head>
<body>
<input type="text" id="dateField" onkeyup="checkDate(this)" />
</body>
</html>
Comments