Aprenderemos cómo editar el valor de entrada de fecha de Bootstrap 4. La tarea es cambiar el valor del campo de fecha con la ayuda de un código JavaScript simple.
Enfoque: Vamos a utilizar tres tecnologías web que son HTML, JavaScript y CSS. Generalmente, cuando elegimos algún valor aleatorio y hacemos clic en el botón «enviar», llamará automáticamente a una función de JavaScript incrustada llamada edit() . En la función, recuperaremos los valores de los tres campos diferentes, como «día (día)», «mes (mm)» y «año (aa)» y almacenaremos estos valores en tres variables diferentes, como d , m , y respectivamente. El siguiente paso es verificar si la longitud de d y mes igual a 1 o no, si es así, vamos a agregar un ‘0’ antes de estas variables. Al final, tenemos que formar un formato, es decir, [yyyy-mm-dd] y cambiar el valor del campo de fecha en consecuencia.
- Recupere los valores de los diferentes campos como ‘dd’, ‘mm’, ‘yy’.
- Almacene los valores en diferentes variables en el formato de string.
- Compruebe si la longitud de la variable día y mes es igual a 1 o no.
- Si la longitud de la variable día y mes es igual a 1, agregue un 0 antes de ella para que la longitud se convierta en 2.
- Construya un formato de fecha como [yyyy-mm-dd].
- Reemplace el formato de fecha con el campo de fecha de Bootstrap .
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA