How to edit Bootstrap 4 date input value ?

Last Updated : 23 Feb, 2023

We will learn about how to edit Bootstrap 4 date input value. The task is to change the value of the date field with the help of simple JavaScript code.

Approach: We are going to use three web technologies that are HTML, JavaScript, and CSS. Generally, when we choose some random value and click on the “submit” button, it will automatically call an embedded JavaScript function named edit(). In the function, we are going to retrieve the values from the three different fields such as “day(dd)”, “month(mm)”, and “year(yy)” and store these values in three different variables such as d, m, y respectively. The next step is to check whether the length of d and m is equal to 1 or not, if it is so, then we are going to append a ‘0’ before these variables. At the end, we have to form a format i.e. [yyyy-mm-dd] and change the value of the date field accordingly.

Retrieve the values of the different field such as ‘dd’, ‘mm’, ‘yy’.
Store the values in different variables in the string format.
Check if the length of the day and month variable is equal to 1 or not.
If the length of the day and month variable equals 1 then append a 0 before it so that the length becomes 2.
Construct a date format like [yyyy-mm-dd].
Replace the date format with Bootstrap date field.

Example:

HTML

   
<!DOCTYPE html> 
<html> 
  
<head> 
  
    <!--CDN of Bootstrap-->
    <link rel="stylesheet" 
          href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" 
          integrity= 
"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" 
          crossorigin="anonymous"> 
  
    <!--CDN of google font-->
    <style> 
        @import url( 
'https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap'); 
          
        @import url( 
'https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;500&display=swap'); 
          
        .form-control { 
            display: inline-block; 
            vertical-align: middle; 
            float: none; 
        } 
    </style> 
</head> 
  
<body style="border:4px solid rgb(0, 128, 28);"> 
    <div align="center" class="container"> 
        <form> 
            <h1 style="font-family:'Roboto Slab',serif; 
                text-align:center;color:green;"> 
                GeeksForGeeks 
            </h1> 
  
            <br> 
            <div align="center"> 
                <div style="font-family:'Roboto Slab',serif; 
                            color:rgb(255, 38, 0);text-align:center;"  
                     id="name"> 
                    Bootstrap Date Field 
                </div> 
                <br> 
  
                <input class="form-control" type="date" 
                       value="yyyy-mm-dd" id="d"
                       style="border:2px solid rgb(0, 128, 28); 
                              width:200px;height:30px;"> 
            </div> 
            <br><br><br> 
  
            <div style="display:inline;">dd</div> 
            <input class="form-control" type="number" 
                   value="1" id="d1" max="31" min="1" size="2" 
                   style="border:2px solid rgb(0, 128, 28);  
                width:80px; height:30px;"> 
  
            <div style="display: inline;">mm</div> 
            <input class="form-control" type="number" 
                   value="1" id="m" max="12" min="1" size="2" 
                   style="border: 2px solid rgb(0, 128, 28);  
                width:80px; height:30px;"> 
  
            <div style="display: inline;">yyyy</div> 
            <input class="form-control" type="number" 
                   value="2000" id="y" min="2000" max="3000" 
                   size="4" maxlength="4"
                   style="border:2px solid rgb(0, 128, 28);  
                width:100px;height:30px;"> 
            <br> 
  
            <div style="text-align: center;"> 
                <button type="button" class="btn btn-primary btn-sm" 
                        onclick="edit()" 
                        style="background-color: rgb(20, 220, 20);  
                               padding:5px;font-family: 'Roboto Slab', serif;"> 
                    submit 
                </button> 
            </div> 
        </form> 
        <br> 
    </div> 
  
    <script> 
        function edit() { 
          
            // Retrieve the values of  'dd', 'mm', 'yy' 
            var dd = document.getElementById("d1").value; 
            var mm = document.getElementById("m").value; 
            var yy = document.getElementById("y").value; 
          
            // Check if the length of day and month is 
            // equal to 1 
            if (dd.length == 1) { 
                dd = "0" + dd; 
            } 
            if (mm.length == 1) { 
                mm = "0" + mm; 
            } 
          
            // Construct a date format like  
            // [yyyy - mm - dd] 
            var date = yy + "-" + mm + "-" + dd; 
          
            // Replace the date format with BootStrap 
            // date field 
            document.getElementById("d").value = date; 
        } 
    </script> 
</body> 
  
</html> 