- No jQuery or other external dependencies.
- 3 seperate 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
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)
Copy the ngx-datetime-picker css 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"
]
Sass files avaliable for quick customization. Override the defaults, compile, and include them in your project.
-
Clone repository to your machine.
-
Run
npm run setup
to 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 distrabution with
npm run dist
(note you man need to also runtsc index.ts
if 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.scss
and compile it tongx-datetimepicker > src > assets
asngx-datetime-picker.css
. -
Optionally you can use https://github.com/angular-buch/angular-cli-ghpages to publish the demo install to github pages. by first running
npm run demo
, then by going into your demo directory withcd demo
and from there you can copy and past the two commands to publish to github pages.ng build --prod --aot --base-href "https://renovosolutions.github.io/ngx-datetimepicker/"
then
ngh --repo=https://github.com/renovosolutions/ngx-datetimepicker.git
note this will publish to the
gh-pages
branch and you wil need to authenicate again
- angular-cli 12.2.16 or higher, known issues with version 13.
- node 10 or higher
Josh Sommer | Brent Miller | Steven Farage | Marco Mantovani | Jojie Palahang | Sam Graber | Alejandro Cremades | Jeremy Quick |
Personal |