喵喵笨兔 の 喵喵的家~遊戲天地 - 首頁(上版面)
喵喵笨兔 の 喵喵的家~遊戲天地 - 首頁(左版面)
首  頁 最新消息 遊戲攻略 遊戲影片 遊戲圖片 下載區 學習分享 留言板 FB粉絲團
 喵喵笨兔 の 喵喵的家~遊戲天地 - Bootstrap 3 Datepicker 日期表簡介 & My97 DatePicker 日期選擇器 ^^

Bootstrap 3 Datepicker 日期表簡介 & My97 DatePicker 日期選擇器,也就是彈出日期表讓您選擇唄 ^^!

Bootstrap 3 Datepicker v4 Docs 日期表

  Bootstrap 3 Datepicker 提供的日期表,也就是點擊後,會自動彈動年、月、日的日期表供您選擇唄!^^

  Bootstrap 3 Datepicker 主站及下載:https://eonasdan.github.io/bootstrap-datetimepicker/

  Bootstrap 3 Datepicker v4 本小站下載: 含範例程式碼及fonts & Bootstrap 3.3.7& jQuery 1.11.3 ~ 3.2.1

 使用 Bootstrap 3 Datepicker 必備條件:

  1. Bootstrap 3 Datepicker 程式碼可到 Bootstrap 3 Datepicker 主站,或本小站下載檔案內觀看。
  2. 須引入 bootstrap-datetimepicker.css、bootstrap-datetimepicker.js、moment-with-locales.js、bootstrap.css、jquery.js (2.11~3.0)
  3. 日期表中內含日期、時間小圖案字型,若要依原程式碼的小圖案,則須引入 GlyphSearch 符號圖案字型:https://glyphsearch.com/ 的 glyphicons (可參考笨兔隨手筆記編號 html_013 的 GlyphSearch使用簡介),或存放 glyphicons 的 \fonts (本小站下載檔案中內含 \fonts)

範例程式碼:以 Bootstrap 3 Datepicker 的二個程式碼來展示,主要看紅色字部份唄!(筆者網站內存放 glyphicons 的 \fonts,所以沒引入 glyphicons)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 Datepicker</title>

<link href="css/bootstrap-datetimepicker.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/moment-with-locales.js"></script>
<script src="js/bootstrap-datetimepicker.js"></script>

</head>
<body>

<h2>Bootstrap 3 Datepicker 日期表</h2>

<h3>Using Locales</h3>
      <p>locale 是設定國別地區顯示語言,未設是英文. 台灣繁中 zh-tw </p>
  <p>其他語言,詳看 <a href="https://github.com/moment/moment/tree/develop/locale" target="_blank">https://github.com/moment/moment/tree/develop/locale</a></p>

<div class="container">
  <div class="row">
  <div class='col-sm-6'>
  <div class="form-group">
  <div class='input-group date' id='datetimepicker2'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
  <span class="glyphicon glyphicon-calendar"></span>
  </span>
  </div>
  </div>
  </div>
  <script type="text/javascript">
      $(function () {
      $('#datetimepicker2').datetimepicker({
      locale: 'zh-tw'
      });
      });
  </script>
  </div>
  </div>

<h3>No Icon (input field only):</h3>
      <P>沒有小圖示,直接點擊輸入欄位即會顯示日期表</P>

  <div class="container">
  <div class="row">
  <div class='col-sm-6'>
  <input type='text' class="form-control" id='datetimepicker4' />
  </div>
  <script type="text/javascript">
      $(function () {
      $('#datetimepicker4').datetimepicker({
		  locale: 'zh-tw'
		  });
      });
  </script>
  </div>
  </div>

</body>
      </html>

【點擊看範例結果】


My97 DatePicker 日期選擇器

 這是網上找到的,笨兔覺得相當好用,若不想用 Bootstrap 3 Datepicker 這個須引用一堆 css、js,不妨用這套,只要引入它的 WdatePicker.js,之後在要輸入的欄位加入onClick="WdatePicker() 語法,即可輕鬆使用了!^^

  My97 DatePicker 主站及下載:http://www.my97.net/  

  本小站下載:My97 DatePicker v4.8

範例程式碼:主要看紅色字部份唄!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>喵喵笨兔 の 喵喵的家~遊戲天地 - Bootstrap 3 Datepicker 日期表簡介 & DatePicker 日期選擇器 ^^</title>
  <script language="javascript" type="text/javascript" src="DatePicker/WdatePicker.js"></script>
</head>
<body>
  <p> class="Wdate" 是出現日期小圖案</p>
  <input class="Wdate" type="text" onClick="WdatePicker()"> <font color=red>←點我彈出日期控制項</font>
</body>
</html>

【點擊看範例結果】

笨兔隨手筆記於 2017/10/24

喵喵笨兔 の 喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.lionfree.net
http://qo3op.asuscomm.com/vvv
https://uoedgpkhyfwzmd7zua8myg-on.drv.tw/vvv