位置问题:

在bootstrap中用 datetimepicker 时默认是在输入框下面弹出的,

但是遇到输入框在屏幕最下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出。

可以在初始化时:

$('.form_date').datetimepicker({
language: 'zh-CN',
weekStart: ,
todayBtn: ,
autoclose: ,
todayHighlight: ,
startView: ,
minView: ,
forceParse: ,
pickerPosition:'top-right'
});
//用属性初始化
$(function () {

  //$('[data-provide="datetimepicker-inline"]').datetimepicker();  
  });
加上 pickerPosition:'top-right' 即可

具体官方有:http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm
$('#datetimepicker').datetimepicker({
value: '' // 设置当前datetimepicker的值
rtl: false, // false 默认显示方式 true timepicker和datepicker位置变换
format: 'Y/m/d H:i', // 设置时间年月日时分的格式 如: 2016/11/15 18:00
formatTime: 'H:i', // 设置时间时分的格式
formatDate: 'Y/m/d', // 设置时间年月日的格式
startDate: false, // new Date(), '1986/12/08', '-1970/01/05','-1970/01/05',
step: , // 设置时间时分的间隔
closeOnDateSelect: false, // true 设置datepicker可点击 false 设置datepicker不可点击 实际上可以双击
closeOnTimeSelect: true, // true 设置timepicker可点击 false 设置timepicker不可点击
closeOnWithoutClick: true, // true 设置点击input可以隐藏datetimepicker false 设置点击input不可以隐藏datetimepicker
closeOnInputClick: true, // true 设置点击input可以隐藏datetimepicker false 设置点击input不可以隐藏datetimepicker (会有闪动 先隐藏 再显示)
timepicker: true, // true 显示timepicker false 隐藏timepicker
datepicker: true, // true 显示datepicker false 隐藏datepicker
weeks: false, // true 显示周数 false 隐藏周数
defaultTime: false, // 如果输入值为空 可用来设置默认显示时间 use formatTime format (ex. '10:00' for formatTime: 'H:i')
defaultDate: false, // 如果输入值为空 可用来设置默认显示日期 use formatDate format (ex new Date() or '1986/12/08' or '-1970/01/05' or '-1970/01/05')
minDate: false, // 设置datepicker最小的限制日期 如:2016/08/15
maxDate: false, // 设置datepicker最大的限制日期 如:2016/11/15
minTime: false, // 设置timepicker最小的限制时间 如:08:00
maxTime: false, // 设置timepicker最大的限制时间 如:18:00
allowTimes: [], // 设置timepicker显示的时间 如:allowTimes:['09:00','11:00','12:00','21:00']
opened: false, // false默认打开datetimepicker可关闭 true打开datetimepicker后不可关闭
initTime: true, // 设置timepicker默认时间 如:08:00
inline: false, // ture设置datetimepicker一直显示
theme: '', // ture设置datetimepicker显示样式 如: 'dark'
withoutCopyright: true, // ture默认隐藏左下角'xdsoft.net'链接 false 显示左下角'xdsoft.net'链接
inverseButton: false, // false 默认 true datepicker的上一月和下一月功能互换 timepicker的上下可点击按钮功能互换
hours12: false, // true设置12小时格式 false设置24小时格式
next: 'xdsoft_next', // 设置datepicker上一月按钮的样式
prev : 'xdsoft_prev', // 设置datepicker下一月按钮的样式
dayOfWeekStart: , // 设置默认第-列为周几 如:0 周日 1 周一
parentID: 'body', // 设置父级选择器
timeHeightInTimePicker: , // 设置timepicker的行高
timepickerScrollbar: true, // ture设置timepicker显示滑动条 false设置timepicker不显示滑动条
todayButton: true, // ture显示今天按钮 false不显示今天按钮 位置在datepicker左上角
prevButton: true, // ture显示上一月按钮 false不显示上一月按钮 位置在datepicker左上角
nextButton: true, // ture显示下一月按钮 false不显示下一月按钮 位置在datepicker又上角
scrollMonth: true, // ture 设置datepicker的月份可以滑动 false设置datepicker的月份不可以滑动
lazyInit: false, // 翻译: 初始化插件发生只有当用户交互。大大加速插件与大量的领域的工作
mask: false, // 使用输入掩码。真正的-自动生成一个字段的“格式”的面具,从0到9的数字,设置为值的最高可能的数字。例如:第一个小时的数字不能大于2,而第一位数字不能大于5 如:{mask:'9999/19/39 29:59',format:'Y/m/d H:i'}
validateOnBlur: true, // 失去焦点时验证datetime值输入,。如果值是无效的datetime,然后插入当前日期时间值
yearStart: , // 设置最小的年份
yearEnd: , // 设置最大的年份
monthStart: , // 设置最小的月份
monthEnd: , // 设置最大的月份
roundTime: 'round', // 设置timepicker的计算方式 round四舍五入 ceil向上取整 floor向下取整
allowDateRe : null, // 设置正则表达式检查日期 如:{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }
disabledDates : [], // 设置不可点击的日期 如:disabledDates: ['21.11.2016','22.11.2016','23.11.2016','24.11.2016','25.11.2016','26.11.2016']
disabledWeekDays: [], // 设置不可点击的星期 如:disabledWeekDays:[0,3,4]
yearOffset: , // 设置偏移年份 如:2 代表当前年份加2 -2 代表当前年份减2
beforeShowDay: null, // 显示datetimepicker之前可调用的方法 {beforeShowDay:function(d) {console.log("bsd"); } }
enterLikeTab: true, // tab按键均可使datetimepicker关闭 true点击回车键可使datetimepicker关闭 false点击回车键不可使datetimepicker关闭
showApplyButton: false // 相当于确定按钮 true显示 false隐藏
});

参数配置详见:http://www.jianshu.com/p/663f2a86dd22

 

datetimepicker bootstrap的时间插件显示位置问题及其他配置的更多相关文章

  1. bootstrap datepicker时间插件显示位置不对

    bppystrap-datetimepicker.min.js中,修改如下:将原来的        if(!b(this.element)){l=l+document.body.scrollTop}改 ...

  2. Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。

    目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns    / ...

  3. 【bootstrap】使用支持bootstrap的时间插件daterangepicker

    其中的架包和代码,具体可以去GitHub下查看: https://github.com/AngelSXD/myagenorderdiscount 1.引入js和css <link href=&q ...

  4. bootstrap日期时间插件datetimepicker

    <!DOCTYPE HTML> 02 <html> 03   <head> 04     <link href="http://netdna.boo ...

  5. jQuery DateTimePicker 日期和时间插件

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 日期选择插件是一个配 ...

  6. 时间插件-daterangepicker

    一款基于bootstrap的时间插件daterangepicker,顾名思义,主要用于时间区间选择,也可做单个时间选择 demo.1汉化版的一个时间选择案例 <!DOCTYPE html> ...

  7. bootstrap时间插件 火狐不显示 完美解决方法

    原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...

  8. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  9. 【bootstrap】时间选择器datetimepicker和daterangepicker

    在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件:   需要的文件: <link rel= ...

随机推荐

  1. Python模块笔记

    __name__属性 一个模块被另一个程序第一次引入时,其主程序将运行.如果我们想在模块被引入时,模块中的某一程序块不执行,我们可以用__name__属性来使该程序块仅在该模块自身运行时执行. #!/ ...

  2. ubuntu 环境 celery配置全解

    继续尝试没有时间弄明白的技术. celery官方文档地址:http://docs.celeryproject.org/en/stable/getting-started/introduction.ht ...

  3. Delphi中的Sender:TObject对象解析

    Delphi中的Sender:TObject对象解析 procedure TForm1.Button1Click(Sender: TObject); begin end; 解析:Procedure是过 ...

  4. python 模块之-os

    python  os模块 import os os.getcwd()       # python脚本所在工作目录的路径 os.chdir(r'/tmp')        # 切换目录到tmp os. ...

  5. BZOJ1775[USACO 2009 Dec Gold 3.Video Game Troubles]——DP

    题目描述 输入 * 第1行: 两个由空格隔开的整数: N和V * 第2到第N+1行: 第i+1行表示第i种游戏平台的价格和可以在这种游戏平台上面运行的游 戏.包含: P_i, G_i还有G_i对由空格 ...

  6. IDEA如何刷新pom文件

    被新手问到了“IDEA如何刷新pom文件?”这个问题,想来这是一个不好意思问的常犯的错误吧. 在IDEA中,修改了pom.xml文件,添加了依赖以后,一般会弹出以下这个警告来. 点击[Import C ...

  7. MT【242】图像几何意义

    设函数$f(x)=x^2+ax+b$,已知函数$f(x)$在$[-1,1]$上存在零点,若$0\le b-2a\le 1$,求$b$的范围 (2015浙江文科高考20(2)) 分析:理解成$g(x)= ...

  8. MT【218】交点个数

    若函数$f(x)=x^3+ax^2+bx+c$有极值点$x_1,x_2$,且$f(x_1)=x_1$,则关于$x$的方程$3(f(x))^2+2af(x)+b=0$的不同实数根个数为_____ 注意到 ...

  9. 【 Gym - 101138D 】Strange Queries (莫队算法)

    BUPT2017 wintertraining(15) #4B Gym - 101138D 题意 a数组大小为n.(1 ≤ n ≤ 50 000) (1 ≤ q ≤ 50 000)(1 ≤ ai ≤  ...

  10. 洛谷P4768 [NOI2018]归程(可持久化并查集,最短路)

    闲话 一个蒟蒻,在网络同步赛上进行了这样的表演-- T2组合计数不会,T3字符串数据结构不会,于是爆肝T1 一开始以为整个地图都有车,然后写了2h+的树套树,终于发现样例过不去 然后写可持久化并查集D ...