您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

轻量级的原生js日历插件calendar.js使用指南

作者:佚名    责任编辑:admin    更新时间:2022-06-22

   网页上的原生js日历代码,鼠标点击文字提示处,会显示一个带年月日的日历窗口,可调整年份、月份、选择日期等,用在网页上方便大家选择日期,提高用户体验。各大浏览器都能正常运行,有需要的小伙伴可以参考下。

  使用说明:

  需要引入插件calendar.js/calendar.min.js

  须要引入calendar.css 样式表,可以自定义自己想要的皮肤

  本日历插件支持cmd模块化

  如下调用:

   代码如下:

  xvDate({

  'targetId':'date1',//时间写入对象的id

  'triggerId':['date1','dateBtn1'],//触发事件的对象id

  'alignId':'datesWrap1',//日历对齐对象

  'format':'-',//时间格式 默认'YYYY-MM-DD HH:MM:SS'

  'min':'2014-09-20 10:00:00',//最大时间

  'max':'2014-10-30 10:00:00'//最小时间

  });

  参数说明:

  targetId :日期写入对象的id,不能为空

  triggerId :触发事件的对象id,如果不设置则默认为targetId

  alignId : 日历盒子的对齐基准,如果不设置则默认为targetId

  hms : 时分秒是否开启,默认值为'on'则表示开启时分秒(2014-09-20 10:00:00),'off'则表示关闭时分秒模式(2014-09-20)

  format :为日期格式 默认值为'-' (2014-09-20),'/'则表示(2014/09/20)

  min :最小时间限制,min 的时间格式和前面的时间格式保持一直

  max :最大时间限制,max 的时间格式和前面的时间格式保持一直

  zIndex :最大时间限制,日历盒子的层级,默认9999

  如果需要使用模块化在需要依赖的模块用引入即可

  如:

  代码如下:

  define('mod1',[],function(require, exports, module){

  var xvDate = require("xvDate");

  })

  下载地址

  以上所述就是本文的全部内容了,希望大家能够喜欢。