Descripción general del componente Blazor selector de fecha

    El selector de fecha Ignite UI for Blazor 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 fechas 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 Blazor 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 Blazor también admite un modo de diálogo para la selección solo del calendario, la integración de validación y formato de fecha personalizable y localizable.

    [!NOTE] The IgbDatePicker is a brand new component from Ignite UI for Blazor version . The old IgbDatePicker prior to this version has been renamed to XDatePicker and its respective documentation page can be found under "Deprecated Components"

    Blazor Date Picker Example

    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.

    Getting Started with Blazor Date Picker

    Para comenzar con el IgbDatePicker componente, primero debemos registrar su módulo de la siguiente manera:

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

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbDatePicker 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" />
    

    Para obtener una introducción completa a Ignite UI for Blazor, lea el tema Introducción.

    Using the Blazor Date Picker Component

    Display Date Picker

    Para crear una instancia de a IgbDatePicker en su estado predeterminado dropdown, use el código siguiente:

    <IgbDatePicker @ref="DatePicker"></IgbDatePicker>
    

    Options

    The IgbDatePicker can be bound to a date.

    <IgbDatePicker @ref="DatePicker" Value="@SelectedDate">
    </IgbDatePicker>
    
    @code {
    
        public DateTime SelectedDate { get; set; }
        public IgbDatePicker DatePicker { get; set; }
    
        protected override void OnInitialized()
        {
            this.SelectedDate = DateTime.Today;
        }
    }
    

    Projecting components

    Con las ranuras de prefijo y sufijo podemos agregar diferentes contenidos antes y después del contenido principal de la entrada.

    <IgbDatePicker @ref="DatePicker">
        <IgbIcon 
            Slot="suffix" 
            IconName="arrow_upward" 
            Collection="bootstrap" 
            Class="small" 
            @onclick="() => DatePicker.StepUp(DatePart.Month)">
        </IgbIcon>
    </IgbDatePicker>
    

    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:

    <IgbDatePicker>
        <IgbIcon Slot="calendar" IconName="calendar" Collection="material" Class="small"></IgbIcon>
        <IgbIcon Slot="clear" IconName="delete" Collection="material" Class="small"></IgbIcon>
    </IgbDatePicker>
    

    Botones de acción personalizados

    Los botones de acción del selector se pueden modelar usando la actions ranura:

    <IgbDatePicker>
        <IgbButton Slot="actions" @onclick="() => DatePicker.ShowWeekNumbers = true">Show Week Numbers</IgbButton>
    </IgbDatePicker>
    

    Keyboard Navigation

    Tiene IgbDatePicker 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.

    Examples

    Dialog Mode

    También IgbDatePicker admite un dialog modo:

    <IgbDatePicker Mode="DatePickerMode.Dialog"></IgbDatePicker>
    

    Display and input format

    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.

    DisplayFormat se utiliza para dar formato a la entrada del selector cuando no está enfocada. Si no se proporciona ninguno DisplayFormat, el selector usará el InputFormat como su DisplayFormat.

    Puede encontrar más información sobre estos en la sección de IgbDateTimeInput formato.

    Increment and decrement

    Las IgbDatePicker exposiciones StepUp y StepDown los métodos. Ambos provienen de la IgbDateTimeInput y se pueden utilizar para incrementar y disminuir un específico DatePart de la fecha establecida actualmente.

    <IgbDatePicker @ref="DatePicker">
        <IgbIcon 
            Slot="prefix"
            IconName="arrow_upward"
            Collection="material"               
            @onclick="() => DatePicker.StepUp(DatePart.Month)">
        </IgbIcon>
        <IgbIcon 
            Slot="suffix"
            IconName="arrow_downward"
            Collection="material"
            @onclick="() => DatePicker.StepDown(DatePart.Month)">
        </IgbIcon>
    </IgbDatePicker>
    

    In Forms

    Se IgbDatePicker 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 Change evento del componente y actualizar el valor de la etiqueta.

    Calendar Specific settings

    Puede IgbDatePicker 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.

    Internationalization

    La localización de la IgbDatePicker se puede controlar a través de su Locale entrada.

    Así es como se vería una IgbDatePicker definición de configuración regional japonesa:

    <IgbDatePicker Locale="ja-JP"></IgbDatePicker>
    

    Styling

    El IgbDatePicker componente se deriva del IgbInput componente and IgbCalendar, por lo que expone todas las partes CSS disponibles. Consulte Estilo de entrada y Estilo de calendario para obtener referencia.

    API References

    Additional Resources