datepicker日历时间控件的汉化和配置

返回 使用微信阅读
请用微信扫一扫
Jack

最近用了日历时间控件,搜遍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更多效果】

阅读数  77090