jQuery Mobile Datebox是一個(gè)基于jQuery Mobile的日期選擇器插件，可以讓用戶方便地選擇日期和時(shí)間。

Datebox提供了各種樣式和配置選項(xiàng)，可以滿足不同場(chǎng)景下的需求。在使用Datebox之前，需要先引入jQuery和jQuery Mobile庫(kù)，然后再引入Datebox插件。

<!-- 引入jQuery庫(kù) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入jQuery Mobile庫(kù) -->
<link rel="stylesheet"  />
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
<!-- 引入Datebox插件 -->
<link rel="stylesheet"  />
<script src="https://cdn.jsdelivr.net/npm/@mobiscroll/jquery-datebox@4.7.1/dist/js/jquery.mobile.datebox.min.js"></script>

在HTML代碼中添加Datebox的輸入框，設(shè)置類(lèi)型和樣式、默認(rèn)值以及事件處理函數(shù)：

<input type="text" data-role="datebox" data-options='{"mode":"datebox", "useFocus": true, "defaultValue":"2022-01-01", "overrideDateFormat": "%Y-%m-%d", "useClearButton": true}' />
<input type="text" data-role="datebox" data-options='{"mode":"timebox", "useFocus": true, "defaultValue":"12:00", "overrideTimeFormat": 12, "useClearButton": true}' />
<input type="text" data-role="datebox" data-options='{"mode":"durationbox", "useFocus": true, "defaultValue":"2:00", "useClearButton": true}' />
<script>
$(function() {
$('[data-role="datebox"]').on('datebox', function() {
// 處理事件
});
});
</script>

以上代碼演示了Datebox的三種類(lèi)型：日期選擇框、時(shí)間選擇框和時(shí)間間隔選擇框。可以通過(guò)"data-options"屬性配置選項(xiàng)，具體可參考官方文檔。