数据采集r MDB Pro component

Datepicker-Bootstrap 5和Material Design 2.0表格

日期选择器是一个插件,它增加了选择时间的功能,而无需 使用自定义JavaScript代码。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子


内联版本


翻译

可以自定义选择器,以增加对国际化的支持。修改组件 添加翻译的选项。


格式

使用 format 选项以易于使用的格式显示日期。

格式化规则

以下规则可用于格式化任何日期:

Rule Description Result
d Date of the month 1 – 31
dd Date of the month with a leading zero 01 – 31
ddd Day of the week in short form Sun – Sat
dddd Day of the week in full form Sunday – Saturday
m Month of the year 1 – 12
mm Month of the year with a leading zero 01 – 12
mmm Month name in short form Jan – Dec
mmmm Month name in full form January – December
yy Year in short form * 00 – 99
yyyy Year in full form 2000 – 2999

日期限制

使用 min 和设置最小和最大可选日期 max 选项。


禁用日期

fitler 选项接受功能,您可以在其中指定日期条件 过滤。结果为true表示日期应为有效,结果为false 表示应禁用它。在下面的示例中,所有星期六和星期日将 被禁用。


输入切换

data-mdb-toggle =“ datepicker” 添加到输入元素以启用输入切换 点击。也可以将 toggleButton 选项设置为 false 删除切换按钮。


自定义切换图标

您可以通过将切换按钮模板添加到组件HTML来自定义切换图标。


辅助功能

我们向datepicker控件添加了适当的aria属性,以使组件可访问。 可以通过修改组件选项来更改这些属性的值:

数据采集r - API


用法

通过数据属性


        <div class="form-outline datepicker">
          <input type="text" class="form-control" id="exampleDatepicker1" />
          <label for="exampleDatepicker1" class="form-label">Select a date</label>
        </div>
      

通过JavaScript


        const options = {
          format: 'dd-mm-yyyy'
        }
        const myDatepicker = new mdb.Datepicker(document.getElementById('myDatepicker'), options)
      

选件

Name Type Default Description
cancelBtnLabel String 'Cancel selection' Changes cancel button aria label
cancelBtnText String 'Cancel' Changes cancel button text
clearBtnLabel String 'Clear selection' Changes clear button aria label
clearBtnText String 'Clear' Changes clear button text
format String 'dd/mm/yyyy' Changes date format displayed in input
inline Boolean false Changes datepicker display mode to inline (dropdown)
max Date - Changes max available date
min Date - Changes min available date
monthsFull Array [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ] Changes array of months full names
monthsShort Array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Changes array of months short names
okBtnLabel String 'Confirm selection' Changes ok button aria label
nextMonthLabel String 'Next month' Changes next button aria label in days view
nextMultiYearLabel String 'Next 24 years' Changes next button aria label in years view
nextYearLabel String 'Next year' Changes next button aria label in months view
okBtnText String 'Ok' Changes ok button text
prevMonthLabel String 'Previous month' Changes previous button aria label in days view
prevMultiYearLabel String 'Previous 24 years' Changes previous button aria label in years view
prevYearLabel String 'Previous year' Changes previous button aria label in months view
switchToDayViewLabel String 'Choose date' Changes view change button aria label in years view
switchToMonthViewLabel String 'Choose date' Changes view change button aria label in months view
switchToMultiYearViewLabel String 'Choose year and month' Changes view change button aria label in days view
startDate Date - Changes default date to which datepicker will navigate
startDay Number 0 Changes default start day (0 for Sunday, 1 for Monday...)
title String 'Select date' Changes datepicker title
weekdaysFull Array ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] Changes array of weekdays full names
weekdaysNarrow Array ['S', 'M', 'T', 'W', 'T', 'F', 'S'] Changes array of weekdays narrow names
weekdaysShort Array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Changes array of weekdays short names
view String 'days' Changes default datepicker view (days/years/months)

方法

Name Description Example
open Manually opens a datepicker myDatepicker.open()
close Manually closes a datepicker myDatepicker.close()
dispose Disposes a datepicker instance myDatepicker.dispose()

            const datepickerEl = document.getElementById('myDatepicker')
            const datepicker = new mdb.Datepicker(myModalEl)
            datepicker.open()
          

大事记

Name Description
open.mdb.datepicker This event fires immediately when the datepicker is opened.
close.mdb.datepicker This event fires immediately when the datepicker is closed.
dateChange.mdb.datepicker This event fires immediately when the new date is selected.

            const myDatepicker = document.getElementById('myDatepicker')
            myDatepicker.addEventListener('open.mdb.datepicker', (e) => {
              // do something...
            })
          

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


        import { Datepicker } from 'mdb-ui-kit';