Git Product home page Git Product logo

mobile-calendar's Introduction

mobile-calendar

简易版移动端版日期插件,没第三方库依赖

安装

# 安装 mobile-calendar
npm install --save mobile-calendar

引入方式和使用

<link rel="stylesheet" href="/dist/calendar.min.css">

<script src="/dist/calendar.min.js"></script>

<input type="text" class="calendars" />

API

通过在元素上添加属性的方式

  • start-year 开始年份 String defalut:1915
  • end-year 结束年份 String defalut:2050
  • start-date 起始日期 String defalut:当前日期
  • min-date 起始日期 String defalut:null
  • max-date 起始日期 String defalut:null
  • format 显示的格式 String defalut:'yy/mm/dd' 只支持 yy/mm/dd 或 yy-mm-dd
  • shield 指定禁用日期 Array defalut:undefined 例: shield="[2015/3/8, 2015/3/9]"
  • past 不可选择过去日期 defalut:false 只需要设置属性即可,不需要值
  • hours 可以选择时间 defalut:false 只需要设置属性即可,不需要值
    • hours-past 不可选择过去时间 defalut:false 只需要设置属性即可,不需要值

图片

选择列表
选择列表

左右滑动切换
左右滑动切换

月份选择
月份选择

年份选择
年份选择

左右滑动切换年份列表
左右滑动切换年份列表

mobile-calendar's People

Contributors

rookie125 avatar rookies125 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mobile-calendar's Issues

回调的问题

请问我选择完日期后可以触发一个回调函数吗?我看介绍里面好像没有提及

滑动BUG

在移动端进行左右滑动操作时命令台报错,经过排查发现是calendar.js第877行和887行拼写错误,将ev改为evt即可解决

min-date和max-data 移动端无效

pc端min-date\max-data 可以用 移动端无效代码

<input type="text" class="calendars" style="width:120px;min-height:30px;" format="yy-mm-dd" id="startTime" max-date="2017-09-22"/>

禁用日期不能是将来

可以通过设置pass禁用过去时间,但是不能禁用将来时间shield只能是每天,通常报表需求中肯定是要求只能选择过去的时间,而不是将来的时间。

建议直接采用minDate和maxDate

你好请问起始日期 支持动态添加吗?

比如 min-date="2017-03-10" max-date="2017-06-1"

这里的 min-date max-date start-date end-date 可以用 变量吗? 类似 new date() 吗?
'minDate': (now.getFullYear() - 100) + '-' + now.getMonth() + '-' + now.getDate(), //最小日期
'maxDate': now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() //最大日期

或者你加了一个 past 来支持 今天以前的不能选
能不能加一个 属性 支持 今天之后的 不能选,只能选今天以前的

如有时间,麻烦回复下 灰常感谢。

代码逻辑问题

demo不可选过期日期的时候发现该问题。 2016-01是可选的
image

demo指定可选日期的时候发现该问题。 2014竟然是可选的, 指定的开始日期是2015、05、16
image

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.