Note
This project is no longer actively maintained.
We want to thank everyone for their contributions and hope we've helped you in your coding journey.
- No jQuery or other external dependencies
- Three separate components for Date Time, Date, and Time picker
- When being used on a mobile or touch devices, it falls back to HTML5 inputs of date, datetime-local, and time
Live demo can be found at https://renovosolutions.github.io/ngx-datetimepicker/.
Date time picker that falls back to native HTML5 components on mobile
Date formats are called at datePicker.component.ts - functions formattedDate() and mobileFormattedDate().
Time formats are called at timePicker.component.ts - functions formattedTime() and mobileFormattedTime().
DateTime formats are called at dateTimePicker.component.ts - functions formattedDate() and mobileFormattedDate().
Change these calls to a different format to get different results.
All formats are defined in date.service.ts.
import { DateTimePickerModule} from 'ngx-datetime-picker';
@NgModule({
imports: [
DateTimePickerModule
],<ngx-datetime-picker [(selectedDateTime)]="dateTimeExample"></ngx-datetime-picker>
<ngx-date-picker [(selectedDate)]="dateExample"></ngx-date-picker>
<ngx-time-picker [(selectedTime)]="timeExample"></ngx-time-picker>Additional options for each picker:
[disableButton]="false" (default)[disableInput]="false" (default)[disablePicker]="false" (default)[doNotCloseOnDateSet]="false" (default)
Additional options for ngx-date-picker and ngx-datetime-picker:
[min]="null" (default)[max]="null" (default)
Additional options for ngx-time-picker and ngx-datetime-picker:
[use24HourClock]="false" (default)
Compile ngx-datetime-picker.css from SCSS and copy into to your project.
If you are using angular-cli, the css can be added to your angular-cli.json:
"styles": [
"../node_modules/ngx-datetime-picker/ngx-datetime-picker.css"
]SCSS files available for quick customization. Override the defaults, compile, and include them in your project.
-
Clone repository to your machine.
-
Run
npm run setupto prepare the project. -
Live edit mode with
npm run serve. -
Run tests with watcher with
npm run test. -
Run tests without a watcher with
npm run test.once. -
Prepare for distribution with
npm run dist. (Note: you may need to also runtsc index.tsif you have updated the exported values) -
Test a demo project using the exported ngModule with
npm run demo. -
Sass files are compiled locally using Koala.
-
Set Koala to watch
date.component.scssand compile it tongx-datetimepicker > src > assetsasngx-datetime-picker.css. -
Optionally, you can use https://github.com/angular-buch/angular-cli-ghpages to publish the demo install to github pages. First run
npm run demo, then switch into your demo directory withcd demo. From there, you can copy and paste the two commands to publish to github pages:ng build --prod --aot --base-href "https://renovosolutions.github.io/ngx-datetimepicker/" ngh --repo=https://github.com/renovosolutions/ngx-datetimepicker.gitNote: this will publish to the
gh-pagesbranch and you wil need to authenticate again.
- angular-cli 12.2.16 or higher, known issues with version 13
- node 10 or higher
 |
 |
 |
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|---|---|
| Josh Sommer | Brent Miller | Benjamin Kuntz | Steven Farage | Marco Mantovani | Jojie Palahang | Sam Graber | Alejandro Cremades | Jeremy Quick |
| Personal |
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent