JQuery手機版日期選擇控件之jdate(jquery-date)

原創

天马3798

2020-02-20 23:58

一、控件說明 jdate(jquery-date)

注：當前控件兼容支持手機瀏覽器，常用選擇即可支持。

git源代碼地址：

https://github.com/weijhfly/jqueryDatePlugin

如果是在vue或其他模塊開發的項目中，參考git中的使用說明。

在html中使用，比較簡單，引用jquery控件後，再引用jdate控件

  <script src="/scripts/plugins/jdate.min.js"></script>

使用使用方法很簡單：

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

使用效果：

二、使用示例

<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();

參數、方法說明

名稱	必填	默認值	說明
el	是	無	綁定插件的dom元素，插件內部使用document.querySelector，也可以直接傳遞dom元素對象，只支持單個
format	否	'YYYY-MM-DD'	日期格式，無限制。規則：年-YYYY 月-MM 日-DD 時-hh 分-mm 秒-ss 使用/、-、空格、:之一分隔，可隨意組合
beginYear	否	2000	日期開始年份
endYear	否	2100	日期結束年份
value	否	無	日期初始化的默認值，列如'2018-03-18'
lang	否	年、月、日...	配置插件語言，默認：title:'選擇日期',cancel:'取消',confirm:'確認', year:'年',month:'月',day:'日',hour:'時',min:'分',sec:'秒'
minStep	否	1	分鐘按指定數分隔
init	否	null	插件觸發前的回調函數，return false可阻止插件執行
moveEnd	否	null	插件滾動後的回調函數
confirm	否	null	確認按鈕觸發前的回調函數，return false可阻止插件執行， return其他值可修改日期，函數返回一個參數(選中的日期)
cancel	否	null	插件取消時觸發的回調函數
trigger	否	'tap'	默認使用tap解決移動端click事件300ms延遲，可選click替換tap。注意使用tap會阻止其他綁定的click事件的觸發
show	否	無	主動觸發插件，當trigger爲tap時，主動觸發插件應該使用此方法
hide	否	無	主動隱藏插件