Skip to content
Related Articles

Related Articles

How to edit Bootstrap 4 date input value ?
  • Difficulty Level : Expert
  • Last Updated : 08 Jan, 2021

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.

Steps:

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

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

   
<!DOCTYPE html>
<html>
  
<head>
  
    <!--CDN of Bootstrap-->
    <link rel="stylesheet" href=
        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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :