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

output

clear

清空内容时触发。

valueChanged

当内容改变触发。

onBlur

当 input 失去焦点触发。