Coder Social home page Coder Social logo

rolldate's Introduction

rolldate npm npm

此插件为jquery-date的全新版本,主要为了解决旧版参数设计不够合理、滑动效率不高、依赖jquery、没有可选的主题风格等问题,并增加了回调函数,使插件有更大的灵活性。

2019/05/24 3.0版本更新

上一个版本为2.1.5, 新版本(从3.0.0开始)的改动:

  1. 使用方式由new rolldate.Date改为new Rolldate;
  2. 回调函数调整:tapBefore更名为init,confirmBefore更名为confirm,取消confirmEnd,增加cancel;
  3. 日期格式(format)调整为无限制,可根据规则随意组合;

2019/02/03重要版本更新

上一个版本为1.5.1, 新版本(从2.0.0开始)与此前版本的不同之处:

  1. 将滑动插件由iscroll替换为better-scroll,提升了兼容性;
  2. 改变了界面风格,操作更加方便;
  3. 取消了rolldate.css文件,只需引入js即可;
  4. 移除了主题风格、日期初始化的滑动时间设置;

注意2.0.0之前的版本将不再维护,如有需要请访问:旧版rolldate

演示

rolldate(下方直接扫码即可体验)

rolldate

使用方式

es6

import Rolldate from 'rolldate'
new Rolldate({
  el:'#date'
})

commonJS

var Rolldate = require('rolldate');
new Rolldate({
  el:'#date'
})

amd

require(['rolldate'],function(Rolldate){
  new Rolldate({
    el:'#date'
  })
})

cmd

seajs.use('rolldate',function(undefined){
    //插件没有遵循cmd规范,这里的Rolldate是全局的
    new Rolldate({
      el:'#date'
    })
});

参数、方法说明

名称 必填 默认值 说明
el 绑定插件的dom元素,插件内部使用document.querySelector,
也可以直接传递dom元素对象,只支持单个
format 'YYYY-MM-DD' 日期格式,无限制。规则:年-YYYY 月-MM 日-DD 时-hh 分-mm 秒-ss 使用/、-、空格、:之一分隔,可随意组合
beginYear 2000 日期开始年份
endYear 2100 日期结束年份
value 日期初始化的默认值,列如'2018-03-18'
lang 年、月、日... 配置插件语言,默认:title:'选择日期',cancel:'取消',confirm:'确认',
year:'年',month:'月',day:'日',hour:'时',min:'分',sec:'秒'
minStep 1 分钟按指定数分隔
init null 插件触发前的回调函数,return false可阻止插件执行
moveEnd null 插件滚动后的回调函数,函数返回一个参数(better-scroll实例)
confirm null 确认按钮触发前的回调函数,return false可阻止插件执行,
return其他值可修改日期,函数返回一个参数(选中的日期)
cancel null 插件取消时触发的回调函数
trigger 'tap' 默认使用tap解决移动端click事件300ms延迟,可选click替换tap。注意使用tap会阻止其他绑定的click事件的触发
show 主动触发插件,当trigger为tap时,主动触发插件应该使用此方法
hide 主动隐藏插件
//完整参数、方法示例
var rd = new Rolldate({
    el: '#date',
    format: 'YYYY-MM-DD',
    beginYear: 2000,
    endYear: 2100,
    minStep:1,
    lang:{title:'自定义标题'},
    trigger:'tap',
    init: function() {
      console.log('插件开始触发');
    },
    moveEnd: function(scroll) {
      console.log('滚动结束');
    },
    confirm: function(date) {
      console.log('确定按钮触发');
    },
    cancel: function() {
      console.log('插件运行取消');
    }
})
rd.show();
rd.hide();

rolldate's People

Contributors

weijhfly avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

rolldate's Issues

日期插件遮罩层出现,下层页面默认滚动或滑动没有被禁止的问题

最近使用了一下rolldate.js源码,发现一个出现在我项目中的问题,日期遮罩层出现以后,底层页面的鼠标默认滚动和手指滑动没有被禁用,不知道作者有没有遇见过这样的问题,建议能否提供一个借口,可以禁止底层页面的鼠标默认滚动,当日期遮罩层消失的时候,恢复默认滚动效果…

问题

在angular.js中用new rolldate.Date(),f12出现这个,时间选择界面出不来。
[Deprecation] 'webkitCancelAnimationFrame' is vendor-specific. Please use the standard 'cancelAnimationFrame' instead.
stop @ rolldate.js:8
scrollTo @ rolldate.js:8
scrollToElement @ rolldate.js:8
value @ rolldate.js:8
(anonymous) @ rolldate.js:8
n @ ionic.bundle.min.js:22
t @ ionic.bundle.min.js:22
l @ ionic.bundle.min.js:22
请问这个是怎么问题?

Uncaught TypeError: Cannot read property 'previousSibling' of undefined

rolldate.js:formatted:224 Uncaught TypeError: Cannot read property 'previousSibling' of undefined
at t.value (rolldate.js:formatted:224)
at HTMLInputElement. (rolldate.js:formatted:128)
image
Dom元素放template里,Vue(1.0版本)组件create时候初始化组件,结果createui报错。
image
image

Option for custom month names.

Since there are no headers for day/month/year, it would be nice to have an option for text month names instead of numbers.
That way the difference between day and month is more clear. It also looks a bit nicer, in my opinion.

RTL languages should be supported

An rtl boolean option (default to false) should be managed, so that the header controls buttons (Confirm / Cancel) could be symmetrically reverted if needed.

时间设置面太窄,而且默认值设置有一处不优雅的地方。

  1. 时间设置面太窄,仅仅是满足标准化时间格式,这样导致专业性较强,价值也就变低。
    比如,2015-第一季度:可以表示工程应用,2019-08-11 0612 上午:可以表示当日工作日程,20142019:可以表示入学区间,所以每一列可以变成可配置的区间,这个可以让使用者定义数据。
    2.endYear,默认最好为当前年份,而非2100,大多数应用只是记录已经发生的事情,记录未发生的事情多数是plan类软件,范围面太小。

Option to visually loop months and days of month

is there a way to visually loop through the months and the days of month ? For example, the month starting at January and Stopping and December. Would be great when I continue scrolling from December, it starts again with January. Thank you!

建议

可以开放对控件赋值的方法

建议

可以开放对控件赋值的方法

Rolldate 3.1.1 问题

大佬,Rolldate 3.1.1 版本 发现第一次点击时间不准,例如:默认在9月点击8月后直接跳转到4月份去了

目前已知问题及待完善

1,插件启动时默认跳转至之前的日期,但如果之前的日期无效(包含时分或时分秒格式中偶现),插件将报错而无法使用,待修复。
2,插件滑动时,偶发滑动位置不准确,待解决。
3,包含年月日格式的,滑动结束时会重新计算天数,如之前的30天,现在28天,可能会出现28天后面还能滑动的bug。
4,为了使操作更便利,将模仿mobiscroll(日期位置贴近屏幕下方),增加另外一种界面风格。
5,扩展月、日、时分、时分秒这四种格式。
6,在某些低版本的安卓uc浏览器中,插件出现明显错误(重要)。
7, rolldate依赖了iscroll解决滑动问题,但iscroll不够稳定,小概率出现滑动位置不对齐,待解决。

Date restriction issue

In my case, I need the following criteria for the date selection.

  1. Only last 7 days date can be selected
  2. No future date can be selected

As per an internet search, I found the following solution which is NOT working for months and days while restricting year correctly

var today = new Date();
var lastWeek = new Date();
lastWeek.setDate(today.getDate() - 7);

new Rolldate({
el: '.calendar-filter',
format: 'YYYY-MM-DD',
lang: {
title: 'Select A Date',
cancel: 'Clear',
confirm: 'Done',
year: '',
month: '',
day: '',
hour: '',
min: '',
sec: ''
},
beginYear: lastWeek.getFullYear(),
beginMonth: lastWeek.getMonth() + 1,
beginDay: lastWeek.getDate(),
endYear: today.getFullYear(),
endMonth: today.getMonth() + 1,
endDay: today.getDate()
});

触屏电脑出现bug(已解决)


ontouchstart' in window
替换为
!!(('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch)

动态赋值

f97c95a0c57a8c679896185d659dd69
如图有快捷按钮选日期 选完怎么赋值进时间控件

建议

希望可以添加插件启动时 当选择器不为空 默认时间为选择器内时间的 功能 现在每次打开都是默认的当前时间 有点尴尬

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.