时间插件ROME

  • G3_845459
    了解作者
  • 433.5KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-09 11:47
    上传日期
时间插件ROME无依赖性,选择用户界面,可定制日期&时间的选择器,演示地址:http://www.jq22.com/jquery-info543
jq22.com-rome-master.zip
  • rome-master
  • .jshintignore
    35B
  • example
  • example.js
    2.2KB
  • example.css
    1KB
  • jquery插件库.url
    119B
  • package.json
    1.1KB
  • gulpfile.js
    3.4KB
  • index.html
    6.5KB
  • www.jq22.com.txt
    111B
  • resources
  • screenshot.png
    290.2KB
  • LICENSE
    1.1KB
  • dist
  • rome.standalone.min.js
    25.4KB
  • rome.min.css
    1.1KB
  • rome.js
    364.2KB
  • rome.min.js
    53.1KB
  • rome.css
    1.4KB
  • rome.standalone.js
    150.1KB
  • src
  • core.js
    468B
  • isInput.js
    145B
  • events.js
    944B
  • index.js
    496B
  • parse.js
    495B
  • input.js
    3KB
  • rome.styl
    1.1KB
  • defaults.js
    3.7KB
  • classes.js
    675B
  • rome.moment.js
    120B
  • polyfills
  • array.indexof.js
    502B
  • array.some.js
    630B
  • function.bind.js
    651B
  • array.foreach.js
    327B
  • string.trim.js
    120B
  • array.every.js
    633B
  • array.filter.js
    215B
  • array.map.js
    614B
  • array.isarray.js
    134B
  • rome.js
    623B
  • momentum.js
    204B
  • text.js
    199B
  • association.js
    983B
  • rome.standalone.js
    299B
  • noop.js
    59B
  • inline.js
    316B
  • clone.js
    515B
  • validators.js
    2.1KB
  • use.js
    145B
  • dom.js
    348B
  • calendar.js
    16.2KB
  • .npmignore
    40B
  • .gitignore
    47B
  • CHANGELOG.md
    5KB
  • README.md
    14.3KB
  • .jshintrc
    342B
  • bower.json
    665B
  • .editorconfig
    207B
内容介绍
# rome [![help me on gittip](http://gbindex.ssokolow.com/img/gittip-43x20.png)](https://www.gittip.com/bevacqua/) [![flattr.png](https://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=nzgb&url=https%3A%2F%2Fgithub.com%2Fbevacqua%2Frome) > Customizable date _(and time)_ picker. Opt-in UI, no jQuery! Rome wasn't built in a day. Browser support includes every sane browser and **IE7+**. #### Demo! You can [see a live demo here][3]. [![screenshot.png][4]][3] Oh, `rome` synchronizes in real-time with inputs, never steals focus, and its CSS is entirely customizable! <sub>Rome depends on [`moment`][6]. It doesn't depend on jQuery or other weird frameworks, though. ## Install From npm or Bower. ```shell npm install --save rome ``` ```shell bower install --save rome ``` Note that if you're using the standalone version, the API is published under the `rome` global. If you're using CJS, then you'll have to `require('rome')`. ### Setup You can use your own distribution of [`moment`][6], using `rome.standalone.js`. ```html <script src='moment.js'></script> <script src='rome.standalone.js'></script> ``` You could just use the bundled `rome.js` distribution, which comes with [`moment`][6] in it. ```html <script src='rome.js'></script> ``` If you need to do anything regarding internationalization, [refer to `moment` for that][5]. Ideally, make those changes before starting to create Rome calendar components. ## API The API in `rome` exposes a few properties. ### `rome.find(elem)` If a calendar is associated to the provided `elem`, then that calendar is returned, otherwise returns `null`. DOM elements can only have one associated calendar. ### `rome(elem, options={})` This method creates a calendar instance and associates it to the provided `elem`. This association can't be undone even by `.destroy()`ing the `rome` instance, because it can be `.restore()`d later. Subsequent calls to `rome(elem)` will return the associated calendar, instead of creating a new one _<sub>(see `rome.find(elem)`)</sub>_. Think of this as a _"caching feature"_. Creating a calendar has a ton of options. These have reasonable defaults that are easy to adjust, too. The options are listed below. Option | Description -------------------|-------------------------------------------------------------------------------------------------- `appendTo` | DOM element where the calendar will be appended to. Takes `'parent'` as the parent element `autoClose` | Closes the calendar when picking a day or a time `autoHideOnBlur` | Hides the calendar when focusing something other than the input field `autoHideOnClick` | Hides the calendar when clicking away `date` | The calendar shows days and allows you to navigate between months `dateValidator` | Function to validate that a given date is considered valid. Receives a native `Date` parameter. `dayFormat` | Format string used to display days on the calendar `initialValue` | Value used to initialize calendar. Takes `string`, `Date`, or `moment` `inputFormat` | Format string used for the input field as well as the results of `rome` `invalidate` | Ensures the date is valid when the field is blurred `max` | Disallow dates past `max`. Takes `string`, `Date`, or `moment` `min` | Disallow dates before `min`. Takes `string`, `Date`, or `moment` `monthFormat` | Format string used by the calendar to display months and their year `monthsInCalendar` | How many months get rendered in the calendar `required` | Is the field required or do you allow empty values? `styles` | CSS classes applied to elements on the calendar `time` | The calendar shows the current time and allows you to change it using a dropdown `timeFormat` | Format string used to display the time on the calendar `timeInterval` | Seconds between each option in the time dropdown `timeValidator` | Function to validate that a given time is considered valid. Receives a native `Date` parameter. `weekStart` | Day considered the first of the week. Range: Sunday `0` - Saturday `6` Note that in the case of input fields, when `initialValue` isn't provided the initial value is inferred from `elem.value` instead. In the case of inline calendars, `Date.now` will be used as a default if none is provided. #### Inlining the Calendar If you pass in an element other than an input tag, then this method behaves slightly differently. The difference is that `appendTo` becomes the provided `elem`, and the calendar won't attach itself to an input element. The options listed below will be ignored. - `autoHideOnBlur`, because there is no input field that can be tracked for `blur` events - `invalidate`, because there is no input field to keep consistent with the calendar component - `required`, because you can easily do that on an input field - `styles.positioned`, because the calendar will be considered inlined All of the other options still apply, and identical behavior should be expected. #### Default Options If you don't set an option, the default will be used. You can [look up the defaults here][1], or below. ```json { "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, "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, "weekStart": 0 } ``` #### Rome API When you create a calendar with `rome(elem)`, you'll get a `cal` instance back. This has a few API methods. Most of these methods return the calendar instance whenever possible, allowing for method chaining. ##### `.show()` Shows the calendar. If associated with an input, the calendar gets absolutely position right below the input field. ##### `.hide()` Hides the calendar. ##### `.id` Auto-generated unique identifier assigned to this instance of Rome. ##### `.container` The DOM element that contains the calendar. ##### `.associated` The associated DOM element assigned to this calendar instance. This is the input field or parent element that you used to create the calendar. ##### `.getDate()` Returns the current date, as defined by the calendar, in a native `Date` object. If `required: false` you'll get `null` when the input field is empty. ##### `.getDateString(format?)` Returns the current date, as defined by the calendar, using the provided `options.inputFormat` format string or a format of your choosing. If `required: false` you'll get `null` when the input field is empty. ##### `.getMoment()` Returns a copy of the `moment` object underlying the current date in the calendar. If `required: false` you'll get `null` when the input field is empty. ##### `.destroy()` Removes the calendar from the DOM and all of its associated DOM event listeners. 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` R
评论
    相关推荐
    • jQuery星星评分
      jQuery星星评分演示地址:http://www.jq22.com/jquery-info328
    • jquery时间轴
      jquery时间轴 演示地址:http://www.jq22.com/plugin/247
    • jQuery擦拭效果
      插件描述:橡皮擦擦拭效果. 参考示例:http://www.jq22.com/jquery-info5432
    • jQueryAPI1.3
      一个基础的jQuery学习资料,有实例教程可以对照http://docs.jquery.com/Selectors/官网学习
    • HTTP模拟Jquery解析
      SOCKET HTTP JQUERY
    • jquery动态阴影
      jquery动态滚动的阴影,会根据图像位置变换阴影角度,浏览器兼容要求ie10以上.演示地址:http://www.jq22.com/jquery-info534
    • jquery在线客服
      jquery在线客服代码,演示地址:http://www.jq22.com/jquery-info568
    • jQuery像素鸟
      这是一个用jQuery实现的像素鸟。游戏有点难度,玩后有想砸电脑的... 像素鸟是2013年的一款手机游戏,它有侧面的滚动模式,玩家控制一只鸟飞行在绿色管道之间但不接触管道,演示地址:http://www.jq22.com/jquery-info560
    • jquery精美相册
      插件描述:jquery炫酷图片播放幻灯片. 参考示例:http://www.jq22.com/jquery-info5281
    • jQuery tab
      jQuery tab适应一个页面存在多个TAB场景 演示地址http://www.jq22.com/plugin/591