Clash Royale CLAN TAG

Angular 5 material date picker

I need a functionality on Angular 5 date picker which provides option pick date based on daily, weekly, monthly, quarterly and yearly view. The following link is available for Angular 1.X versions.
https://material.angularjs.org/latest/demo/datepicker

I need a similar support for Angular 5. We have also explored the below option using jquery
enter code herehttp://jsfiddle.net/4mwk0d5L/1/ , but it would be better if the look and feel is like angular

enter code here

2 Answers
2

you can utilize this link..

This link has all types of date pickers you want ..
Click Here: https://embed.plnkr.co/nJyHfu/

You can use "ng2-daterangepicker".
Please refer below link
https://www.npmjs.com/package/ng2-daterangepicker
In the .html file, you can have following code

<div class="input-date-range-picker mx-3" daterangepicker [options]="{ opens: 'left' }"
(selected)="selectedDate($event, mainInput)">
<a> <i class="icon-calendar"></i>
{{ mainInput.start | date:'M/dd/y' }} - {{ mainInput.end| date:'M/dd/y' }}
</a>
</div>
(selected)="selectedDate($event, mainInput)" : will be the function call once you select the date.
mainInput : This is the default date selection parameter.

In .ts file add the following code.
import {DaterangePickerComponent, DaterangepickerConfig} from 'ng2-daterangepicker';

export class MyTestComponent implements OnInit {
mainInput = {
start: moment().subtract(1, 'month'),
end: moment()
};

constructor(private daterangepickerOptions: DaterangepickerConfig) {
this.daterangepickerOptions.settings = {
locale: {
format: 'YYYY-MM-DD'
},
alwaysShowCalendars: false,
ranges: {
'Last Month': [
moment().subtract(1, 'month'),
moment()
],
'Last 3 Months': [
moment().subtract(4, 'month'),
moment()
],
'Last 6 Months': [
moment().subtract(6, 'month'),
moment()
],
'Last 12 Months': [
moment().subtract(12, 'month'),
moment()
]
}
};


}
}

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.