**Note**: This npm package is a fork of dalelotts/angular-bootstrap-datetimepicker, to provide an Ivy-compiled build of the current master branch. The fork was necessary because the official npm package did not release a new version with ivy support, yet.
npm install @philipab/angular-bootstrap-datetimepickernpm install angular-bootstrap-datetimepicker@4
npm install angular-bootstrap-datetimepicker@3
shell
npm install --save angular-bootstrap-datetimepicker bootstrap moment open-iconic
`
Then update ./src/app/app.module.ts to include the following:
`TypeScript
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { DlDateTimeDateModule, DlDateTimePickerModule } from 'angular-bootstrap-datetimepicker';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
DlDateTimeDateModule, // <--- Determines the data type of the model
DlDateTimePickerModule,
],
providers: [FormsModule],
bootstrap: [AppComponent]
})
export class AppModule { }
`
Next, add the following to ./src/app/app.component.html
`html
`
Next, add the following to ./src/styles.css
`css
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~open-iconic/font/css/open-iconic-bootstrap.css";
`
Note: This component uses open-iconic icons by default, but you can use any icon library
that supports styling with classes.
Finally, run npm start and you should see the date/time picker on http://localhost:4200/
By default, the date/time picker is as wide as it's container { width:100% }.
It uses bootstrap's flex row and col classes to layout the date/time picker into rows and columns.
If the parent container is too narrow (less than 340px in english), the row and column layout may wrap in ways that are not attractive.
Other languages/locals may require a wider container to fit the contents.
Configuration
Use the automated configuration generator (please let me know if it does not work for your use case!),
or see https://dalelotts.github.io/angular-bootstrap-datetimepicker/
for the automatically generated documentation.
$3
The first day of the week is determined by moment's i18n settings.
For example, setting the locale to 'fr' will cause Monday to be the first day of the week.
$3
The format of hours and minutes is also determined by moment's i18n settings.
hours are displayed using ll as the format.
minutes are displayed using lll as the format.
I recommend you use the default locale settings from Moment (if they are incorrect, submit a PR to moment to correct the settings)
If for some reason the default Moment settings will not work, you can customize the existing locale or create a custom locale with the desired formats.
Documentation
You can generate the documentation by running npm run documentation
or see https://dalelotts.github.io/angular-bootstrap-datetimepicker/
Accessibility
The DlDateTimePickerComponent component adds aria-label attributes to the left, right, and up buttons
in addition to all calendar cells where the text of the cell may not fully describe the value.
$3
The DlDateTimePickerComponent component supports the following keyboard shortcuts in all views:
| Shortcut | Action |
| ------------------ | ----------------------------------------------- |
| LEFT_ARROW | Go to the cell to the left |
| RIGHT_ARROW | Go to the cell to the right |
| UP_ARROW | Go to the cell above |
| DOWN_ARROW | Go to the cell below |
| HOME | Go to the first cell in the view |
| END | Go to the last cell in the view |
| PAGE_UP | Go to the same cell in the previous time period |
| PAGE_DOWN | Go to the same cell in the next time period |
| ENTER or SPACE | Select current cell |
Screen shots
$3
!Datetimepicker year view
This view allows the user to select the year for the target date.
If the year view is the minView, the date will be set to midnight on the first day of the year
$3
!Datetimepicker month view
This view allows the user to select the month in the selected year.
If the month view is the minView, the date will be set to midnight on the first day of the month.
$3
!Datetimepicker day view
This view allows the user to select the the day of the month, in the selected month.
If the day view is the minView, the date will be set to midnight on the day selected.
$3
!Datetimepicker hour view
This view allows the user to select the hour of the day, on the selected day.
If the hour view is the minView, the date will be set to the beginning of the hour on the day selected.
$3
!Datetimepicker minute view
This view allows the user to select a specific time of day, in the selected hour.
By default, the time is displayed in 5 minute increments. The minuteStep property controls the increments of time displayed.
If the minute view is the minView, which is is by default, the date will be set to the beginning of the hour on the day selected.
Contributing
See Contributing.md
$3
This component was written using TDD and all enhancements and changes have related tests.
We use karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use gulp:
`shell
npm install
npm test
``