您的位置：首页 > Web前端 > JavaScript

JS日期时间选择器

2014-12-26 12:53 411 查看


本文介绍一种日期和时间选择器的使用方法。此选择器由jqueryUI实现，支持精确到毫秒的时间选择。

此选择器项目地址为http://trentrichardson.com/examples/timepicker/

Demo地址为：http://www.helloweba.com/demo/timepicker/

下载地址：http://download.csdn.net/detail/yanwushu/7721933



效果图

另外关于js时间选择器还能够參考其它项目

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

/content/2573607.html


大体使用步骤


此控件使用很easy，仅仅须要引入js和css，然后在加上一句jquery代码就可以。


引入js库


<scripttype="text/javascript" src="../Commons/DateTimePicker/js/jquery-1.7.2.min.js"></script>

<scripttype="text/javascript"src="../Commons/DateTimePicker/js/jquery-ui.js"></script>

<scripttype="text/javascript"src="../Commons/DateTimePicker/js/jquery-ui-slide.min.js"></script>

<script type="text/javascript"src="../Commons/DateTimePicker/js/jquery-ui-timepicker-addon.js"></script>


引入样式


<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery-ui.js"></script>

<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>

除了引入jquery ui的样式外，还需额外增加下面样式，用于控制时间控件的外观。

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }

.ui-timepicker-div dl { text-align: left; }

.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }

.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }

.ui-timepicker-div td { font-size: 90%; }

.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui_tpicker_hour_label,.ui_tpicker_minute_label,.ui_tpicker_second_label,

.ui_tpicker_millisec_label,.ui_tpicker_time_label{padding-left:20px}


初始化控件


<input type="text" id="example" />

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

假设仅仅须要显示时间，则：

$('#example_2').timepicker();

定义时间格式：

$('#example_3').datetimepicker({

showSecond: true,

showMillisec: true,

timeFormat: 'hh:mm:ss:l'

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航