[jquery]如何在畫面上使用漂亮的datepicker, timepicker

  • 478
  • 0
  • 2022-06-23

[jquery]如何在畫面上使用漂亮的datepicker, timepicker

這邊採用的是jquery datepicker以及jquery datetimepicker。

下面是範例html以及引用的.js檔案喔

<div class="form-group">
    <label for="txtStartDate">開始日期/時間</label>
    <div class="form-inline">
        <input type="text" id="txtStartDate" class="datepicker form-control">
        <input type="text" id="txtStartTime" class="starttimepicker form-control">
    </div>


</div>
<div class="form-group">
    <label for="txtEndDate">結束日期/時間</label>
    <div class="form-inline">
        <input type="text" id="txtEndDate" class="datepicker form-control">
        <input type="text" id="txtEndTime" class="endtimepicker form-control">
    </div>

</div>
<!--選擇日期-->
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!--選擇時間-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<script type="text/javascript">
    //初始化jquery選擇日期套件、初始化jquery選擇時間套件
    var today = new Date();
    $(".datepicker").datepicker();//利用jquery套件選擇日期
    //$('.datepicker').datepicker({ dateFormat: 'yy-mm-dd' });//要客製化日期格式的話,可把這行註解拿掉,並把上一行註解

	//修正datepicker選擇某個日期之後,會自動跳到畫面上第一個textbox的問題
	$('#txtStartDate').on('change', function () {
		setTimeout(function () {
			$('#divModal').focus();//focus到另一個按鈕element,避免被發現跳到畫面上第一個textbox XD
		}, 125);
	});

    //客製化日期的初始值
    //開始時間與結束時間預設間隔1小時
    //預設開始時間帶入下一個小時,如果會議的結束時間已經超過下班時間
    //則自動帶入明天早上9:00
    var defaultStartTime;
    var defaultEndTime;
    if (parseInt(today.getHours() + 2) >= 18) {
        defaultStartTime = '9'
        defaultEndTime = '10';
    }
    else {
        defaultStartTime = (today.getHours() + 1).toString()
        defaultEndTime = (today.getHours() + 2).toString()
    }

    //預設日期時間帶入今天    
    var dateString = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear();
    $("#txtStartDate").val(dateString);
    $("#txtEndDate").val(dateString);
	
	

    //預設時間範圍:8:30~17:30
    $('.starttimepicker').timepicker({//利用jquery套件選擇時間
        timeFormat: 'HH:mm',
        interval: 30,
        minTime: '8:30',
        maxTime: '17:30',        
        defaultTime: defaultStartTime + ':00',
        startTime: '08:30',
        dynamic: false,
        dropdown: true,
        scrollbar: true,
        //zindex: 9999999,//這行平常不用,但如果你的timepicker是放在modal開窗裡面,就必須加上zindex
    });


    $('.endtimepicker').timepicker({//利用jquery套件選擇時間
        timeFormat: 'HH:mm',
        interval: 30,
        minTime: '8:30',
        maxTime: '17:30',
        /* defaultTime: today.getHours.toString() + ':00',*/
        defaultTime: defaultEndTime + ':00',
        startTime: '08:30',
        dynamic: false,
        dropdown: true,
        scrollbar: true,
        //zindex: 9999999,//這行平常不用,但如果你的timepicker是放在modal開窗裡面,就必須加上zindex
    });
	
	
</script>


Web畫面看起來如下:


這篇大概是這樣…

20220617補充 上面的jquery datepicker在bootrap 的modal開窗裡面,若是存在兩個以上的日期欄位,將會導致第二個日期欄位的選擇日期失效。              
建議此時改成採用bootrap datepicker,範例如下:
首先於您的網頁引用下列.js以及.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>        


html的textbox如下:(其實跟上面的textbox一樣,哈哈)

<div class="row">
	<div class="col-12">
		<div class="form-group row" style="margin-bottom:10px;margin-left:1px;">
			<label class="col-form-label">日期(起):</label>
			<div class="form-inline">
				<input type="text" id="txtStartDate" class="datepicker form-control">

			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-12">
		<div class="form-group row" style="margin-bottom:10px;margin-left:1px;">
			<label  class="col-form-label">日期(迄):</label>
			<div class="form-inline">
				<input type="text" id="txtEndDate" class="datepicker form-control">

			</div>
		</div>
	</div>
</div>

 

接著在javascript端初始化之後即可選擇日期

//設定datepicker    
$('.datepicker').datepicker({
	format: 'yyyy/mm/dd',
	forceParse: false,
	
});  


最後畫面看起來如下:兩個textbox都可以正常使用日期選擇器,畫面沒有上面的日期選擇器那麼美觀就是了~但他就是對於bootrap modal開窗的相容性較好,若是您的畫面上有多個日期欄位,務必採用bootrap datepicker,若是只有一個日期欄位,那就…挑自己喜歡的用吧!



參考資料:
工作經驗
使用 Bootstrap datepicker 動態顯示日期