Descripción general del componente del selector de fecha de Web Components
El selector de fecha Ignite UI for Web Components es un componente rico en funciones que se utiliza para introducir una fecha a través de la entrada manual de texto o elegir valores de fecha en un cuadro de diálogo de calendario que aparece. Ligero y fácil de usar, el selector de fecha permite a los usuarios navegar a una fecha deseada con varias opciones de visualización: mes, año y década. También admite propiedades de validación comunes, como restricciones de fecha mínima y máxima y campos obligatorios.
El componente Selector de fecha Ignite UI for Web Components permite a los usuarios elegir una sola fecha a través de un menú desplegable de calendario de vista mensual o un campo de entrada editable. El selector de fecha de Web Components también admite un modo de cuadro de diálogo para la selección solo del calendario, el formato de fecha personalizable y la configuración regional y la integración de validación.
IgcDatePickerComponent es un componente completamente nuevo de Ignite UI for Web Components versión 5.0.0. Se ha cambiado el nombre del antiguo IgcDatePickerComponent anterior a esta versión a XDatePicker y su respectiva página de documentación se puede encontrar en "Componentes en desuso"
Ejemplo de selector de fecha Web Components
A continuación, puede ver un ejemplo que demuestra cómo funciona el selector de fechas cuando los usuarios pueden elegir una fecha a través de una entrada de texto manual y hacer clic en el icono de calendario de la izquierda para navegar hasta él. Vea cómo renderizarlo.
EXAMPLE
TS
HTML
CSS
import { defineComponents, IgcDatePickerComponent } from'igniteui-webcomponents';
import'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDatePickerComponent);
exportclassDatePickerOverview{
constructor() {
let datePicker = document.getElementById('date-picker') as IgcDatePickerComponent;
const date = newDate();
datePicker.value = date;
}
}
new DatePickerOverview();
ts
<!DOCTYPE html><html><head><title>Date Picker Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-date-pickerid="date-picker"><pslot="helper-text">Date</p></igc-date-picker></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Introducción a Web Components selector de fechas
En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
cmd
A continuación, tendrás que importar el IgcDatePickerComponent CSS necesario y registrar su módulo, de la siguiente manera:
El fragmento anterior agregará un icono adicional al final de la entrada, justo después del icono de borrado predeterminado. Sin embargo, esto no eliminará el icono de alternancia predeterminado, ya que los prefijos y sufijos se pueden apilar uno tras otro.
Personalización de los iconos de alternar y borrar
El calendario y el icono de borrado se pueden crear como plantilla mediante las calendar ranuras y clear:
Tiene IgcDatePickerComponent una navegación intuitiva por el teclado que facilita el incremento, la disminución o el salto a través de diferentes partes de fecha, entre otras, sin tener que tocar el mouse.
Llaves
Descripción
←
Mover un personaje al principio
→
Mover un personaje hasta el final.
Hogar
Ir al principio
Fin
Mover hasta el final
Ctrl / Comando + ←
Ir al principio de la sección de fecha/hora: la actual o la izquierda
Ctrl / Comando + →
Ir al final de la sección de fecha/hora: actual en o a la derecha
Centrarse en una parte de fecha/hora + ↓
Disminuye una parte de fecha/hora
Centrarse en una parte de fecha/hora + ↑
Incrementa una parte de fecha/hora
Ctrl / Comando +;
Establece la fecha/hora actual como valor del editor
Esc
Cierra la ventana emergente del calendario y enfoca el campo de entrada.
import { defineComponents, IgcDatePickerComponent } from'igniteui-webcomponents';
import'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDatePickerComponent);
exportclassDatePickerDialogMode{
constructor() {
let datePicker = document.getElementById('date-picker') as IgcDatePickerComponent;
const date = newDate();
datePicker.value = date;
}
}
new DatePickerDialogMode();
ts
<!DOCTYPE html><html><head><title>Date Picker Dialog Mode</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-date-pickerid="date-picker"mode="dialog"><pslot="helper-text">Date</p></igc-date-picker></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Formato de visualización y entrada
inputFormat y displayFormat son propiedades que se pueden establecer para hacer que el editor del selector siga un formato especificado. Se inputFormat basa en la configuración regional, por lo que si no se proporciona ninguno, el selector será el predeterminado utilizado por el navegador.
Una buena cosa a tener en cuenta es que el componente del selector de fecha siempre agregará un cero a la izquierda en las date partes y month si se proporcionaron en un formato que no lo tiene, por ejemplo d/M/yy, se convierte dd/MM/yy en . Esto solo se aplica durante la edición.
import { defineComponents, IgcDatePickerComponent } from'igniteui-webcomponents';
import'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDatePickerComponent);
exportclassDatePickerFormat{
constructor() {
let datePicker = document.getElementById('date-picker') as IgcDatePickerComponent;
const date = newDate();
datePicker.value = date;
}
}
new DatePickerFormat();
ts
<!DOCTYPE html><html><head><title>Date Picker Display Format</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-date-pickerid="date-picker"display-format="shortDate"input-format="dd/MM/yy"></igc-date-picker></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Se IgcDatePickerComponent puede utilizar en un elemento de formulario, el componente y max las propiedades actúan como validadores de min formulario.
En formularios, podemos manejar el igcChange evento del componente y actualizar el valor de la etiqueta.
EXAMPLE
TS
HTML
CSS
import { defineComponents, IgcButtonComponent, IgcDatePickerComponent } from'igniteui-webcomponents';
import'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDatePickerComponent, IgcButtonComponent);
exportclassDatePickerOverview{
constructor() {
let form = document.getElementById('form') as HTMLFormElement;
let datePickerValue = document.getElementById('datePickerValue') as HTMLElement;
let formStatus = document.getElementById('formStatus') as HTMLElement;
let datePicker = document.getElementById('datePicker') as IgcDatePickerComponent;
let resetButton = document.getElementById('resetButton') as IgcButtonComponent;
const date = newDate(2024, 4, 15);
const minDate = newDate(date.getFullYear(), date.getMonth(), date.getDate() - 10);
const maxDate = newDate(date.getFullYear(), date.getMonth(), date.getDate() + 15);
datePicker.value = date;
datePicker.max = maxDate;
datePicker.min = minDate;
datePickerValue.innerHTML = `Date picker value: ${datePicker.value ? datePicker.value.toLocaleString() : null}`;
formStatus.innerHTML = `Form valid: ${form.checkValidity()}`;
resetButton.addEventListener('click', this.reset);
datePicker.addEventListener("igcChange", () => {
datePickerValue.innerHTML = `Date picker value: ${datePicker.value ? datePicker.value.toLocaleString() : null}`;
formStatus.innerHTML = `Form valid: ${form.checkValidity()}`;
});
}
publicreset(){
let form = document.getElementById('form') as HTMLFormElement;
let datePickerValue = document.getElementById('datePickerValue') as HTMLElement;
let formStatus = document.getElementById('formStatus') as HTMLElement;
datePickerValue.innerHTML = "Date picker value: ";
formStatus.innerHTML = "Form valid: ";
form.reset();
}
}
new DatePickerOverview();
ts
<!DOCTYPE html><html><head><title>Date Picker Inside A Form</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><formid="form"><igc-date-pickerid="datePicker"required><pslot="helper-text">Date</p></igc-date-picker><div><igc-buttonid="submitButton"onclick="form.requestSubmit()">Submit</igc-button><igc-buttonid="resetButton">Reset</igc-button></div></form><pid="datePickerValue"></p><pid="formStatus"></p></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Configuraciones específicas del calendario
Puede IgcDatePickerComponent modificar algunas de las configuraciones del calendario a través de las propiedades que expone el selector de fechas. Algunos de estos incluyen visibleMonths que permite que se muestre más de un calendario cuando se expande el selector, weekStart que determina el día de inicio de la semana, showWeekNumbers que muestra el número de cada semana del año y más.
<!DOCTYPE html><html><head><title>Date Picker Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-date-pickermode="dialog"><pslot="helper-text">Date</p></igc-date-picker></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html