首页 前端知识 仿element-ui datapicker组件的jQuery日期选择器插件

仿element-ui datapicker组件的jQuery日期选择器插件

2025-03-15 13:03:15 前端知识 前端哥 621 689 我要收藏

在这里插入图片描述
特效预览

datepicker是一个基于jQuery的日期选择器插件,它支持范围选择、最大和最小设置、时间格式自由转换、UI美观、易于使用,参考了element-ui datePicker的设计。

它不依赖于其他库,只需要引入两个文件就可以使用。它还提供了一些自定义属性和事件回调函数,让你可以根据你的需求来调整日期选择器的功能和样式。

它的特点有:

  • 支持时分秒年月日范围选择
  • 最大最小值限制
  • 限制开始结束时间间隔最大值
  • 快捷选项简易配置
  • 支持只选年月,只选年

使用方法

安装
首先你需要在页面中引入你要的文件:

// picker css(加载了fonts,具体看scss文件夹)
<link rel="stylesheet" href="css/datepicker.css">
 
// rely on plugins
<script src="js/plugins/jquery.js"></script>
<script src="js/plugins/moment.min.js"></script>
// picker js
<script src="js/datepicker.all.min.js"></script>

使用
然后再页面中就可以使用了:

<div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day">
    <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
    <input type="text" autocomplete="off" name="" placeholder="选择日期" class="c-datepicker-data-input only-date" value="">
</div>   

通过下面的代码来初始化日期选择器:

// 年月日单个(J-datepicker-day对应html里的input父元素div)
$('.J-datepicker-day').datePicker({
    hasShortcut: true,
    format:'YYYY-MM-DD',
    shortcutOptions: [{
      name: '今天',
      day: '0'
    }, {
      name: '昨天',
      day: '-1'
    }, {
      name: '一周前',
      day: '-7'
    }]
});    

你也可以使用日期范围:

<div class="c-datepicker-date-editor  J-datepicker-range-day">
  <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
  <input placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="">
  <span class="c-datepicker-range-separator">-</span>
  <input placeholder="结束日期" name="" class="c-datepicker-data-input only-date" value="">
</div>  

//年月日范围

$('.J-datepicker-range-day').datePicker({
    hasShortcut: true,
    format: 'YYYY-MM-DD',
    isRange: true,
    shortcutOptions: [{
        name: '最近一周',
        day: '-7,0'
    }, {
        name: '最近一个月',
        day: '-30,0'
    }, {
        name: '最近三个月',
        day: '-90, 0'
    }]
});   

你还可以指定日期范围的最小值、最大值和显示格式:

<div class="c-datepicker-date-editor J-datepicker-range">
  <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
  <input placeholder="开始日期" name="" class="c-datepicker-data-input" value="">
  <span class="c-datepicker-range-separator">-</span>
  <input placeholder="结束日期" name="" class="c-datepicker-data-input" value="">
</div>     
$('.J-datepicker-range').datePicker({
    hasShortcut: true,
    min: '2018-08-31 00:00:00',
    max: '2019-08-31 23:59:59',
    isRange: true,
    shortcutOptions: [{
      name: '昨天',
      day: '-1,-1',
      time: '00:00:00,23:59:59'
    },{
      name: '最近一周',
      day: '-7,0',
      time:'00:00:00,'
    }, {
      name: '最近一个月',
      day: '-30,0',
      time: '00:00:00,'
    }, {
      name: '最近三个月',
      day: '-90, 0',
      time: '00:00:00,'
    }]
  }); 

配置参数

配置参数如下:

参数名默认值(可选值)作用类型
formatYYYY-MM-DD HH:mm:ssdatepicker 类型String
isRangefalse是否范围选择Boolean
minfalse时间最小值false/String
maxfalse时间最大值false/String
hasShortcutfalse是否开启快捷选项Boolean
shortcutOptions[]快捷选项配置参数Array
betweenfalse开始和结束值之间的时间间隔天数(只对范围有效)false/Number
hidefunction时间插件选择框隐藏时调用这个函数function
showfunction时间插件选择框显示后调用这个函数function
转载请注明出处或者链接地址:https://www.qianduange.cn//article/23720.html
标签
前端特效
评论
会员中心 联系我 留言建议 回顶部
复制成功!