好的插件,应当被记录,那怕他不再流行!

Bootstrap.datetimepicker.js 已封装

H-ui.js 中已封装,无需单独下载。单独下载地址 bootstrap-datetimepicker.js

Bootstrap.datetimepicker.js是一款时间插件。本站提供的已加入(年月日时分秒星期)中文语言,原版的只有英文语言。

使用方法

1、Bootstrap.datetimepicker.js 依赖jQuery或者zepto.js。

js调用

最简单用法

$("#datetimepicker-demo-1").datetimepicker();

只显示年月日

$("#datetimepicker-demo-2").datetimepicker({
  format: "yyyy-mm-dd",
  minView: "month",
  autoclose: true
});

显示年月日时分秒

$("#datetimepicker-demo-3").datetimepicker({
  format: "yyyy-mm-dd hh:ii:ss",
  autoclose: true
});

显示中文

$("#datetimepicker-demo-4").datetimepicker({
  language: "zh-cn",
  autoclose: true
});

设置默认日期

只需要给input 添加 value值即可。

$("#datetimepicker-demo-5").datetimepicker({
  language: "zh-cn",
  format: "yyyy-mm-dd hh:ii",
  autoclose: true
});

input禁用键盘输入

只需要给input 添加 readonly属性即可。

$("#datetimepicker-demo-6").datetimepicker({
  language: "zh-cn",
  format: "yyyy-mm-dd hh:ii",
  autoclose: true
});

显示今天按钮

$("#datetimepicker-demo-7").datetimepicker({
  language: "zh-cn",
  format: "yyyy-mm-dd",
  minView: "month",
  autoclose: true,
  todayBtn: true
});

日期范围设置,开始与结束

-

$("#datetimepicker-startTime").datetimepicker({
  language:  'zh-cn',
  format: 'yyyy-mm-dd',
  minView: "month",
  todayBtn:  true,
  autoclose: true,
  endDate : new Date(),
}).on('changeDate', function(event) {
  event.preventDefault();
  event.stopPropagation();
  var startTime = event.date;
  $('#datetimepicker-endTime').datetimepicker('setStartDate',startTime);
});
$("#datetimepicker-endTime").datetimepicker({
  language:  'zh-cn',
  format: 'yyyy-mm-dd',
  minView: "month",
  todayBtn:  1,
  autoclose: 1,
  endDate : new Date(),
}).on('changeDate', function(event) {
  event.preventDefault();
  event.stopPropagation();
  var endTime = event.date;
  $("#datetimepicker-startTime").datetimepicker('setEndDate',endTime);
});

相关参数

属性 默认值 描述 备注
format mm/dd/yyyy 日期格式

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

多种组合搭配,满足不同需求。

  • yyyy-mm-dd
  • yyyy-mm-dd hh:ii
  • yyyy-mm-ddThh:ii
  • yyyy-mm-dd hh:ii:ss
  • yyyy-mm-ddThh:ii:ssZ
weekStart 0 一周从哪一天开始 0(星期日)到6(星期六)
startDate 开始时间 可以选择的最早日期,将禁用所有较早日期。
endDate 结束时间 可以选择的最晚日期,所有较迟的日期都将被禁用。
daysOfWeekDisabled [] 每周禁用一天。
autoclose false 当选择一个日期之后是否立即关闭此日期时间选择器。
startView 2 日期时间选择器打开之后首先显示的视图 0 小时 | 1 天 | 2 月 | 3 年 | 4 十年
minView 0 日期时间选择器所能够提供的最精确的时间选择视图。 0 小时 | 1 天 | 2 月 | 3 年 | 4 十年
maxView 4 日期时间选择器最高能展示的选择范围视图。 0 小时 | 1 天 | 2 月 | 3 年 | 4 十年
todayBtn false 是否显示当前日期(今天)按钮。
todayHighlight false 是否高亮当前日期。
keyboardNavigation true 是否启用键盘方向键选择改变日期。
language en 语言 "zh-cn" 中文 | "en" 英文
forceParse true 强制解析。 当选择器关闭的时候,是否强制解析输入框中的值。也就是说,当用户在输入框中输入了不正确的日期,选择器将会尽量解析输入的值,并将解析后的正确值按照给定的格式format设置到输入框中。
minuteStep 5 分钟选择视图,每5分钟一个间隔选择。 只有minView设置 支持分钟,才能看到。
pickerReferer default 没有特殊要求,无序设置。
pickerPosition bottom-right 时间选择器窗口的位置。 "bottom-left" 左下 | "bottom-right" 右下 | "top-left" 左上 | "top-right" 左下
viewSelect 取 minView 的值 视图选择。 "decade" | "year" | "month" | "day" | "hour"
showMeridian false 是否为日视图和小时视图启用子午线视图。
initialDate new Date() 初始日期。 默认是现在,您可以指定昨天或今天……

微信扫码打赏

觉得不好,您千万别打赏,退不了费的!