没有jquery！原生js可定制的跨浏览器日期时间选择器插件Rome

Rome是一款纯js可定制的跨浏览器日期时间选择器插件。该日期时间选择器不依赖于jQuery,但它依赖于moment.js。浏览器支持IE7+。可以通过CSS文件来自定义该日期时间选择器的外观样式。这里可以查看演示。

安装

可以通过Bower或nmp来安装该日期时间选择器插件。

npm install --save rome
bower install --save rome

require('rome')使用。

使用方法

你也可以使用自定义版本的moment.js文件，配合使用rome.standalone.js。

<script src='moment.js'></script>
<script src='rome.standalone.js'></script>

你也可以直接使用rome.js文件，它里面包含了moment.js文件。

<script src='rome.js'></script>

如果你想了解moment的国际化的信息，可以查看这里。

 API

rome的API中有一些可以使用的公共方法。

rome.find(elem)

返回关联elem的日期时间对象，或返回null。DOM元素只能有一个关联的日期时间对象。

rome(elem, options={})  

这个方法创建一个日期对象实例，并使用elem元素来关联它。这个关联对象不能使用.destroy()方法销毁。在后面调用rome(elem)方法将调用这个关联对象，而不是创建一个新的实例。

 可用参数

默认参数

{

  "appendTo": document.body,

  "autoClose": true,

  "autoHideOnBlur": true,

  "autoHideOnClick": true,

  "date": true,

  "dateValidator": Function.prototype,

  "dayFormat": "DD",

  "initialValue": null,

  "inputFormat": "YYYY-MM-DD HH:mm",

  "invalidate": true,

  "max": null,

  "min": null,

  "monthFormat": "MMMM YYYY",

  "monthsInCalendar": 1,

  "required": false,

  "strictParse": false,

  "styles": {

    "back": "rd-back",

    "container": "rd-container",

    "date": "rd-date",

    "dayBody": "rd-days-body",

    "dayBodyElem": "rd-day-body",

    "dayConcealed": "rd-day-concealed",

    "dayDisabled": "rd-day-disabled",

    "dayHead": "rd-days-head",

    "dayHeadElem": "rd-day-head",

    "dayRow": "rd-days-row",

    "dayTable": "rd-days",

    "month": "rd-month",

    "next": "rd-next",

    "positioned": "rd-container-attachment",

    "selectedDay": "rd-day-selected",

    "selectedTime": "rd-time-selected",

    "time": "rd-time",

    "timeList": "rd-time-list",

    "timeOption": "rd-time-option"

  },

  "time": true,

  "timeFormat": "HH:mm",

  "timeInterval": 1800,

  "timeValidator": Function.prototype,

  "weekdayFormat": "min",

  "weekStart": moment().weekday(0).day()

}   

方法

当你使用rome(elem)方法创建了日期时间选择器后，你将获得一个cal对象实例。下面是一些可用的方法，大部分方法返回都返回日期时间对象，使之可以链式编程。

• .show()：显示日期时间选择器。如果是和input关联，日期时间选择器会绝对定位在它的下方。
• .hide()：隐藏日期时间选择器。
• .id：为Rome对象自动生成唯一的标识符。
• .container：包裹日期时间选择器的DOM元素。
• .associated：和日期时间选择器对象关联的DOM元素。它是你用于创建日期时间选择器的input元素或它的父元素。
• .getDate()：使用原生的Date对象返回当前的日期。当input元素是空的时候，如果required: false将获得null。
• .getDateString(format?)：返回日期时间选择器上定义的当前日期，并用options.inputFormat或你选择的格式来格式化该日期。当input元素是空的时候，如果required: false将获得null。
• .getMoment()：返回当前日期时间选择器的moment对象的一个副本。当input元素是空的时候，如果required: false将获得null。
• .destroy()：从DOM中移除日期时间选择器矢量，并移除所有的关联事件。 The only responsive API method becomes the .restore method described below, the rest of the API becomes no-op methods. After emitting the destroyed event, all event listeners are removed from the instance.
• .destroyed：如果日期时间选择器处于销毁状态返回true。
• .restore(options?)：使用提供的参数恢复日期时间选择器。关联的DOM元素不能被改变。
• .options(options?)：如果提供了一个options对象，它将销毁日期时间选择器对象，并用提供的options来重新初始化选择器。效果和在调用了.destroy()方法之后立刻调用.restore(options)方法。
• .options.reset()：重置默认的参数。 Effectively the same as calling .options({}) while preserving the appendTooption.
• .emitValues()：Emits all of the data events listed below. Mostly used internally, should be avoided in consumer-land.
• .setValue(value)：使用value来设置当前的日期时间。 Takes string, Date, or moment. Mostly used internally, and it doesn't emit any events.
• .refresh()：强制刷新日期时间选择器。This method will redraw the month and update the dates that can be selected in accordance with dateValidator and timeValidator.

事件

Rome日期时间选择器也提供了一些可用的事件。这些事件是通过一个事件源contra发布创建使用。

关于该日期时间选择器的更多资料请参考：https://www.npmjs.com/package/rome

怎么把星期和月改成中文

在rome.js中搜索

var defaultLocaleMonths = 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_');

var defaultLocaleWeekdaysMin = 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_');

改为

var defaultLocaleMonths = '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_');

var defaultLocaleWeekdaysMin = '日_一_二_三_四_五_六'.split('_');

html中记的加入utf-8编码格式就成中文了

<meta charset="utf-8">