时间选择器 MDB Pro component

Timepicker-Bootstrap 5和Material Design 2.0表格

Use MDB custom Timepicker component to select time.

Note: Read the API tab to find all available options and advanced customization


Basic example

MDB allows us to automatically initialize a Timepicker when the page is loaded. You have to have a class timepicker in your picker wrapper.


Inline Timepicker with 12h

MDB Timepicker allows you to use a inline version timepicker. Default version is with 12h.


Inline Timepicker with 24h

MDB Timepicker allows you to use a inline version timepicker. You have to add options format24 to true.


Custom Icon

You can set your custom icon to input. If you will add the icon, the main icon from the input will be replaced with yours. You have to add class timepicker-toggle-button to your element with data-mdb-toggle and timepicker-icon to your icon.

With button


With icon


Without icon

MDBTimepicker allows to set input without icon. You can set this with data-mdb-with-icon set to false or with the options withIcon set to false if you are initiate timepicker with js.


Default time

MDB Timepicker allows to initialize a default time in the picker and input. You can set it with option defaultTime. This options accepts strings like:

  • 12:34
  • 12:34 PM
  • 12:34 AM

and also new Date() format like:

  • new Date()
  • new Date().toLocaleTimeString([],{timeStyle: 'short'})

Note: If you are using string with PM/AM, you have to have option format24 set to false otherwise your default time will be formate to 24h. Also if you are using string without PM/AM and you would like have 24h format hour you have to set option format24 to true. If you will only put a string without PM/AM and format24 set to false you are gonna have a timepicker with 12h and format set to AM with default.


Handle input value

If you want handle input value on modal approve, you have to add custom event to selected picker.

Input value:

Format 24h

Timepicker allows you to use time format with 24 hours. You can set it with the JavaScript options or with data-mdb-timepicker-format24 and set it to true.


Just Input

You can set a timepicker to just an input.


Increment

You can set a increment value by 5 to a minutes.


Max time

You can max time to timepicker with options.


Max time with PM

You can max time to timepicker with options.


Max time with AM

You can max time to timepicker with options.


Min time

You can min time to timepicker with options.


Min time with PM

You can min time to timepicker with options.


Min time with AM

You can min time to timepicker with options.


Max/Min hours

You can max and min hour to timepicker with options.


Maximum hour

You can set only maximum hour to timepicker.


Minimum hour

You can set only minimum hour to timepicker.


Accessibility

We added proper aria attributes to the timepicker controls to make the component accessible. It's possible to change the values of those attributes by modyfing the component options:

时间选择器 - API


用法

通过数据属性或JavaScript,timepicker插件允许选择时间并显示时间 在选定的输出上。


通过类

通过输入将类 timpicer 添加到您选择的包装器中。自动设定 时间选择此元素。Timepicker将在此创建的动态图标切换 容器。


        <div class="form-outline timepicker">
          <input type="text" class="form-control" id="form1" />
          <label class="form-label" for="form1">Example label</label>
        </div>
      

通过数据属性

data-mdb-toggle =“ timepicker” 添加到输入或选定的元素,例如 button


        <div class="form-outline timepicker">
          <input type="text" class="form-control" id="form1" />
          <label class="form-label" for="form1" data-mdb-toggle="timepicker">Example label</label>
        </div>
      

通过JavaScript

通过JavaScript插件需要一个具有以下内容的类或ID包装器元素: timepicker 类。


        const myTimepicker = new mdb.Timepicker(document.getElementById('wrapper-id'), options)
      

选件

可以通过数据属性或JavaScript传递选项。对于数据属性,请附加 选项名称为 data-mdb-timepicker-,如 data-mdb-timepicker-format24

Name Type Default Description
appendValidationInfo boolean true

Allows to append div with information about invalid format

bodyID string ""

Allows to set Timepicker modal body ID.

cancelLabel string "Cancel"

Text of cancel button.

clearLabel string "Clear"

Text of clear button.

closeModalOnMinutesClick boolean true

Allows to close modal if minutes are selected.

closeOnClickClearBtn boolean false

Allows to close modal if clear button is pressed.

disabled boolean false

Set a disabled attribute to input in wrapper

enableValidation boolean true

Enables input validation

footerID string false

Allows to set Timepicker modal footer ID

format12 boolean true

Allows to use format 12h

format24 boolean false

Allows to use format 24h

headID string ""

Allows to set Timepicker modal head ID

increment boolean false

Allows to set increment minutes by 5

inline boolean false

Allows to use a inline version of timepicker

invalidLabel string "Invalid Time Format"

Allows to change a text in the invalid div

maxHour string | number ""

Allows to set max hour for picker

minHour string | number ""

Allows to set min hour for picker

modalID string ""

Allows to set Timepicker modal ID

okLabel string "Ok"

Allows to change a text inside submit button

overflowHidden boolean true

Allows to disable/enable a overflow hidden to body if modal is shown

pickerID string ""

Allows to set Timepicker picker ID

readOnly boolean false

Allows to set readonly property to input inside wrapper

showClearBtn boolean true

Allows to attach/remove clear button in modal.

switchHoursToMinutesOnClick boolean true

Allows to enable/disable switching to minutes if hours are selected

withicon boolean true

Allows to enable/disable append a icon to input

iconClass string 'fas fas fa-clock fa-sm timepicker-icon'

Allows to set custom classes to timepicker icon

pmLabel string 'PM'

Allows to set custom text to PM button

amLabel string 'AM'

Allows to set custom text to AM button


方法

Name Description Example
dispose Destroy timepicker with this method timepicker.dispose()

大事记

Name Description
input.mdb.timepicker 批准时间选择器模式并显示带有以下内容的当前元素时,将触发此事件 data-mdb-toggle。保存要输入的值时,可以将其用于获取值。