Skip to content

Commit 21e6f2d

Browse files
committed
feat: update to use angular 13
Thank you to @tszewcow for these changes. BREAKING CHANGE: Upgrade to angular 13 actually happened in bca8d53 but the commit message is wrong so I am adding this one to trigger a new release.
1 parent ae1efb7 commit 21e6f2d

File tree

2 files changed

+109
-105
lines changed

2 files changed

+109
-105
lines changed

Diff for: README.es_MX.md

+57-51
Original file line numberDiff line numberDiff line change
@@ -17,34 +17,43 @@ Componente selector de fecha/hora nativo para Angular (8+) estilizado con Bootst
1717

1818
[Github](https://github.com/dalelotts/angular-bootstrap-datetimepicker)
1919

20-
*Leer la documentación en otro idioma: [Inglés](https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/README.md)*
20+
_Leer la documentación en otro idioma: [Inglés](https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/README.md)_
21+
22+
## Angular 8.x-12.x?
23+
24+
Use version 4
25+
26+
`npm install angularjs-bootstrap-datetimepicker@4`
2127

2228
## Angular 7.x?
2329

24-
Use install version 3.1.0
30+
Use version 3
2531

26-
`npm install angularjs-bootstrap-datetimepicker@3.1.0`
32+
`npm install angularjs-bootstrap-datetimepicker@3`
2733

2834
## Angular 1.x?
2935

3036
Visita [angularjs-bootstrap-datetimepicker](https://github.com/dalelotts/angularjs-bootstrap-datetimepicker)
3137

3238
## Apoya el proyecto
39+
3340
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).
3441

3542
![](./screenshots/stars.png)
3643

3744
## Versiones de Dependencias Mínimas
3845

3946
Versiones de dependencias mínimas:
40-
* AngularJS 8.x ó mayor (1.x no funcionará)
41-
* moment.js 2.x ó mayor para parseo de fecha y formateo
42-
* bootstrap 4.x para css/layout
43-
* open-iconic para los íconos predeterminados (puedes usar cualquier librería de íconos de tu preferencia)
44-
47+
48+
- AngularJS 8.x ó mayor (1.x no funcionará)
49+
- moment.js 2.x ó mayor para parseo de fecha y formateo
50+
- bootstrap 4.x para css/layout
51+
- open-iconic para los íconos predeterminados (puedes usar cualquier librería de íconos de tu preferencia)
52+
4553
jQuery NO es necesario.
4654

4755
## Uso con Angular CLI
56+
4857
Si estas usando [Angular CLI](https://cli.angular.io/) hay unos pequeños y simples pasos para agregar este componente a tu proyecto.
4958

5059
Primero, instala este módulo y las dependencias mínimas
@@ -77,77 +86,73 @@ import { DlDateTimePickerDateModule } from 'angular-bootstrap-datetimepicker';
7786
export class AppModule { }
7887
```
7988

80-
Posterior, agrega lo siguiente a `./src/app/app.component.html`
89+
Posterior, agrega lo siguiente a `./src/app/app.component.html`
8190

8291
```html
83-
<dl-date-time-picker
84-
startView="day"
85-
maxView="year"
86-
minView="minute"
87-
minuteStep="5"
88-
[(ngModel)]="selectedDate"
89-
>
90-
</dl-date-time-picker>
92+
<dl-date-time-picker startView="day" maxView="year" minView="minute" minuteStep="5" [(ngModel)]="selectedDate"> </dl-date-time-picker>
9193
```
9294

9395
A continuación, agrega lo siguiente a `./src/styles.css`
9496

9597
```css
96-
@import '~bootstrap/dist/css/bootstrap.min.css';
97-
@import '~open-iconic/font/css/open-iconic-bootstrap.css';
98+
@import "~bootstrap/dist/css/bootstrap.min.css";
99+
@import "~open-iconic/font/css/open-iconic-bootstrap.css";
98100
```
99101

100102
**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`.
101103

102-
Por último, ejecuta `npm start` y deberás ver el selector de fecha/tiempo en [http://localhost:4200/](http://localhost:4200/)
104+
Por último, ejecuta `npm start` y deberás ver el selector de fecha/tiempo en [http://localhost:4200/](http://localhost:4200/)
103105

104-
De manera predeterminada, el selector de fecha/tiempo es tan ancho como su contenedor `{ width:100% }`.
106+
De manera predeterminada, el selector de fecha/tiempo es tan ancho como su contenedor `{ width:100% }`.
105107
Utiliza las clases `row` y `col` de bootstrap flex para el acomodo del componente en filas y columnas.
106108
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.
107109
Otros lenguajes/locales es probable que requieran un contenedor un poco mas ancho para poder mostrar apropiadamente el contenido.
108110

109111
## Configuración
110-
Utiliza el [generador de configuración automatizado](https://stackblitz.com/github/dalelotts/angular-bootstrap-datetimepicker-demo) (¡por favor hazme saber si no funciona para tu caso!),
112+
113+
Utiliza el [generador de configuración automatizado](https://stackblitz.com/github/dalelotts/angular-bootstrap-datetimepicker-demo) (¡por favor hazme saber si no funciona para tu caso!),
111114
o ve a [https://dalelotts.github.io/angular-bootstrap-datetimepicker/](https://dalelotts.github.io/angular-bootstrap-datetimepicker/)
112115
para visualizar la documentación generada por automático.
113116

114117
### Primer día de la semana
118+
115119
El primer día de la semana es determinado por los [ajustes de moment i18n ](https://momentjs.com/docs/#/i18n/).
116120
Por ejemplo, configurando el lugar a `'fr'` hará que día Lunes sea el primer día de la semana.
117121

118122
### Formato para visualización de año, mes, dia, hora, am/pm y minutos
123+
119124
El formato para horas y minutos es determinado por los [ajustes de moment i18n](https://momentjs.com/docs/#/i18n/).
120125

121126
Las horas son desplegadas utilizando `ll` como formato.
122-
Los minutos son desplegados utilizando `lll` como formato.
127+
Los minutos son desplegados utilizando `lll` como formato.
123128

124-
Recomiendo que utilices los ajustes predeterminados del lugar con Moment (si con incorrectos puedes enviar un PR a momento para corregir los ajustes)
129+
Recomiendo que utilices los ajustes predeterminados del lugar con Moment (si con incorrectos puedes enviar un PR a momento para corregir los ajustes)
125130
Si por alguna razón los ajustes predeterminados de Moment no funcionan, puedes [configurar el lugar existente](https://momentjs.com/docs/#/customization/) ó [crear un lugar personalizado](https://momentjs.com/docs/#/i18n/adding-locale/) con los formatos deseados.
126131

127-
128132
## Documentación
133+
129134
Puedes generar la documentación ejecutando `npm run documentation`
130135
ó ver [https://dalelotts.github.io/angular-bootstrap-datetimepicker/](https://dalelotts.github.io/angular-bootstrap-datetimepicker/)
131136

132137
## Accesibilidad
133138

134139
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.
135140

136-
### Accesibilidad por medio del teclado
141+
### Accesibilidad por medio del teclado
137142

138143
El componente `DlDateTimePickerComponent` soporta los siguiente atajos de teclado en todas las vistas:
139144

140-
| Atajo | Acción |
141-
|----------------------|-------------------------------------------------|
142-
| `FLECHA_IZQ` | Ir a la celda de la izquierda |
143-
| `FLECHA_DER` | Ir a la celda de la derecha |
144-
| `FLECHA_ARRIBA` | Ir a la celda superior |
145-
| `FLECHA_ABAJO` | Ir a la celda inferior |
146-
| `INICIO` | Ir a la primera celda de la vista |
147-
| `FIN` | Ir a la última celda de la vista |
148-
| `PAGINA_ARRIBA` | Ir a la misma celda en el periodo anterior de tiempo |
149-
| `PAGINA_ABAJO` | Ir a la misma celda en el periodo siguiente de tiempo |
150-
| `ENTRAR` o `ESPACIO` | Seleccionar la celda actual |
145+
| Atajo | Acción |
146+
| -------------------- | ----------------------------------------------------- |
147+
| `FLECHA_IZQ` | Ir a la celda de la izquierda |
148+
| `FLECHA_DER` | Ir a la celda de la derecha |
149+
| `FLECHA_ARRIBA` | Ir a la celda superior |
150+
| `FLECHA_ABAJO` | Ir a la celda inferior |
151+
| `INICIO` | Ir a la primera celda de la vista |
152+
| `FIN` | Ir a la última celda de la vista |
153+
| `PAGINA_ARRIBA` | Ir a la misma celda en el periodo anterior de tiempo |
154+
| `PAGINA_ABAJO` | Ir a la misma celda en el periodo siguiente de tiempo |
155+
| `ENTRAR` o `ESPACIO` | Seleccionar la celda actual |
151156

152157
## Capturas de pantalla
153158

@@ -183,15 +188,15 @@ Si la hora es igual a minView, la fecha se configurará al inicio de la hora del
183188

184189
![Datetimepicker vista de minutos](./screenshots/minute.png)
185190
Esta vista permite al usuario seleccionar una hora específica del dia en la hora seleccionada.
186-
De manera predeterminada el tiempo es visualizado en incrementos de 5 minutos, la propiedad <code>minuteStep</code> controla los incrementos del tiempo visualizado.
191+
De manera predeterminada el tiempo es visualizado en incrementos de 5 minutos, la propiedad <code>minuteStep</code> controla los incrementos del tiempo visualizado.
187192
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.
188-
189193

190194
## Contribuir
191195

192196
Ver [Contributing.md](.github/contributing.md)
193197

194198
### Pruebas
199+
195200
Este componente fué realizado utilizando TDD y todas las mejoras y cambios tiene tests.
196201

197202
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:
@@ -200,6 +205,7 @@ Utilizamos karma y jshint para así garantizar la calidad del código. La manera
200205
npm install
201206
npm test
202207
```
208+
203209
Karma tratará de abrir Chrome como navegador con el cual se correrán los tests.
204210
Asegúrate de que chrome esté instalado o cambia la configuración de navegador en karma.config.js
205211

@@ -209,27 +215,27 @@ angular-bootstrap-datetimepicker fué liberada con la licencia MIT y copyright 2
209215

210216
## Se te pide que:
211217

212-
* Mantengas la licencia y el aviso de copyright incluidos en los archivos CSS y Javascript de angular-bootstrap-datetimepicker cuanto utilices esta librería en tus proyectos.
218+
- Mantengas la licencia y el aviso de copyright incluidos en los archivos CSS y Javascript de angular-bootstrap-datetimepicker cuanto utilices esta librería en tus proyectos.
213219

214220
## Te permite:
215221

216-
* De manera libre descargar y usar angular-bootstrap-datetimepicker de manera completa o sus componentes para propósito personal, privado, de manera interna en una compañía o con fines comerciales.
217-
* Usar angular-bootstrap-datetimepicker en paquetes o distribuciones creados por ti.
218-
* Modificar el código fuente.
219-
* Acceder a una sublicencia para modificar y distribuir angular-bootstrap-datetimepicker a terceros no incluidos en la licencia.
222+
- De manera libre descargar y usar angular-bootstrap-datetimepicker de manera completa o sus componentes para propósito personal, privado, de manera interna en una compañía o con fines comerciales.
223+
- Usar angular-bootstrap-datetimepicker en paquetes o distribuciones creados por ti.
224+
- Modificar el código fuente.
225+
- Acceder a una sublicencia para modificar y distribuir angular-bootstrap-datetimepicker a terceros no incluidos en la licencia.
220226

221227
## Te prohibe:
222228

223-
* Responsabilizar a los autores y propietarios de las licencias por daños ya que se proporciona sin garantía angular-bootstrap-datetimepicker.
224-
* Responsabilizar a los creadores o titulares de derechos de autor de angular-bootstrap-datetimepicker.
225-
* Redistribuir algún componente de angular-bootstrap-datetimepicker sin la atribución adecuada.
226-
* Utilizar alguna marca o logo propiedad de Knight Rider Consulting, Inc. de alguna manera en la que se puede entender que Knight Rider Consulting, Inc. respalda tu distribución.
227-
* Utilizar alguna marca o logo propiedad de Knight Rider Consulting, Inc. de alguna manera en la que se pueda entender o deducir que tu creaste este software.
229+
- Responsabilizar a los autores y propietarios de las licencias por daños ya que se proporciona sin garantía angular-bootstrap-datetimepicker.
230+
- Responsabilizar a los creadores o titulares de derechos de autor de angular-bootstrap-datetimepicker.
231+
- Redistribuir algún componente de angular-bootstrap-datetimepicker sin la atribución adecuada.
232+
- Utilizar alguna marca o logo propiedad de Knight Rider Consulting, Inc. de alguna manera en la que se puede entender que Knight Rider Consulting, Inc. respalda tu distribución.
233+
- Utilizar alguna marca o logo propiedad de Knight Rider Consulting, Inc. de alguna manera en la que se pueda entender o deducir que tu creaste este software.
228234

229235
## No requiere el que tu:
230236

231-
* Incluyas el código fuente angular-bootstrap-datetimepicker o el de alguna modificación que tú le hayas hecho al código original, o en cualquier redistribución.
232-
* Envíes los cambios que hiciste a angular-bootstrap-datetimepicker al proyecto angular-bootstrap-datetimepicker (sin embargo, sugerencias o cambios son bienvenidos).
237+
- Incluyas el código fuente angular-bootstrap-datetimepicker o el de alguna modificación que tú le hayas hecho al código original, o en cualquier redistribución.
238+
- Envíes los cambios que hiciste a angular-bootstrap-datetimepicker al proyecto angular-bootstrap-datetimepicker (sin embargo, sugerencias o cambios son bienvenidos).
233239

234240
La licencia completa de angular-bootstrap-datetimepicker se encuentra [en el repositorio del proyecto](LICENSE) para más información.
235241

0 commit comments

Comments
 (0)