最新datetimepicker用法总结

首先简单的介绍一下官网上的,然后再看看 datetimepicker 中的影藏福利!

官网:

选项

format

String. 默认值: 'mm/dd/yyyy'

日期格式, p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。

weekStart

Integer. 默认值:0

一周从哪一天开始。0(星期日)到6(星期六)

startDate

Date. 默认值:开始时间

endDate

Date. 默认值:结束时间

daysOfWeekDisabled

String, Array. 默认值: '', [],用于设置一周中不可选取的时间(如星期六、星期日)

autoclose

Boolean. 默认值:false

当选择一个日期之后是否立即关闭此日期时间选择器。

startView

Number, String. 默认值:2, 'month'

日期时间选择器打开之后首先显示的视图。 可接受的值:

  • 0 or 'hour' for the hour view
  • 1 or 'day' for the day view
  • 2 or 'month' for month view (the default)
  • 3 or 'year' for the 12-month overview
  • 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.

minView

Number, String. 默认值:0, 'hour'

日期时间选择器所能够提供的最精确的时间选择视图。

maxView

Number, String. 默认值:4, 'decade'

日期时间选择器最高能展示的选择范围视图。

todayBtn

Boolean, "linked". 默认值: false

如果此值为true 或 "linked",则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话,"Today" 按钮仅仅将视图转到当天的日期,如果是"linked",当天日期将会被选中。

todayHighlight

Boolean. 默认值: false

如果为true, 高亮当前日期。

keyboardNavigation

Boolean. 默认值: true

是否允许通过方向键改变日期。

language

String. 默认值: 'en'

forceParse

Boolean. 默认值: true

当选择器关闭的时候,是否强制解析输入框中的值。也就是说,当用户在输入框中输入了不正确的日期,选择器将会尽量解析输入的值,并将解析后的正确值按照给定的格式format设置到输入框中。

minuteStep

Number. 默认值: 5

此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间(分钟)用于选择。

pickerReferer : 不建议使用

String. 默认值: 'default' (other value available : 'input')

The referer element to place the picker for the component implementation. If you want to place the picker just under the input field, just specify input.

pickerPosition

String. 默认值: 'bottom-right' (还支持 : 'bottom-left')

此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方。

viewSelect

Number or String. 默认值: same as minView (supported values are: 'decade', 'year', 'month', 'day', 'hour')

With this option you can select the view from which the date will be selected. By default it's the last one, however you can choose the first one, so at each click the date will be updated.

showMeridian

Boolean. 默认值: false

This option will enable meridian views for day and hour views.

initialDate

Date or String. 默认值: new Date()

You can initialize the viewer with a date. By default it's now, so you can specify yesterday or today at midnight ...


方法

.datetimepicker(options)

初始化日期时间选择器。

remove

参数: None

移除日期时间选择器。同时移除已经绑定的event、内部绑定的对象和HTML元素。

show

参数: None

显示日期时间选择器。

hide

参数: None

隐藏日期时间选择器。

update

参数: None

使用当前输入框中的值更新日期时间选择器。

setStartDate

参数:

  • startDate (String)

给日期时间选择器设置一个新的起始日期。

setEndDate

参数:

  • endDate (String)

给日期时间选择器设置结束日期。

setDaysOfWeekDisabled

参数:

  • daysOfWeekDisabled (String|Array)

Sets the days of week that should be disabled.


下面来看看影藏福利。

福利:

选项

container

String. 默认值: 'body'

绑定datetimepicker时间选择器的容器,默认是‘body’,可填写class、id等jquery选择。

formatType

String. 默认值: 'standard'

日期数据格式类型,有php、standard两种。

fontAwesome

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。

bootcssVer

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。

showMeridian

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。

title

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。

 

timezone

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。

formatViewType

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。

todayBtn

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。


clearBtn

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。

todayHighlight

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。


onRenderDay

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。


onRenderHour

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。


onRenderMinute

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。


onRenderYear

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。


onRenderMonth

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。


datesDisabled

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。


minutesDisabled

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。


hoursDisabled

String. 默认值: false

false表示默认图标(时间选择器中的箭头),可添加 fontAwesome 中的类名来添加样式。

























datetimepicker初始化是指在使用datetimepicker插件之前,需要进行一系列的设置和配置,以便正确地初始化日期时间选择器。在初始化datetimepicker时,可以使用以下几种方法和选项: 1. 使用initDateTimePicker函数进行初始化:可以通过调用initDateTimePicker函数,并传入相应的参数来初始化datetimepicker。例如,可以使用以下代码初始化datetimepicker: initDateTimePicker("#start-time-info", "#end-time-info"); 这将在具有id为"start-time-info"和"end-time-info"的元素上初始化datetimepicker插件。 2. 使用构造函数进行初始化:可以通过创建一个Date对象,并将其作为startDate选项的值传递给datetimepicker的构造函数来初始化datetimepicker。例如,可以使用以下代码初始化datetimepicker: var date = new Date(); $("#demo").datetimepicker({ startDate: date }); 这将初始化具有id为"demo"的元素上的datetimepicker插件,并设置起始日期为当前日期。 3. 使用weekStart选项进行初始化:可以使用weekStart选项来设置每周的起始日。默认情况下,起始日为0(星期日),可以通过将weekStart选项设置为0到6之间的整数来更改起始日。例如,可以使用以下代码初始化datetimepicker,并将起始日设置为星期三: $("#demo").datetimepicker({ weekStart: 3 }); 这将在具有id为"demo"的元素上初始化datetimepicker插件,并将每周的起始日设置为星期三(对应的数字为3)。 综上所述,datetimepicker的初始化可以通过调用initDateTimePicker函数、设置startDate选项或设置weekStart选项来实现。具体的初始化方法和选项可以根据具体需求进行调整和配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [jQuery datetimepicker初始化](https://blog.csdn.net/Samete9011/article/details/55505321)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Bootstrap中的datetimepicker用法总结](https://blog.csdn.net/hizzyzzh/article/details/51212867)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值