Skip to content
This repository was archived by the owner on Mar 2, 2018. It is now read-only.

Commit ae5e3f2

Browse files
author
Antoine WEBER
committed
updated README to add outputs documentation
1 parent c5187cd commit ae5e3f2

File tree

1 file changed

+41
-30
lines changed

1 file changed

+41
-30
lines changed

README.md

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ AngularJS 2 DateTime Picker
3838
import { BrowserModule } from '@angular/platform-browser';
3939
import { AppComponent } from './app.component';
4040
import { Ng2DatetimePickerModule } from 'ng2-datetime-picker';
41-
41+
4242
@NgModule({
4343
imports: [BrowserModule, FormsModule, Ng2DatetimePickerModule],
4444
declarations: [AppComponent],
@@ -48,22 +48,22 @@ AngularJS 2 DateTime Picker
4848

4949
## Use it in your code
5050

51-
51+
5252
<input
5353
[(ngModel)]="myDate"
54-
ng2-datetime-picker
54+
ng2-datetime-picker
5555
date-only="true" />
5656

5757
<form [formGroup]="myForm">
58-
<input
58+
<input
5959
required
60-
[(ngModel)]='myVar'
61-
formControlName="date"
60+
[(ngModel)]='myVar'
61+
formControlName="date"
6262
ng2-datetime-picker
6363
date-only="true"/>
6464
</form>
65-
66-
<input
65+
66+
<input
6767
[(ngModel)]="date2" ng2-datetime-picker
6868
date-format="DD-MM-YYYY hh:mm"
6969
year="2014"
@@ -72,53 +72,53 @@ AngularJS 2 DateTime Picker
7272
hour="23"
7373
minute='59'
7474
close-on-select="false" />
75-
75+
7676
For full example, please check `test` directory to see the example of;
7777

7878
- `app.module.ts`
7979
- and `app.component.ts`.
8080

8181
## Override default style
8282

83-
The default style is written in `src/ng2-datetime-picker.component.ts`.
83+
The default style is written in `src/ng2-datetime-picker.component.ts`.
8484
This can be overwritten by giving a more detailed css selector.
85-
86-
e.g.,
85+
86+
e.g.,
8787

8888
#my-div .ng2-datetime-picker {
8989
background-color: blue;
9090
}
91-
91+
9292
## Override built-in date parser and date formatter
9393

9494
The default date parser and formatter can only handle 'YYYY-MM-DD HH:MM' format
95-
if you are not using [momentjs](http://momentjs.com/). If you use momentjs, you
95+
if you are not using [momentjs](http://momentjs.com/). If you use momentjs, you
9696
can use momentjs dateformat by adding the following in your html.
9797

9898
<script src="moment-with-locales.min.js"></script>
99-
99+
100100
If you are using moment and want to pass in a string date value in one format but display it in a different format
101101
you can use both date-format and parse-format:
102-
103-
<input
104-
[(ngModel)]="date"
102+
103+
<input
104+
[(ngModel)]="date"
105105
ng2-datetime-picker
106106
date-format="MM/DD/YYYY HH:mm"
107107
parse-format="YYYY-MM-DD HH:mm:ss" />
108108

109-
If you want to have your own date format without using momentjs,
109+
If you want to have your own date format without using momentjs,
110110
please override `Ng2DateTime.parser` and `Ng2DateTime.formatDate` function.
111-
For example,
111+
For example,
112112

113113
import { Ng2DatetimePickerModule, Ng2Datetime } from 'ng2-datetime-picker';
114114

115115
// Override Date object formatter
116-
Ng2Datetime.formatDate = (date: Date) : string => {
117-
..... my own function that returns a string ....
116+
Ng2Datetime.formatDate = (date: Date) : string => {
117+
..... my own function that returns a string ....
118118
};
119119

120120
// Override Date object parser
121-
Ng2Datetime.parseDate = (str: any): Date => {
121+
Ng2Datetime.parseDate = (str: any): Date => {
122122
.... my own function that returns a date ...
123123
} ;
124124

@@ -131,7 +131,7 @@ For example,
131131

132132
In addition, you can override other static variables of `Ng2Datetime` class. The following
133133
is the list of variables that you can override.
134-
134+
135135
* **days**: default: 1,2,....31
136136
* **daysOfWeek**: default: Sunday, Monday, .....
137137
* **weekends**: default: 0,6
@@ -144,7 +144,7 @@ is the list of variables that you can override.
144144

145145
This module is only improved and maintained by contributors like you;
146146

147-
As a contributor, it's NOT required to be skilled in Javascript nor Angular2.
147+
As a contributor, it's NOT required to be skilled in Javascript nor Angular2.
148148
It’s required to be open-minded and interested in helping others.
149149
You can contribute to the following;
150150

@@ -158,13 +158,13 @@ In result of your active contribution, you will be listed as a core contributor
158158
on https://ng2-ui.github.io, and a member of ng2-ui too.
159159

160160
If you are interested in becoming a contributor and/or a member of ng-ui,
161-
please send me email to `allenhwkim AT gmail.com` with your github id.
161+
please send me email to `allenhwkim AT gmail.com` with your github id.
162162

163-
## attributes
163+
## Attributes
164164
All options are optional except value
165165

166166
* **date-only**, true or false, default is false
167-
* **time-only**, true or false, default is false
167+
* **time-only**, true or false, default is false
168168
* **close-on-select**, true or false. indicates to close ng2-datetime-picker when select a date. default: true
169169
* **date-format**, momentjs date format, e.g. YYYY-MM-DD hh:mm:ss.
170170
You need to include `moment` js in your html to use date-format.
@@ -179,7 +179,18 @@ please send me email to `allenhwkim AT gmail.com` with your github id.
179179
* **min-hour** number, mininum selectable hour
180180
* **max-hour** number, maximum selectable hour
181181
* **disabled-dates** Array of Date, dates not selectable
182-
182+
183+
## Outputs of directive
184+
185+
* **ngModelChange**, triggered when the input value as changed (contains new input value)
186+
* **valueChanged**, triggered when a date modification is done (contains new date value)
187+
* **popupClosed**, triggered when the component is closed (contains a boolean true)
188+
189+
## Outputs of component
190+
191+
* **selected$**, triggered when a date modification is done (contains new date value)
192+
* **closing$**, triggered when the component is closed (contains a boolean true)
193+
183194
## For Developers
184195

185196
### To start
@@ -188,7 +199,7 @@ please send me email to `allenhwkim AT gmail.com` with your github id.
188199
$ cd ng2-datetime-picker
189200
$ npm install
190201
$ npm start
191-
202+
192203
### List of available npm tasks
193204

194205
* `npm run` : List all available tasks

0 commit comments

Comments
 (0)