Descripción general de la entrada de fecha y hora Blazor

    La Ignite UI for Blazor permite al usuario configurar y editar la fecha y la hora en un elemento de entrada elegido. El usuario puede editar partes de fecha y hora utilizando una entrada enmascarada editable. Además, se puede especificar el formato de entrada y visualización deseado, así como los valores mínimo y máximo para utilizar la validación.

    Usage

    Antes de utilizar IgbDateTimeInput, debe registrarlo de la siguiente manera:

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
    

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbDateTimeInput componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    

    Value binding

    La forma más fácil de establecer el valor del IgbDateTimeInput componente es pasar un objeto Date a la Value propiedad:

    <IgbDateTimeInput @ref="DateTimeInputRef" Value="@Date">
        <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
    </IgbDateTimeInput>
    

    Keyboard Navigation

    IgbDateTimeInput tiene una navegación intuitiva con el teclado que facilita incrementar, disminuir o saltar a través de diferentes DateParts 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

    Setting formats

    IgbDateTimeInput admite diferentes formatos de visualización y entrada.

    Utiliza Intl.DateTimeFormat, lo que le permite admitir opciones de formato predefinidas, como long y,y short​ ​medium​ ​full. Además, también puede aceptar una cadena personalizada construida a partir de caracteres admitidos, como dd-MM-yy. Además, si no se proporciona ninguno DisplayFormat, el componente usará el InputFormat como tal.

    Input Format

    La siguiente tabla muestra los formatos que son compatibles con el componente InputFormat:

    Formato Descripción
    d La fecha será forzada con un cero a la izquierda durante la edición.
    dd Fecha con un cero inicial establecido explícitamente.
    M Mes, será forzado con un cero a la izquierda durante la edición.
    MM Mes con un cero inicial establecido explícitamente.
    yy Formato de año corto.
    yyyy Formato de año completo.
    h Las horas en formato de 12 horas se forzarán con un cero a la izquierda durante la edición.
    hh Horas en formato de 12 horas con un cero inicial establecido explícitamente.
    H Las horas en formato de 24 horas se verán forzadas con un cero a la izquierda durante la edición.
    HH Horas en formato de 24 horas, con un cero inicial establecido explícitamente.
    m Las actas, serán coaccionadas con un cero a la izquierda durante la edición.
    mm Minutos con un cero inicial establecido explícitamente.
    tt Sección AM/PM para formato de 12 horas.

    Para establecer un formato de entrada específico, páselo como una cadena a the IgbDateTimeInput. Esto establecerá tanto el formato de entrada de usuario esperado como el mask. Además, el se basa en la InputFormat configuración regional, por lo que si no se proporciona ninguno, el editor lo hará de dd/MM/yyyy forma predeterminada.

    <IgbDateTimeInput @ref="DateTimeInputRef" InputFormat="dd-MM-yy" DisplayFormat="medium">
        <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
    </IgbDateTimeInput>
    

    Si todo ha ido bien deberías ver lo siguiente en tu navegador:

    Display format

    La entrada de fecha y hora expone formatos predefinidos para mostrar la fecha/hora de varias maneras. Todos los ejemplos siguientes se proporcionan en la configuración regional en-US.

    Opción Ejemplo
    short 17/7/22, 00:00
    medium 17 de julio de 2022, 00:00:00
    long 17 de julio de 2022 a las 00:00:00 GMT+3
    full Domingo 17 de julio de 2022 a las 12:00:00 a. m., hora de verano de Europa del Este
    shortDate 7/17/22
    mediumDate 17 de julio de 2022
    longDate 17 de julio de 2022
    fullDate domingo, 17 de julio de 2022
    shortTime 12:00 AM
    mediumTime 12:00:00 AM
    longTime 12:00:00 GMT+3
    fullTime 12:00:00 a.m., hora de verano de Europa del Este

    Además, los usuarios pueden construir una cadena displayFormat utilizando los símbolos admitidos que se describen en la siguiente tabla.

    Tipo Formato Descripción Ejemplo
    Día d Dígitos mínimos. 7, 17
    dd Cero acolchado. 07, 17
    Mes M Dígitos mínimos. 3, 10
    MM Cero acolchado. 03, 10
    MMM Abreviado Oct
    MMMM Ancho Octubre
    MMMMM Angosto O
    Año y Numérico 2022
    yy Dos dígitos 22
    yyy Numérico 2022
    yyyy Numérico 2022
    Hora 1-12 h Dígitos mínimos 1, 12
    hh Cero acolchado 01, 12
    Hora 1-24 H Dígitos mínimos 1, 23
    HH Cero acolchado 01, 23
    Minuto m Dígitos mínimos 1, 59
    mm Cero acolchado 01, 59
    Segundo s Dígitos mínimos 1, 59
    ss Cero acolchado 01, 59
    Periodo de tiempo t Abreviado AM PM
    tt Abreviado AM PM
    ttt Corto mediodía
    tttt Largo mediodía
    ttttt Angosto norte

    [!Note] Many locales use the same time period string, irrespective of the format specified. Also, it has an effect only if a 12-hour clock is used.

    Min/max value

    Puede especificar Min y Max propiedades para restringir la entrada y controlar la validez del componente. Al igual que la Value propiedad, pueden ser de tipo string.

    <IgbDateTimeInput @ref="DateTimeInputRef" Min="@MinDate" Max="@MaxDate">
        <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
    </IgbDateTimeInput>
    

    Si todo salió bien, el componente no será invalid si el valor es mayor o menor que las fechas indicadas. Mira el siguiente ejemplo:

    Step up/down

    El IgbDateTimeInput público StepUp expone y StepDown los métodos. Aumentan o disminuyen una fecha y hora específicas DatePart establecidas actualmente y se pueden usar de dos maneras.

    En el primer escenario, si no se pasa ningún DatePart específico al método, un DatePart predeterminado se incrementará o disminuirá, en función de la implementación del componente interno InputFormat y especificado. En el segundo escenario, puede especificar explícitamente qué DatePart se va a manipular, ya que puede adaptarse a diferentes requisitos. Además, ambos métodos aceptan un parámetro opcional delta de tipo number que se puede usar para establecer el paso stepUp/stepDown.

    Además, SpinDelta es una propiedad que se puede usar para aplicar un delta diferente a cada segmento de fecha y hora. Se aplicará al girar con el teclado, la rueda del ratón o con los StepUp métodos and StepDown, siempre y cuando no tengan el parámetro delta proporcionado ya que tendrá prioridad sobre SpinDelta.

    Pruébelo en el siguiente ejemplo:

    Styling

    El componente IgbDateTimeInput deriva del componente IgbInput, por lo que expone todas las partes CSS disponibles. Consulte Estilo de entrada como referencia.

    API References

    Additional Resources