DateTimePicker：jQuery日期和时间插件

jQuery日期插件教程

最新推荐文章于 2021-06-14 12:24:00 发布

原创最新推荐文章于 2021-06-14 12:24:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

html&js&jquery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个基于jQuery的日期和时间选择插件的使用方法，包括如何在网页中引入插件资源、设置中文语言包及禁用时间选择等功能，帮助开发者快速实现日期选择功能。

jQuery日期和时间插件

链接

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link href="jquery.datetimepicker.css" rel="stylesheet" type="text/css" > <!--时间picker_css样式-->
        <script src="./jquery.datetimepicker.js"></script><!--时间picker_css  js样式-->
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    </head>
 
    <script type="text/javascript">
        function show_date_notime_ch(tmp) //tmp 为ID名称
        {
          var tmp = "#" + tmp;
          $(tmp).datetimepicker({
                  lang:'ch',//中文ch 英文en
                  timepicker:false              
          });   
        }
        
        /*
        $('#datetimepicker8').datetimepicker({
                onGenerate:function( ct )
                {
                    $(this).find('.xdsoft_date')
                        .toggleClass('xdsoft_disabled');
                },
                lang:"ch",           //语言选择中文
                minDate:'-1970/01/2',
                maxDate:'+1970/01/2',
                timepicker:false
        });
        */
    </script>

 
    <body>
        
        <h3>Time</h3>
        <input id="leo" type="text" > <script>show_date_notime_ch("leo"); //显示date</script>
     
    </body>
       

</html>



<!--
/*
$('#s').datetimepicker({
      lang:"ch",           //语言选择中文
      format:"Y-m-d",      //格式化日期
      timepicker:false,    //关闭时间选项
      yearStart：2000,     //设置最小年份
      yearEnd:2050,        //设置最大年份
      todayButton:false    //关闭选择今天按钮
});
-------------------------------------------------------
如果，遇见插件不起效，
<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
}
--------------------------------------------------------
*/
-->

详情见链接。

文件下载链接