今天看到一個網友分享的一篇文章，有關輕量級的日期時間控件Pikaday，感覺很實用。在這里總結一下,方便日后使用。因為之前也遇到過類似的問題，My97datepicker插件樣式過于老舊，但又沒有其它更符合要求的日期時間插件。

Pikaday插件的樣式跟Bootstrap類似，簡潔美觀。如下圖所示：

在線演示地址：http://www.travisup.com/demo/plugins/pikaday/index.html

可以去這里下載：http://download.csdn.net/detail/lmb55/9452173

下面我簡單總結一下如何在js代碼中獲取Pikaday日期事件框的值：

<script>var picker = new Pikaday({field: document.getElementById('datepicker1'),firstDay: 1,minDate: new Date('2010-01-01'),maxDate: new Date('2020-12-31'),yearRange: [2000,2020]});var picker = new Pikaday({field: document.getElementById('datepicker2'),firstDay: 1,minDate: new Date('2010-01-01'),maxDate: new Date('2020-12-31'),yearRange: [2000,2020]});function getValue(){var startData = document.getElementById('datepicker1').value;var endData = document.getElementById('datepicker2').value;var startDateArray = startData.split("-");console.log('開始年份' + startDateArray[0] );console.log('開始月份' + startDateArray[1] );console.log('開始日期' + startDateArray[2] );var endDateArray = endData.split("-");console.log('結束年份' + endDateArray[0] );console.log('結束月份' + endDateArray[1] );console.log('結束日期' + endDateArray[2] );} </script>

總結

以上是生活随笔為你收集整理的轻量级的日期时间控件Pikaday的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。