不依赖于第三方库的日期时间选择器插件--Rome

最新推荐文章于 2025-06-06 16:31:04 发布

释雨

最新推荐文章于 2025-06-06 16:31:04 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： php 文章标签：日期时间选择器插件 jquery

本文链接：https://blog.youkuaiyun.com/smm188/article/details/52047612

php 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了在项目中遇到日期时间选择器冲突问题后，选用Rome插件进行实现的详细过程。包括Rome的下载、基本使用、样式修改（如增大单元格间距、更改背景色及显示语言为中文）以及最终效果展示。

一、学习背景：
由于项目中原有的 formValidator 验证插件，与新添加的基于jquery的各种日期时间插件，都产生冲突，无奈之下，只好另辟蹊径，这时，今天的主角Rome便登场了。

二、Rome的下载：
点击此处
下载下来的原始目录如下：
这里写图片描述
其中，只有dist目录下的rome.css 和 rome.js 文件是在开发中必须引入的。

三、实验：
新建个html文件，引入必须的rome.js 和 rome.css 实验一下，html代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>rome</title>
    <link href='rome.css' rel='stylesheet' type='text/css' />
</head>
<body>
日期：
<input id="period" />
</body>
<script src='rome.js'></script>
<script type="text/javascript">
    var moment = rome.moment;
    rome(period);
</script>
</html>

效果图：
这里写图片描述

四、改变样式：
由于网上能查到的Rome的手册和教程很少，为了达到改变外观的目的，所以，就采取了简单粗暴的最原始方法，更改插件源文件，
首当其冲的是rome.css，改动如下：

/添加原先没有的.rd-day-head样式，以加大单元格间距/
.rd-day-head{
padding:3px;
}
.rd-day-body {
cursor: pointer;
text-align: center;
/给日期单元格添加背景色/
background: #CDD8E4;
}

其次是rome.js ，改动如下：

//将月份显示由原来的英文改为中文：
//var defaultLocaleMonths = ‘January_February_March_April_May_June_July_August_September_October_November_December’.split(‘_’);
var defaultLocaleMonths = ‘一月二月三月四月五月六月七月八月九月十月十一月十二月’.split(‘‘);

// 将星期显示由英文改为中文：
// var defaultLocaleWeekdaysMin = ‘Su_Mo_Tu_We_Th_Fr_Sa’.split(‘_’);
var defaultLocaleWeekdaysMin = ‘日一二三四五六’.split(‘_’);

再次，html多添加一个选择框，改动如下：

<!doctype html>
<link href='rome.css' rel='stylesheet' type='text/css' />
<title>Rome</title>
<h1>有效期限：</h1>
    <input id="start">&nbsp;至&nbsp;
    <input id="end"/>  
<script src='rome.js'></script>
<script type="text/javascript">
    var moment = rome.moment;
    rome(start);
    rome(end);
</script>

改动后的效果图：
这里写图片描述