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 - 動態顯示內容
下一篇
[十分鐘學習] Cleave.js - 欄位格式化工具
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言