DateTimePicker:jQuery日期和时间插件

所属分类:输入-日期和时间

 435844  290  查看评论 (197)
DateTimePicker:jQuery日期和时间插件 ie兼容8

DateTimePicket jQuery 插件:使用此插件非强制性地将 datetimepicker、 datepicker 或 timepicker 下拉列表添加到您的窗体。

2016-04-19更新

使用方法

添加jquery、datetimepicker和datetimepicker.css到您的页面

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>

HTML

<input id="datetimepicker" type="text" >

Javascript

$('#datetimepicker').datetimepicker();

//加入参数    (网友: 石→石←石 加入编辑)

$.datetimepicker.setLocale('ch');//设置中文

=====以下代码由会员 create_time 提供=====

如果,遇见插件不起效,

<script>
   $('#datetimepicker').datetimepicker({lang:'ch'});
</script>

放在<body></body>元素里面,程序是从上往下执行,优先加载head元素中js,如果本来的js中有摸个函数跟你插件的函数相同,他就是直接跳过

<head>
  <script>
     $('#datetimepicker').datetimepicker({lang:'ch'});
  </script>
</head>

而不加载!

调整,数字的位置

.xdsoft_datetimepicker  .xdsoft_calendar td > div{
   padding-right:10px;
   padding-top: 5px
}

自定义选项:

$('#s').datetimepicker({
      lang:"ch", //语言选择中文 注:旧版本 新版方法:$.datetimepicker.setLocale('ch');
      format:"Y-m-d",      //格式化日期
      timepicker:false,    //关闭时间选项
      yearStart:2000,     //设置最小年份
      yearEnd:2050,        //设置最大年份
      todayButton:false    //关闭选择今天按钮
});

相关插件-日期和时间

Canvas时钟插件clock-canvas.js

使用html5中Canvas技术,绘制钟表表盘,表面大小支持自适应。
  日期和时间
 2942  21

SUI Mobile(日历)

sui组件日历
  日期和时间
 12398  26

带节假日设置的日历

带节假日设置的日历
  日期和时间
 24670  94

CSS3实现钟表UI

这是一款使用CSS3+JS 实现钟表的例子,UI是自己设计的
  日期和时间
 4470  26

讨论这个项目(197)回答他人问题或分享插件使用方法奖励jQ币

    -Web 0
    2017/3/10 9:47:01

    我这里显示没有DataFormater这个方法。。。求问大佬是什么问题

        绿格子黑衬衫0
        2017/3/15 10:40:09

        导build的full js

    回复
    Zcp1985 0
    2017/2/28 9:40:29

    我想日期和时间都显示 ,为什么只显示了日期,时间不显示呢

        Zcp19850
        2017/2/28 10:12:58

        找到原因了 ......

    回复
    ???????????? 1
    2017/2/9 14:03:18

    大家可以在website里面 找到相关的方法。  然后固定位置 可以用

    $('#datetimepicker').datetimepicker({
    	beforeShow : function(input, inst) {
    		var calendar = inst.dpDiv;
    		setTimeout(function() {
    			calendar.position({
    				my : 'left top',
    				at : 'left bottom',
    				of : input
    			});
    		}, 1);
    	}
    });
    回复
    破晓 1
    2017/2/9 11:38:57

    旧版本汉化使用$('#datetimepicker').datetimepicker({lang:'ch'});

    新版本汉化使用$.datetimepicker.setLocale('ch'); 回复
    - 0
    2017/1/24 17:08:18

    lang:"ch" 怎么汉化不了

        omg_lwf1
        2017/3/6 11:54:43

           lang:"ch", //语言选择中文 注:旧版本 新版方法:$.datetimepicker.setLocale('ch');

    回复
      0
    2017/1/12 18:01:36

    误差一分钟怎么解决啊,太坑了

    回复
    哦啦啦 0
    2017/1/10 11:01:51
    用div来代替,然后监听focus事件 将值同时赋给div和隐藏的input。或者将文本框设为只读( readonly="readonly"),这样可以阻止输入事件就不会跳出键盘,同时给文本框添加一个focus事件 回复
    countingstep 0
    2017/1/6 11:01:51

    不太会用,一点反应都没有,有没有demo

    回复
    托儿所所长 0
    2017/1/4 16:01:53

    相对齐全的api碰到的问题的可以看看

    http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm

    回复
    Summer 0
    2016/12/26 16:12:50

    window下使用,插件的弹出框在window下层,怎么解决啊

    回复
取消回复