@farris/ui-datepicker NPM

Datepicker

This library was generated with Angular CLI version 7.2.0.

使用实例

html

<farris-datepicker
    [(ngModel)]="singleDate"
    [disabled]="opts.disabled"
    [readonly]="opts.readonly"
    [editable]="opts.editable"
    [locale]="opts.locale"
    [dateRange]="opts.dateRange"
    [showTime]="opts.showTime"
    [showType]="opts.showType"
    [dateFormat]="opts.dateFormat"
    [placeholder]="opts.placeholder"
    [maxDate]="opts.maxDate"
    [minDate]="opts.minDate"
    [dateRangeDatesDelimiter]="opts.dateRangeDatesDelimiter"
    [shortcuts]="opts.shortcuts"
></farris-datepicker>

配置项

Input

disabled

default: false
type: boolean

是否禁用该组件。

readonly

Default：false
type: boolean

是否只读。

editable

Default：true
type: boolean

是否只能选择数据，不可键入。

dateRange

Default：false
type: boolean

是否使用日期范围输入模式。

showTime

Default：false
type: boolean

是否使用时间输入框。

showType

Default：1
type: number
options: 'all': 1 | 'noDate': 2 | 'noDateAndMonth': 3 | 'selectWeek': 4

显示类型，默认显示全部；不显示日期，用于选择年月模式；不显示日期及月份，用于选择年模式；selectWeek 用于周选择。

locale

default: zh-cn
type: string
options: 'en' | 'ja' ...

本地化。

dateFormat

Default：yyyy-mm-dd
type: string

日期格式化，zh-cn 模式下默认为 yyyy-mm-dd 。

placeholder

Default：请选择
type: string

为空时显示的占位符。

maxDate

Default：{year: 9999,month: 12,day: 31 }
type: object

最大日期。

minDate

Default：{year: 1840,month: 1,day: 1 }
type: object

最小日期。

disableDateRangesBegin

Default：{year: 0,month: 0,day: 0}
type: object

禁用日期开始时间。

disableDateRangesEnd

Default：{year: 0,month: 0,day: 0}
type: object

禁用日期结束时间。

disableDates

Default：[]
type: array<object>

禁用的日期，例如{year: 2019,month: 1,day: 1 },{year: 2019,month: 1,day: 2 } 。

showWeekNumbers

Default：false
type: boolean

是否显示第几周。

dateRangeDatesDelimiter

Default：~
type: string

日期范围模式下 input 的显示分割符合。

shortcuts

Default：[]
type: array<object>

配置左侧 sidebar 快捷键。

示例：

;[
    {
        text: '今天',
        onClick(setTime) {
            setTime.emit(new Date())
        }
    },
    {
        text: '昨天到今天',
        onClick(setTime) {
            setTime.emit({
                begin: new Date(new Date().getTime() - 3600 * 1000 * 24),
                end: new Date()
            })
        }
    },
    {
        text: '一周前',
        onClick(setTime) {
            setTime.emit(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7))
        }
    }
]