iT邦幫忙

2018 iT 邦幫忙鐵人賽
1
Modern Web

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

[十分鐘學習] datedropper - 活潑風格日期選擇器

example1

微型但功能強大的的jQuery時間選擇器。內建風格相當活潑可愛,可增加網站的活力

GitHub Star: 1,700
Javascripting Overall: 54%
瀏覽器: ChromeFirefoxIE9+
RWD: 支援
License: MIT


《安裝》

  • CDN

      <!-- jQuery v1.9.1 -->
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <!-- datedropper v3.0.0 -->
      <!-- 注意,此非正式CDN僅供測試用 -->
      <link href="https://www.6666design.com/cdn/datedropper/3.0.0/datedropper.min.css" rel="stylesheet">
      <script src="https://www.6666design.com/cdn/datedropper/3.0.0/datedropper.min.js"></script>
    
  • npm

      $ npm install datedropper
    

《範例》

  • 日期選擇棄

      <!--
      	屬性設定[註1]
      	data-lang: 語言(列表[註2])
      	data-default-date: 預設日期
      	data-format: 日期格式
      	data-fx: 啟用動態效果
      	data-fx-mobile: 啟用行動裝置上動態效果
      	data-init-set: 爛位初始值為預設日期
      	data-large-mode: 行事曆模式
      	data-large-default: 行事曆模式為預設畫面
      	data-max-year: 最大年
      	data-min-year: 最小年
      	data-modal: 燈箱模式
      	data-theme: 自訂模板 
      -->
      <input type="text" 
      	data-lang="zh"
      	data-default-date="2-12-2018"
      	data-disabled-days="false"
      	data-format="m-d-Y"
      	data-fx="true"
      	data-fx-mobile="true"
      	data-init-set="false"
      	data-large-mode="true"
      	data-large-default="false"
      	data-max-year="2020"
      	data-min-year="1970"
      	data-modal="false"
      />
      <script>
      	$( "input" ).dateDropper();
      </script>
    

    [註1]

    屬性 描述
    data-lang 語言(列表[註2])
    data-default-date 預設日期
    data-format 日期格式
    data-fx 啟用動態效果
    data-fx-mobile 啟用行動裝置上動態效果
    data-init-set 爛位初始值為預設日期
    data-large-mode 行事曆模式
    data-large-default 行事曆模式為預設畫面
    data-max-year 最大年
    data-min-year 最小年
    data-modal 燈箱模式
    data-theme 自訂模板

    [註2]

    參數 描述
    ar Arabic
    it Italian
    hu Hungarian
    gr Greek
    es Espanol
    da Dansk
    de Deutsch
    nl Dutch
    fr Francais
    pl Polski
    pt Portuguese
    si Slovenian
    uk Ukrainian
    ru Russian
    tr Turkish
    ko Korean
    zh Chinese

《延伸》

  1. datedropper jQuery UI datepicker plugin
  2. felicegattuso/datedropper: datedropper is a jQuery plugin that provides a quick and easy way to manage dates for input fields.

上一篇
[十分鐘學習] ScrollReveal - 動態顯示內容
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言