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

LazyPicker

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

用手機掃描體驗：

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改善之道。