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

Commit

Permalink
0.12.6
Browse files Browse the repository at this point in the history
  • Loading branch information
@allenhwkim
allenhwkim committed Jan 21, 2017
1 parent 313986d commit 8866459
Show file tree
Hide file tree
Showing 15 changed files with 249 additions and 148 deletions.
197 changes: 108 additions & 89 deletions app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,100 +12,118 @@ var templateStr = `
<div id="my-div">
<h1>Ng2 DateTime Picker Test</h1>
<ng2-utils-1>
<input [(ngModel)]="myDate0" />
<i class="fa fa-calendar"
ng2-datetime-picker
[default-value]="defaultValue"
(valueChanged)="myDate0=$event"></i>
</ng2-utils-1>
<pre>{{templateStr | htmlCode:'ng2-utils-1'}}</pre>
<fieldset><legend><h2>Open from a button</h2></legend>
<ng2-utils-1>
<input [(ngModel)]="myDate0" />
<i class="fa fa-calendar"
ng2-datetime-picker
[default-value]="defaultValue"
(valueChanged)="myDate0=$event"></i>
</ng2-utils-1>
<pre>{{templateStr | htmlCode:'ng2-utils-1'}}</pre>
</fieldset>
<hr/>
<ng2-utils-2>
<input
id="test1"
[(ngModel)]="myDate"
ng2-datetime-picker
[disabled-dates]="disabledDates"
[min-date]="minDate"
[max-date]="maxDate"
date-only="true"/>
myDate: {{myDate}}
</ng2-utils-2>
<pre>{{templateStr | htmlCode:'ng2-utils-2'}}</pre>
<hr/>
<ng2-utils-3>
<form [formGroup]="myForm">
<input
id="test2"
required
formControlName="date"
ng2-datetime-picker
close-on-select="false"/>
</form>
myForm.controls.date.value: {{myForm.controls.date.value}}
<br/>
myForm.value: {{myForm.value | json}}
<br/>
myForm.dirty: {{myForm.dirty}}
<br/>
myForm.controls.date.dirty: {{myForm.controls.date.dirty}}
<br/>
<a href="#" (click)="myForm.controls.date.patchValue('2015-06-30')">2015-06-30</a>
<a href="#" (click)="myForm.controls.date.patchValue('2015-07-19')">2015-07-19</a>
<a href="#" (click)="myForm.controls.date.patchValue('2015-12-31')">2015-12-31</a>
</ng2-utils-3>
<pre>{{templateStr | htmlCode:'ng2-utils-3'}}</pre>
<fieldset><legend><h2>min date, max date, disabled dates</h2></legend>
<ng2-utils-2>
<input
id="test1"
[(ngModel)]="myDate"
ng2-datetime-picker
[disabled-dates]="disabledDates"
[min-date]="minDate"
[max-date]="maxDate"
date-only="true"/>
myDate: {{myDate}}
</ng2-utils-2>
<pre>{{templateStr | htmlCode:'ng2-utils-2'}}</pre>
</fieldset>
<fieldset><legend><h2>Reactive form</h2></legend>
<ng2-utils-3>
<form [formGroup]="myForm">
<input
id="test2"
required
formControlName="date"
ng2-datetime-picker
close-on-select="false"/>
</form>
myForm.controls.date.value: {{myForm.controls.date.value}}
<br/>myForm.value: {{myForm.value | json}}
<br/>myForm.dirty: {{myForm.dirty}}
<br/>myForm.controls.date.dirty: {{myForm.controls.date.dirty}}
<br/>
<a href="javascript:void()"
(click)="myForm.controls.date.patchValue('2015-06-30')">
2015-06-30
</a>
<a href="javascript:void()"
(click)="myForm.controls.date.patchValue('2015-07-19')">
2015-07-19
</a>
<a href="javascript:void()"
(click)="myForm.controls.date.patchValue('2015-12-31')">
2015-12-31
</a>
</ng2-utils-3>
<pre>{{templateStr | htmlCode:'ng2-utils-3'}}</pre>
</fieldset>
<hr/>
<ng2-utils-4>
<input [(ngModel)]="date" ng2-datetime-picker
id="test3"
date-format="DD-MM-YYYY hh:mm"
time-only="true"
minute-step="5"
close-on-select="false" />
</ng2-utils-4>
<pre>{{templateStr | htmlCode:'ng2-utils-4'}}</pre>
<fieldset><legend><h2>time only</h2></legend>
<ng2-utils-4>
<input [(ngModel)]="date" ng2-datetime-picker
id="test3"
date-format="DD-MM-YYYY hh:mm"
time-only="true"
minute-step="5"
close-on-select="false" />
</ng2-utils-4>
<pre>{{templateStr | htmlCode:'ng2-utils-4'}}</pre>
</fieldset>
<hr/>
<ng2-utils-5>
<input
id="test4"
[(ngModel)]="gmtDate"
ng2-datetime-picker
date-format="MM-DD-YYYY" />
gmtDate : "2015-01-01T00:00:00.000Z"
<br/>
<a href="#" (click)="gmtDate='2016-11-03T22:00:00Z'">Set date/time to: 2016-11-03T22:00:00Z</a>
</ng2-utils-5>
<pre>{{templateStr | htmlCode:'ng2-utils-5'}}</pre>
<fieldset><legend><h2>GMT date as string</h2></legend>
<ng2-utils-5>
<input
id="test4"
[(ngModel)]="gmtDate"
ng2-datetime-picker
date-format="MM-DD-YYYY" />
gmtDate : "2015-01-01T00:00:00.000Z"
<br/>
<a href="javascript:void()"
(click)="gmtDate='2016-11-03T22:00:00Z'">
Set date/time to: 2016-11-03T22:00:00Z
</a>
</ng2-utils-5>
<pre>{{templateStr | htmlCode:'ng2-utils-5'}}</pre>
</fieldset>
<hr/>
<ng2-utils-6>
<input
id="test6"
[(ngModel)]="dateWithTimezoneInfo"
ng2-datetime-picker
date-format="YYYY-MM-DD HH:mm Z" />
dateWithTimezoneInfo: {{dateWithTimezoneInfo}}
<br/>
</ng2-utils-6>
<pre>{{templateStr | htmlCode:'ng2-utils-6'}}</pre>
<fieldset><legend><h2>with timezone</h2></legend>
<ng2-utils-6>
<input
id="test6"
[(ngModel)]="dateWithTimezoneInfo"
ng2-datetime-picker
date-format="YYYY-MM-DD HH:mm Z" />
dateWithTimezoneInfo: {{dateWithTimezoneInfo}}
<br/>
</ng2-utils-6>
<pre>{{templateStr | htmlCode:'ng2-utils-6'}}</pre>
</fieldset>
<ng2-utils-7>
<input
id="test7"
[(ngModel)]="dateWithTime"
ng2-datetime-picker
date-format="MM/DD/YYYY HH:mm z"
parse-format="YYYY-MM-DDTHH:mm:ss"/>
dateWithTime: {{dateWithTime}}
<br/>
</ng2-utils-7>
<pre>{{templateStr | htmlCode:'ng2-utils-7'}}</pre>
<fieldset><legend><h2>parse-format</h2></legend>
<ng2-utils-7>
<input
id="test7"
[(ngModel)]="dateWithTime"
ng2-datetime-picker
date-format="MM/DD/YYYY HH:mm z"
parse-format="YYYY-MM-DDTHH:mm:ss"/>
dateWithTime: {{dateWithTime}}
<br/>
</ng2-utils-7>
<pre>{{templateStr | htmlCode:'ng2-utils-7'}}</pre>
</fieldset>
</div>
`;
Expand All @@ -119,6 +137,7 @@ var templateStr = `
div { font-family: Courier; font-size: 13px}
input { min-width: 200px; font-size: 15px; }
input.ng-dirty { background: #ddd; }
fieldset {display: inline-block; vertical-align: top; margin: 10px; padding: 20px }
`]
})
export class AppComponent {
Expand Down
58 changes: 29 additions & 29 deletions app/build/app.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/build/app.js.map
View file

Large diffs are not rendered by default.

31 changes: 27 additions & 4 deletions dist/ng2-datetime-picker.component.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 8866459

Please sign in to comment.