2013年7月17日 星期三

jQuery Mobile 好用的日期選擇plugin - DateBox

提供許多種日期、時間的UI介面,有支援中文。

官網在http://dev.jtsage.com/jQM-DateBox/

下載URL:http://dev.jtsage.com/jQM-DateBox/demos/install.html

在jQuery Mobile的網頁中,在Input中直接設定data-role與mode:

<input type="date" data-role="datebox" data-options='{"mode": "calbox"}'>

執行時,只要點選文字方塊後方的圖示,就會顯示月曆

image

 

範例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="Content/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
</head>
<body>
    <div data-role="page" id="Page1">
        <div data-role="header" data-position="fixed">
            <h1>jQuery Mobile</h1>
        </div>
        <!-- /header -->
        <div data-role="content">
            <input type="date" data-role="datebox" data-options='{"mode": "calbox"}'>
        </div>
        <!-- /content -->
        <div data-role="footer" data-position="fixed">
            <h4>©Copyright 2012 Tony & Vivid </h4>
        </div>
        <!-- /footer -->
    </div>

    <script src="Scripts/jquery-2.0.2.js"></script>
    <script>
    </script>
    <script src="Scripts/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.zh-TW.utf8.js"></script>
    <script>
    </script>
</body>
</html>

沒有留言:

總瀏覽量