建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS日期输入插件Datedropper.js

来源:易助科技网浏览量:11收藏

简介

Datedropper.js是一个纯JS用户友好的日期选择器,允许用户从类似日历的界面中轻松选择特定日期。





使用

1.  引入文件


<head>
  ... 
  <!-- datedropper js-->
  <script src="datedropper-javascript-lite.js"></script>
  
  <!-- datedropper jquery-->
  <link href="datedropper.css" rel="stylesheet" type="text/css" />
  
  <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
  <script src="datedropper.js"></script>
  
</head> 


2.  HTML


<!-- js-->
<input type="date">

<!-- jquery-->
<input id="pickdate" type="text">


3.  调用


<!-- datedropper init js-->
<script>
  new dateDropper({selector: 'input[type="date"]'});
</script>

<!-- datedropper init jquery-->
<script>
    $("#pickdate").dateDropper({
      'animate': true, // 展示动画效果,当设置为true时,选择器面板中的日期会做动画滚动到当前日期,默认是true。
      'init_animation': 'bounce', // 点击弹出面板时的动画效果,有fadeIn(默认), bounce, dropDown三种效果。
      'format': 'Y-m-d', // 格式化日期。
      'lang': 'zh',  // 语言,。
      'maxYear': '2000',  // 最大年份,默认当前年份。
      'minYear': '1990', // 最小年份,默认1970。
      // 'yearsRange': '150', // 年份范围,默认10年。
      // dateDropper:    // 还提供了皮肤样式的设置。
    }); 
</script>



相关链接

官网地址(英文):https://felixg.io/products/datedropper-javascript

GitHub 地址 : https://github.com/fovoc/datedropper