iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
2
Modern Web

30天學習30套前端技術(2018年)系列 第 5

[十分鐘學習] pickadate.js - 日期/時間選擇器

  • 分享至 

  • xImage
  •  

example1

對行動裝置友善、響應式且輕量化的日期/時間選擇器

GitHub Star: 7,200
Javascripting Overall: 81%
瀏覽器: ChromeFirefoxIE8+
RWD: 支援
License: MIT


《安裝》

  • CDN

      <!-- jQuery v1.9.1 -->
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <!-- pickadate.js v3.5.6 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/classic.css" rel="stylesheet" />
      <link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/themes/classic.date.css" rel="stylesheet" />
      <link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/themes/classic.time.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.date.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.time.js"></script>
    
  • Bower

      bower install pickadate
    

《範例》

  • 選擇日期

      <input type="text" class="example" />
      <script>
      	$( ".example" ).pickadate();
      </script>
    
  • 選擇時間

    example2

      <input type="text" class="example" />
      <script>
      	$( ".example" ).pickatime();
      </script>
    

《延伸》

  1. pickadate.js
  2. amsul/pickadate.js: (Looking for Project Maintainers) The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

上一篇
[十分鐘學習] ALERTIFY.js - 提示訊息美肌
下一篇
[十分鐘學習] Chosen - 下拉式選單全面進化
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言