隨著移動互聯網的普及,越來越多的網站和應用開始使用jQuery Mobile框架來開發移動端Web頁面。其中,日期段選擇是一個常見的需求,下面介紹如何使用jQuery Mobile實現日期段選擇的功能。
<label for="date-start">開始日期:</label><input type="date" name="date-start" id="date-start"><label for="date-end">結束日期:</label><input type="date" name="date-end" id="date-end">
以上是一個簡單的HTML代碼,包含兩個日期輸入框。接下來,我們可以使用jQuery的datebox插件來實現日期選擇器的功能。
<script type="text/javascript" src="http://cdn.jtsage.com/datebox/latest/jqm-datebox.core.min.js"></script><script type="text/javascript" src="http://cdn.jtsage.com/datebox/latest/jqm-datebox.mode.calbox.min.js"></script><link rel="stylesheet" type="text/css" />$('#date-start').datebox({mode: "calbox", useNewStyle: true}); $('#date-end').datebox({mode: "calbox", useNewStyle: true});
引入datebox插件后,只需要簡單的調用datebox函數即可實現日期選擇器的功能,其中mode參數為calbox表示使用日歷模式。
接下來,我們可以再通過JavaScript編寫一個事件監聽函數,以實現日期段選擇的功能。
$('form').submit(function(){ var startDate = $('#date-start').val(); var endDate = $('#date-end').val(); // do something with startDate and endDate });
最后,我們可以在監聽函數中使用獲取到的開始日期和結束日期數據做一些其他的操作,如發送請求、展示相關數據等。
上一篇jquery id 結尾
下一篇mysql中縮進