最近用了日历时间控件，搜遍Google、百度发现基于JQ的这款datepicker日历时间控件挺不错的。于是整理些效果，以供有需者参考。

废话不多说，有图有真相：

看了真相后，我们来看看是如何实现？

datepicker是一款基于JQ的插件，所以在调用前需要载入jq、jq-ui、jq-ui的css三个文件。

载入文件如下：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

调用代码如下：

$("#date1").datetimepicker();

由于这些是老外开发的所以看到的效果只是英文日历，如下图：

此刻，我们需要将他汉化，汉化代码如下：

jQuery(function($) {
  $.datepicker.regional['zh-CN'] = {
    closeText: '关闭',
    prevText: '<上月',
    nextText: '下月>',
    currentText: '今天',
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',
     '十月', '十一月', '十二月'],
    monthNamesShort: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一',
     '十二'],
    dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
    dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
    weekHeader: '周',
    dateFormat: 'yy-mm-dd',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: '年'
  };
  $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});

于是，汉化后的效果如下：

于是，你肯定会问为啥和第一张效果不一样，因为第一张是把日历和时间结合起来了，现在我们也增加时间这段插件代码，就需要载入以下文件：

<script src="http://www.ihese.com/doc/rili/jquery-ui-timepicker-addon.js"></script>

载入前我们还需要添加一些CSS样式，如下：

.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}

此时，再次调用！代码如下：

$("#date1").datetimepicker();

效果就和第一张图的效果一致了。不信，你可以试试！如有问题欢迎留言，一起探讨，一起学习~

通过配置可实现更多效果：【点击查看datepicker更多效果】