This project has been archived because of inactivity of the owner, Allen Kim. The current owner is looking for a new owner and ready to transfer ownership. Please send me the email to "allenhwkim AT gmail.com" to claim the ownership.
Plunker Example
French Example
toString
function of selected date for formatting.install datetime-picker
$ npm install @ngui/datetime-picker --save
If you are using SystemJS, add map
and packages
to your systemjs.config.js
map[‘@ngui/datetime-picker'] = 'node_modules/@ngui/datetime-picker/dist';
packages[‘@ngui/datetime-picker'] = { main: '@ngui/datetime-picker.umd.js', defaultExtension: 'js’ }
import NguiDatetimePickerModule to your AppModule
import { NgModule } from '@angular/core';
import { FormsModule } from "@angular/forms";
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NguiDatetimePickerModule } from '@ngui/datetime-picker';
@NgModule({
imports: [BrowserModule, FormsModule, NguiDatetimePickerModule],
declarations: [AppComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
<input
[(ngModel)]="myDate"
ngui-datetime-picker
date-only="true" />
<form [formGroup]="myForm">
<input
required
[(ngModel)]='myVar'
formControlName="date"
ngui-datetime-picker
date-only="true"/>
</form>
<input
[(ngModel)]="date2" ngui-datetime-picker
date-format="DD-MM-YYYY hh:mm"
year="2014"
month="12"
day="31"
hour="23"
minute='59'
[close-on-select]="false" />
For full example, please check test
directory to see the example of;
app.module.ts
app.component.ts
.The default style is written in src/ngui-datetime-picker.component.ts
.
This can be overwritten by giving a more detailed css selector.
e.g.,
#my-div .ngui-datetime-picker {
background-color: blue;
}
The default date parser and formatter can only handle 'YYYY-MM-DD HH:MM' format if you are not using momentjs. If you use momentjs, you can use momentjs dateformat by adding the following in your html.
<script src="https://github.com/ng2-ui/datetime-picker/raw/master/moment-with-locales.min.js"></script>
If you are using moment and want to pass in a string date value in one format but display it in a different format you can use both date-format and parse-format:
<input
[(ngModel)]="date"
ngui-datetime-picker
date-format="MM/DD/YYYY HH:mm"
parse-format="YYYY-MM-DD HH:mm:ss" />
If you want to have your own date format without using momentjs,
please override NguiDateTime.parser
and NguiDateTime.formatDate
function.
For example,
import { NguiDatetimePickerModule, NguiDatetime } from '@ngui/datetime-picker';
// Override Date object formatter
NguiDatetime.formatDate = (date: Date) : string => {
..... my own function that returns a string ....
};
// Override Date object parser
NguiDatetime.parseDate = (str: any): Date => {
.... my own function that returns a date ...
} ;
@NgModule({
imports: [BrowserModule, FormsModule, NguiDatetimePickerModule],
declarations: [AppComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
In addition, you can override other static variables of NguiDatetime
class. The following
is the list of variables that you can override.
This module is only improved and maintained by contributors like you;
As a contributor, it's NOT required to be skilled in Javascript nor Angular2. It’s required to be open-minded and interested in helping others. You can contribute to the following;
In result of your active contribution, you will be listed as a core contributor on https://ng2-ui.github.io, and a member of ng2-ui too.
If you are interested in becoming a contributor and/or a member of ng-ui,
please send me email to allenhwkim AT gmail.com
with your github id.
All options are optional except value
moment
js in your html to use date-format.
<script src="https://github.com/ng2-ui/datetime-picker/raw/master/moment.min.js"></script>
moment
js in your html to use parse-format.
<script src="https://github.com/ng2-ui/datetime-picker/raw/master/moment.min.js"></script>
$ git clone https://github.com/ng2-ui/datetime-picker.git
$ cd datetime-picker
$ npm install
$ npm start
npm run
: List all available tasksnpm start
: Run app
directory for development using webpack-dev-server
with port 9001npm run clean
: Remove dist foldernpm run clean:dist
: Clean up unnecessary dist folder within dist and app directorynpm run lint
: Lint TypeScript codenpm run build:ngc
: build ES modulenpm run build:umd
: Build UMD module ng2-map.umd.js
npm run build:app
: Build app/build/app.js
for runnable examplesnpm run build
: Build all(build:ngc, build:umc, build:app, and clean:dist)