HTML5 UI 控件Mobiscroll的使用（年月日三級聯動）

概述：

　　遇到制作一個html5界面，需要選擇年月日，其實這個功能很常用。一般我們都是網上找，之前也沒有收藏一個自己常用的，今天發現一個不錯的庫。特此記錄一下使用過程，以便以后遇到了方面查閱。

1.官方網站：https://www.mobiscroll.com/

　　首先需要注冊一個賬戶，否則不能下載。這個庫包含了很多控件，用法官方網站上也都有現成的demo，這里我們只說明一下日期選擇控件的使用過程，其他控件的使用過程也是類似的。

2.使用過程

①在頁面中引入需要的js和css，其中js只有一個文件，css也只有一個文件，我下載的版本是：3.0.0-beta2，引入的文件是這樣的：

<link href="css/mobiscroll.custom-3.0.0-beta2.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-3.0.0-beta2.min.js" type="text/javascript"></script>

②添加input標簽

<input id="birthday_input" class="birthday" type="text" name="birthday" placeholder="生日" />

③載入控件

// -----------------------------------------------------------------
// 初始化日期選擇控件
$('#birthday_input').mobiscroll().date({
    theme: 'ios',
    display: 'bottom',
    dateFormat: 'yy-mm-dd',
    showScrollArrows: false,
    setText: '確定', 
    cancelText: '取消',
    dayText: '日', monthText: '月', yearText: '年'
});

上面date()傳入的是一個對象，包含了用戶自定義的配置，這些配置官方都有說明，這里就不贅述。

至此，改控件已經可以使用，點擊該input元素，日期選擇控件便會彈出，這里注意一點，月份的顯示是英文的，如果想改成中文，可以就改mobiscroll.custom-3.0.0-beta2.min.js里面的源代碼，搜索一下就能找到。

最后展示一下效果：