Native Angular date/time picker component styled by Twitter Bootstrap
MIT License
Componente selector de fecha/hora nativo para Angular (13+) estilizado con Bootstrap 4.
Documentación (Inglés)
Leer la documentación en otro idioma: Inglés
Use version 4
npm install angularjs-bootstrap-datetimepicker@4
Use version 3
npm install angularjs-bootstrap-datetimepicker@3
Visita angularjs-bootstrap-datetimepicker
Sé que este es un pequeño componente sin embargo mucha gente lo utiliza en producción (estoy completamente agradecido con ello) - si llegas a utilizar este componente por favor dale click al botón de estrella (en la parte superior derecha de la página).
Versiones de dependencias mínimas:
jQuery NO es necesario.
Si estas usando Angular CLI hay unos pequeños y simples pasos para agregar este componente a tu proyecto.
Primero, instala este módulo y las dependencias mínimas
npm install --save angular-bootstrap-datetimepicker bootstrap moment open-iconic
Después actualiza ./src/app/app.module.ts
para que incluya lo siguiente:
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { DlDateTimePickerDateModule } from 'angular-bootstrap-datetimepicker';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
DlDateTimePickerDateModule,
],
providers: [FormsModule],
bootstrap: [AppComponent]
})
export class AppModule { }
Posterior, agrega lo siguiente a ./src/app/app.component.html
<dl-date-time-picker startView="day" maxView="year" minView="minute" minuteStep="5" [(ngModel)]="selectedDate"> </dl-date-time-picker>
A continuación, agrega lo siguiente a ./src/styles.css
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~open-iconic/font/css/open-iconic-bootstrap.css";
Nota: Este componente utiliza íconos de la libreria open-iconic
de manera predeterminada, pero puedes utilizar cualquier librería de íconos que soporten estilizado por medio de clases
.
Por último, ejecuta npm start
y deberás ver el selector de fecha/tiempo en http://localhost:4200/
De manera predeterminada, el selector de fecha/tiempo es tan ancho como su contenedor { width:100% }
.
Utiliza las clases row
y col
de bootstrap flex para el acomodo del componente en filas y columnas.
Si el contenedor padre no es lo suficientemente ancho (mayor a 340px) el diseño de la fila y columna que contiene el componente puede que no se muestre de manera atractiva.
Otros lenguajes/locales es probable que requieran un contenedor un poco mas ancho para poder mostrar apropiadamente el contenido.
Utiliza el generador de configuración automatizado (¡por favor hazme saber si no funciona para tu caso!), o ve a https://dalelotts.github.io/angular-bootstrap-datetimepicker/ para visualizar la documentación generada por automático.
El primer día de la semana es determinado por los ajustes de moment i18n .
Por ejemplo, configurando el lugar a 'fr'
hará que día Lunes sea el primer día de la semana.
El formato para horas y minutos es determinado por los ajustes de moment i18n.
Las horas son desplegadas utilizando ll
como formato.
Los minutos son desplegados utilizando lll
como formato.
Recomiendo que utilices los ajustes predeterminados del lugar con Moment (si con incorrectos puedes enviar un PR a momento para corregir los ajustes) Si por alguna razón los ajustes predeterminados de Moment no funcionan, puedes configurar el lugar existente ó crear un lugar personalizado con los formatos deseados.
Puedes generar la documentación ejecutando npm run documentation
ó ver https://dalelotts.github.io/angular-bootstrap-datetimepicker/
El componente DlDateTimePickerComponent
agrega el atributo aria-label
a la izquierda, derecha y botones 'arriba' adicional a todas las celdas del calendario donde el texto de la celda no pueda describir completamente el valor.
El componente DlDateTimePickerComponent
soporta los siguiente atajos de teclado en todas las vistas:
Atajo | Acción |
---|---|
FLECHA_IZQ |
Ir a la celda de la izquierda |
FLECHA_DER |
Ir a la celda de la derecha |
FLECHA_ARRIBA |
Ir a la celda superior |
FLECHA_ABAJO |
Ir a la celda inferior |
INICIO |
Ir a la primera celda de la vista |
FIN |
Ir a la última celda de la vista |
PAGINA_ARRIBA |
Ir a la misma celda en el periodo anterior de tiempo |
PAGINA_ABAJO |
Ir a la misma celda en el periodo siguiente de tiempo |
ENTRAR o ESPACIO
|
Seleccionar la celda actual |
Esta vista permite al usuario seleccionar el año de la fecha a elegir. Si la vista de año es la minView, la fecha se configurará a medianoche del primer día del año.
Esta vista permite al usuario seleccionar el mes del año seleccionado. Si el mes es minView, la fecha se configurará a medianoche del primer día del mes.
Esta vista permite al usuario seleccionar el día del mes seleccionado. Si el día es minView, la fecha se configurará a medianoche del día seleccionado.
Esta vista permite al usuario seleccionar la hora del día del día seleccionado. Si la hora es igual a minView, la fecha se configurará al inicio de la hora del día seleccionado.
Esta vista permite al usuario seleccionar una hora específica del dia en la hora seleccionada. De manera predeterminada el tiempo es visualizado en incrementos de 5 minutos, la propiedad minuteStep controla los incrementos del tiempo visualizado. Si la vista de minutos es la minView, la cual es de manera predefinida, la fecha se configurará al inicio de la hora del día seleccionado.
Ver Contributing.md
Este componente fué realizado utilizando TDD y todas las mejoras y cambios tiene tests.
Utilizamos karma y jshint para así garantizar la calidad del código. La manera mas sencilla de correr estas pruebas es usando gulp de la siguiente manera:
npm install
npm test
Karma tratará de abrir Chrome como navegador con el cual se correrán los tests. Asegúrate de que chrome esté instalado o cambia la configuración de navegador en karma.config.js
angular-bootstrap-datetimepicker fué liberada con la licencia MIT y copyright 2015 Knight Rider Consulting, Inc.. Lo que anterior implica lo podrás encontrar a continuación.
La licencia completa de angular-bootstrap-datetimepicker se encuentra en el repositorio del proyecto para más información.