ngx-datetime-picker
Date time picker that falls back to native HTML5 components on mobile
- 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
Live Demo
Usage
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)
CSS
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.
Development:
Work flow
-
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
Requirements
- angular-cli 1.0.0-beta.28.3 or higher
- node 6.9.0 or higher
Contributors
Josh Sommer | Brent Miller | Steven Farage | Marco Mantovani | Jojie Palahang | Sam Graber | Alejandro Cremades | Jeremy Quick |
Personal |