Question

我需要Angular 5日期选择器上的功能，它根据每日，每周，每月，每季度和每年视图提供选项选择日期。以下链接适用于Angular 1.X版本。 https://material.angularjs.org/latest/demo/datepicker

我需要对Angular 5提供类似的支持。我们还使用jquery探索了以下选项 enter code here http://jsfiddle.net/4mwk0d5L/1/，但如果外观像角度

会更好

Answer 1

您可以利用此链接。

此链接包含您想要的所有类型的日期选择器。 Click Here: https://embed.plnkr.co/nJyHfu/

Answer 2

您可以使用“ ng2-daterangepicker”。

请参考下面的链接

https://www.npmjs.com/package/ng2-daterangepicker

在.html文件中，您可以具有以下代码

<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）”：选择日期后将成为函数调用。 mainInput：这是默认的日期选择参数。

在.ts文件中，添加以下代码。

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()
                ]
            }
        };
    }
}

Answer 3

我用过kekeh / mydatepicker，您可以在下一个URL中下载它；

https://github.com/kekeh/mydatepicker

在.html文件中：

<div>
    <my-date-picker style="display:inline-block;" initialDate="null" 
    formControlName="date" locale="es" [options]="optionsDate"></my-date-picker>
</div>

.ts文件：

import { IMyDpOptions, IMyDateModel, IMyDate, MyDatePicker } from 'mydatepicker';

// some stuff

export class.... {
    optionsDate: IMyDpOptions = {
        inline: false,
        disableUntil: { year: 0, month: 0, day: 0 },
        disableDays: [{ year: 0, month: 0, day: 0 }],
        dateFormat: 'dd/mm/yyyy',
        showWeekNumbers: false,
        selectorHeight: '232px',
        selectorWidth: '252px'
    };
}

Angular 5材料日期选择器

3 个答案: