@@ -38,7 +38,7 @@ AngularJS 2 DateTime Picker
38
38
import { BrowserModule } from '@angular/platform-browser';
39
39
import { AppComponent } from './app.component';
40
40
import { Ng2DatetimePickerModule } from 'ng2-datetime-picker';
41
-
41
+
42
42
@NgModule({
43
43
imports: [BrowserModule, FormsModule, Ng2DatetimePickerModule],
44
44
declarations: [AppComponent],
@@ -48,22 +48,22 @@ AngularJS 2 DateTime Picker
48
48
49
49
## Use it in your code
50
50
51
-
51
+
52
52
<input
53
53
[(ngModel)]="myDate"
54
- ng2-datetime-picker
54
+ ng2-datetime-picker
55
55
date-only="true" />
56
56
57
57
<form [formGroup]="myForm">
58
- <input
58
+ <input
59
59
required
60
- [(ngModel)]='myVar'
61
- formControlName="date"
60
+ [(ngModel)]='myVar'
61
+ formControlName="date"
62
62
ng2-datetime-picker
63
63
date-only="true"/>
64
64
</form>
65
-
66
- <input
65
+
66
+ <input
67
67
[(ngModel)]="date2" ng2-datetime-picker
68
68
date-format="DD-MM-YYYY hh:mm"
69
69
year="2014"
@@ -72,53 +72,53 @@ AngularJS 2 DateTime Picker
72
72
hour="23"
73
73
minute='59'
74
74
close-on-select="false" />
75
-
75
+
76
76
For full example, please check ` test ` directory to see the example of;
77
77
78
78
- ` app.module.ts `
79
79
- and ` app.component.ts ` .
80
80
81
81
## Override default style
82
82
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 ` .
84
84
This can be overwritten by giving a more detailed css selector.
85
-
86
- e.g.,
85
+
86
+ e.g.,
87
87
88
88
#my-div .ng2-datetime-picker {
89
89
background-color: blue;
90
90
}
91
-
91
+
92
92
## Override built-in date parser and date formatter
93
93
94
94
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
96
96
can use momentjs dateformat by adding the following in your html.
97
97
98
98
<script src="moment-with-locales.min.js"></script>
99
-
99
+
100
100
If you are using moment and want to pass in a string date value in one format but display it in a different format
101
101
you can use both date-format and parse-format:
102
-
103
- <input
104
- [ (ngModel)] ="date"
102
+
103
+ <input
104
+ [(ngModel)]="date"
105
105
ng2-datetime-picker
106
106
date-format="MM/DD/YYYY HH:mm"
107
107
parse-format="YYYY-MM-DD HH:mm:ss" />
108
108
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,
110
110
please override ` Ng2DateTime.parser ` and ` Ng2DateTime.formatDate ` function.
111
- For example,
111
+ For example,
112
112
113
113
import { Ng2DatetimePickerModule, Ng2Datetime } from 'ng2-datetime-picker';
114
114
115
115
// 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 ....
118
118
};
119
119
120
120
// Override Date object parser
121
- Ng2Datetime.parseDate = (str: any): Date => {
121
+ Ng2Datetime.parseDate = (str: any): Date => {
122
122
.... my own function that returns a date ...
123
123
} ;
124
124
@@ -131,7 +131,7 @@ For example,
131
131
132
132
In addition, you can override other static variables of ` Ng2Datetime ` class. The following
133
133
is the list of variables that you can override.
134
-
134
+
135
135
* ** days** : default: 1,2,....31
136
136
* ** daysOfWeek** : default: Sunday, Monday, .....
137
137
* ** weekends** : default: 0,6
@@ -144,7 +144,7 @@ is the list of variables that you can override.
144
144
145
145
This module is only improved and maintained by contributors like you;
146
146
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.
148
148
It’s required to be open-minded and interested in helping others.
149
149
You can contribute to the following;
150
150
@@ -158,13 +158,13 @@ In result of your active contribution, you will be listed as a core contributor
158
158
on https://ng2-ui.github.io , and a member of ng2-ui too.
159
159
160
160
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.
162
162
163
- ## attributes
163
+ ## Attributes
164
164
All options are optional except value
165
165
166
166
* ** 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
168
168
* ** close-on-select** , true or false. indicates to close ng2-datetime-picker when select a date. default: true
169
169
* ** date-format** , momentjs date format, e.g. YYYY-MM-DD hh:mm: ss .
170
170
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.
179
179
* ** min-hour** number, mininum selectable hour
180
180
* ** max-hour** number, maximum selectable hour
181
181
* ** 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
+
183
194
## For Developers
184
195
185
196
### To start
@@ -188,7 +199,7 @@ please send me email to `allenhwkim AT gmail.com` with your github id.
188
199
$ cd ng2-datetime-picker
189
200
$ npm install
190
201
$ npm start
191
-
202
+
192
203
### List of available npm tasks
193
204
194
205
* ` npm run ` : List all available tasks
0 commit comments