移動端時間選擇器（更新 1.2.0 版本）

鐵鍋發表於2016-12-05

LazyPicker

LazyPicker是一個簡單的移動端時間選擇器，支援多種主題。

用手機掃描體驗：

移動端時間選擇器（更新 1.2.0 版本）

1.2.0版本體驗：

移動端時間選擇器（更新 1.2.0 版本）

使用方法

引入CSS和JavaScript指令碼：

<link rel="stylesheet" href="lazyPicker.min.css" />
<script src="lazyPicker.min.js"></script>複製程式碼

簡單的表單（input）

<input type="text" class="date-picker" placeholder="選擇日期" />複製程式碼

初始化時間選擇器

var picker = new LazyPicker('.date-picker');複製程式碼

這裡的class可自定義，不過要對應你要將其設定為時間選擇器的input的class。

可選引數

LazyPicker建構函式可設定第二個引數，為配置物件，可設引數說明：

theme: ,    // 主題  green（墨綠） | black（純黑）
initDate: ,  // 設定初始年月日，格式YYYY-MM-DD或YYYY/MM/DD
minDate: ,    // 設定最小年份，預設是1950
maxDate: ,   // 設定最大年份，預設是初始年份 + 20，如果initDate和maxDate同時存在，年份以maxDate為主。
onChange: function(data) {  // 監聽選擇時間改變
  // data返回一個物件，包含屬性year、month、day、date，分別表示年、月、日、日期
}複製程式碼

#1.2版本新增功能

data:  // 自定義選擇項，JSON格式
type:  // 風格，暫時支援1,2，預設是1，當設定為2時，風格可掃描二維碼檢視第五個（也就是orange顏色那個，會有些許差別）複製程式碼

data的JSON格式說明：

var data = {   
  "item": [{  /* 第一項 */  
    "id": 1,   
    "name": "廣東",   /* name屬性是必須的，id可選 */
    "child": [{   /* 子項 */
      "id": 101,   
      "name": "廣州",   
      "child": [{   /* 子子項 */
        "id": 3,   
        "name": "天河區"   
      }]   
    }]   
  }, {   
    "id": 1,   
    "name": "雲南",   
    "selected": true,   /* 預設選項，當設定為true時，開啟選擇器的當前項是這個 */
    "child": [{   
      "id": 1,   
      "name": "昆明"   
    }, {   
      "id": 1,   
      "name": "玉溪",   
      "selected": true   /* 預設選項 */
    }, {   
      "id": 1,   
      "name": "麗江"   
    }]   
  }, {   
    "id": 1,   
    "name": "上海",   
    "child": [{   
      "id": 1,   
      "name": "上海"   
    }]   
  }],   
  "itemName": "省-市-區"   /* 選項頭說明提示 */
};複製程式碼

當是自定義格式時，onChange方法返回的值data也有所不同：

[
  [name,id],[name,id].....,name-name-name
]複製程式碼

多個陣列表示每個選項的名稱（name）和id，最後一項是用“-”連線的名稱值字串，也就是input的值。

如果你發現Bug或者有更好的建議，強烈懇求在下方的評論區評論告知，你們的支援，才是LazyPicker改善之道。

相關文章