Jquery Mobile是一個基于Jquery的移動端web應用框架,它可以快速開發出適用于移動端的web應用。它不僅提供了各種UI組件,還包括了日期選擇控件,可以滿足各種基本需求。
// 初始化日期選擇器 <label for="date-input">選擇日期:</label> <input type="text" id="date-input" data-role="date"> // 獲取選中日期 $(document).on('change', '#date-input', function(){ var selectedDate = $(this).val(); console.log('選中日期:' + selectedDate); });
上面的代碼演示了如何在Jquery Mobile中使用日期選擇器。該日期選擇器的data-role屬性被設置為"date",當輸入框聚焦時會出現日期選擇框,用戶可以滑動選擇日期。選中日期后,就可以通過Jquery獲取到選中的日期了。
// 設置日期選擇器的最大值和最小值 $(document).ready(function(){ var todayDate = new Date(); var futureDate = new Date(); futureDate.setFullYear(todayDate.getFullYear() + 1); //設置最大值為今天的1年后 todayDate.setFullYear(todayDate.getFullYear() - 1); //設置最小值為今天的1年前 $('#date-input').attr('min', todayDate.toISOString().slice(0,10)); $('#date-input').attr('max', futureDate.toISOString().slice(0,10)); });
上面的代碼展示了如何設置日期選擇器的最大值和最小值。在頁面加載完成時,獲取到當前日期,然后分別給日期選擇器的最小值和最大值屬性賦值,這里把日期值格式化成ISO格式,只取年月日部分,忽略其它時區信息等。
Jquery Mobile提供了方便的日期選擇器控件來簡化開發工作。開發者可以根據自己的需求,通過設置日期選擇器的最大值和最小值等屬性來完成各種日期操作。