Skip to content

Commit

Permalink
docs(datepicker): decompose Basic demo
Browse files Browse the repository at this point in the history
  • Loading branch information
svetoldo4444ka committed Feb 13, 2018
1 parent af7ba73 commit 24d9384
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 6 deletions.
15 changes: 13 additions & 2 deletions demo/src/app/components/+datepicker/datepicker-section.list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,22 @@ export const demoComponentContent: ContentSection[] = [
anchor: 'basic',
component: require('!!raw-loader?lang=typescript!./demos/basic/basic.ts'),
html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
description: `If you need to see a datepicker just add <code>bsDatepicker</code> property to the input`,
description: `
<p>Notable change is additional css for it <code> "/datepicker/bs-datepicker.css"</code> <br></p>
<p>There are two ways of adding css:</p>
<ul>
<li>Load it from CDN. Add <code>&lt;link rel="stylesheet"
href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css"&gt;</code> to your
<code>index.html</code></li>
<li>Load it from <code>node_modules/ngx-bootstrap/datepicker/bs-datepicker.css</code> via package bundler
like Angular CLI, if you're using one.
</li>
</ul>
`,
outlet: DemoDatepickerBasicComponent
},
{
title: 'Initial state of a date',
title: 'Initial state',
anchor: 'date-initial-state',
component: require('!!raw-loader?lang=typescript!./demos/date-initial-state/date-initial-state.ts'),
html: require('!!raw-loader?lang=markup!./demos/date-initial-state/date-initial-state.html'),
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<h4>bsValue property sets initial state in this example</h4>
<p>bsValue property sets initial state in this example</p>
<div class="row">
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text"
Expand All @@ -12,7 +12,7 @@ <h4>bsValue property sets initial state in this example</h4>
</div>
</div>

<h4>ngModel property sets two-way data binding in this example</h4>
<p>ngModel property sets two-way data binding in this example</p>
<div class="row">
<div class="col-xs-12 col-12 col-md-4 form-group">
<input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="bsRangeValue">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ import { Component } from '@angular/core';
templateUrl: './date-initial-state.html'
})
export class DemoDatepickerDateInitialStateComponent {
bsValue: Date = new Date();
bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
bsValue = new Date();
bsRangeValue: Date[];
maxDate = new Date();
constructor() {
this.maxDate.setDate(this.maxDate.getDate() + 7);
this.bsRangeValue = [this.bsValue, this.maxDate];
}
}

0 comments on commit 24d9384

Please sign in to comment.