---
title: DatePicker 日期选择器
description: 用于选择某一具体日期或某一段日期区间。
isComponent: true
usage: { title: "", description: "" }
spline: message
author: swimly
---

## 基本用法

通过`mode`可设置日期选择的类型，可选：`date`，`year`，`month`，`week`，`quarter`，默认为：`date`

{{ base }}

## 显示时间选择

通过`enableTimePicker`设置可选择时间，进针对`date`类型的有效。

{{ timePicker }}

## 区间选择

通过`l-date-range-picker`可定义一个范围选择器，支持：`date`，`year`，`month`

{{ range }}

## 快捷标签

通过`presets`可设置快捷日期选择，还可通过`presetsPlacement`设置快捷项显示的位置，可选
：`top`，`right`，`bottom`，`left`，默认为：`bottom`。

> 提示：下面列举了常用的两种方式，其他类型的可根据下例稍作更改。

{{ presets }}

## 一周的开始

通过`firstDayOfWeek`可设置一周的开始是周几。

{{ startWeek }}

## 自定义图标

通过`prefixIcon`可自定义前面的图标，通过`suffixIcon`可定义后面的图标。

> 提示：前置图标暂不支持

{{ icon }}

## 日期选择面板

通过`l-date-picker-panel`定义日期选择面板，直接在页面中展示。

{{ panel }}

## 禁用

通过`disableDate`设置禁用某些日期。

{{ disabled }}
