如何编辑Bootstrap 4日期输入值？

我们将学习如何编辑Bootstrap 4日期输入值。任务是借助简单的JavaScript代码更改date字段的值。

方法：我们将使用HTML，JavaScript和CSS这三种Web技术。通常，当我们选择一些随机值并单击“提交”按钮时，它将自动调用一个名为edit()的嵌入式JavaScript函数。在函数，我们将从三个不同的字段中检索值，例如“ day(dd)”，“ month(mm)”和“ year(yy)”，并将这些值存储在三个不同的变量中，例如d ， m ， y 。下一步是检查d和m的长度是否等于1，如果是，那么我们将在这些变量之前附加一个“ 0”。最后，我们必须形成[yyyy-mm-dd]格式，并相应地更改日期字段的值。

脚步：

1. 检索不同字段的值，例如“ dd”，“ mm”，“ yy”。
2. 将值存储在字符串格式的不同变量中。
3. 检查日和月变量的长度是否等于1。
4. 如果日和月变量的长度等于1，则在其前面附加一个0，以使长度变为2。
5. 构造一个日期格式，例如[yyyy-mm-dd]。
6. 将日期格式替换为Bootstrap日期字段。

HTML

  

  
    
    
  
    
    
        @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;
        }
    

  

    
        
            
                GeeksForGeeks
            
  
            
            
                
                    Bootstrap Date Field
                
                
  
                
            
            
  
            dd
            
  
            mm
            
  
            yyyy
            
            
  
            
                
                    submit
                
            
        
        
    
  
    
        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;
        }
    

  

输出：