Getting Started with Kendo UI for Angular DateRange
The DateRange component is a container for holding start and end date inputs, and a date range popup.
Basic Usage
The following example demonstrates the DateRange in action.
@Component({
selector: 'my-app',
template: `
<div class="example-config">
Selected range: {{ range | json }}
</div>
<kendo-daterange>
<label>
<span class="label">Start</span>
<kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>
</label>
<label>
<span class="label">End</span>
<kendo-dateinput kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput>
</label>
</kendo-daterange>
`,
styles: [`
.label {
display: block;
font-weight: bold;
text-indent: 8px;
color: #656565;
}
`]
})
class AppComponent {
public range = { start: null, end: null };
}