JQuery手机版日期选择控件之jdate(jquery-date)

朱雀 2023-06-18 04:55 11阅读 0赞

**一、控件说明 jdate(jquery-date)**

注：当前控件兼容支持手机浏览器，常用选择即可支持。

git源代码地址：

[https://github.com/weijhfly/jqueryDatePlugin][https_github.com_weijhfly_jqueryDatePlugin]

如果是在vue或其他模块开发的项目中，参考git中的使用说明。

在html中使用，比较简单，引用jquery控件后，再引用jdate控件

使用使用方法很简单：

var jd = new Jdate({
                el: '#dateOne',
                format: 'YYYY-MM-DD',
            });

使用效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70][]

**二、使用示例**

<form>
        <div class="form-group">
            <label for="exampleInputEmail1">日期</label>
            <input type="text" class="form-control" id="dateOne" placeholder="请选择日期" aria-describedby="emailHelp">
            <small id="emailHelp" class="form-text text-muted">日期格式：yyyy-MM-dd</small>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    
    <script>
        var jd = new Jdate({
            el: '#dateOne',
            format: 'YYYY-MM-DD',
        });
    </script>

官方示例：

//完整参数、方法示例
    var jd = new Jdate({
        el: '#date',
        format: 'YYYY-MM-DD',
        beginYear: 2000,
        endYear: 2100,
        minStep:1,
        lang:{title:'自定义标题'},
        trigger:'tap',
        init: function() {
          console.log('插件开始触发');
        },
        moveEnd: function() {
          console.log('滚动结束');
        },
        confirm: function(date) {
          console.log('确定按钮触发');
        },
        cancel: function() {
          console.log('插件运行取消');
        }
    })
    jd.show();
    jd.hide();

## 参数、方法说明 ##

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

## [Bootstrap3 datetimepicker控件的使用][Bootstrap3 datetimepicker] ##

## [Bootstrap Table使用整理（六）-常用操作][Bootstrap Table_-] ##

## [Bootstrap相关整理、免费主题整理][Bootstrap] ##

[https_github.com_weijhfly_jqueryDatePlugin]: https://github.com/weijhfly/jqueryDatePlugin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191130131717274.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk=,size_16,color_FFFFFF,t_70
[Bootstrap3 datetimepicker]: https://blog.csdn.net/u011127019/article/details/51725081
[Bootstrap Table_-]: https://blog.csdn.net/u011127019/article/details/76691479
[Bootstrap]: https://blog.csdn.net/u011127019/article/details/51495781