2014年6月11日 星期三

jQuery UI 日期選擇 Datepicker 加上時分秒

jQuery UI 的 Datepicker 只能選擇年月日，若要可以選時分秒，可以另外加 Timepicker
Timepicker 網站：http://trentrichardson.com/examples/timepicker/

Timepicker 有兩個檔案，
JS檔：jquery-ui-timepicker-addon.js
CSS檔：jquery-ui-timepicker-addon.css

另外還需要 jQuery、jQuery UI(包含Datepicker)

簡單範例：
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/jquery-ui-1.10.4.min.css">
<link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
    $(function() {
        $('#mydate').datetimepicker({
            "dateFormat": "yy-mm-dd",
            "timeFormat": "HH:mm"
          //"timeFormat": "HH:mm:ss"
        });
        //$('#mydate').timepicker({"timeFormat": "HH:mm:ss"}); //只有 時、分、秒 用 timepicker
    });
</script>
</head>
<body>
    <input type="text" id="mydate">
</body>
</html>

張貼者： 於
標籤：

16 則留言:

  1. 匿名2014年6月22日 清晨5:53

    有事想請教一下,

    如何將
    $(function() {
    $('#mydate').datetimepicker({
    "dateFormat": "yy-mm-dd",
    "timeFormat": "HH:mm"
    });
    崁入另一個 JS 理面.

    回覆刪除
    回覆
    1. XYZ2014年6月23日 凌晨12:49

      您好，不太懂您的意思。
      如果是指放到另外乾淨的JS檔，直接放入JS檔即可。
      如果是指跟其他的JS程式整合，就要看兩者是否會互相影響了。

      刪除
    2. 光2014年6月23日 上午11:59

      我整理一下, 我有兩個 JS,

      第1個JS 中的這段 ＜input size=8 id=timepicker type=text name=dd_time_U[] value=＞ 的
      id=timepicker 要 呼叫 第2個JS , 因觸發 key 是 id=timepicker, 所以想問要怎麼呼叫?


      第 1 個 JS:
      function Insert_Traffic(i)
      {
      var table = document.getElementById(myTable+i);
      var newRow = table.insertRow(-1);
      newRow.insertCell().innerHTML =
      '＜input size=8 id=timepicker type=text name=dd_time_U[] value=＞';
      newRow.insertCell(-1).innerHTML = '';
      }


      第 2 個 JS:
      ＜script type=text/javascript＞
      $(function()
      {
      $(#timepicker).timepicker
      ({showSecond: true, timeFormat: 'hh:mm:ss', hourGrid:2, minuteGrid:5});
      });
      ＜/script＞

      刪除
    3. XYZ2014年6月24日 中午12:53

      您好，可以使用 jquery 的 on 綁定事件，我做了個範例如下
      http://demo.cinc.biz/datetimepicker/

      另外因為 id 應該唯一，所以就沒使用 #timepicker，改使用 table[id^=myTable] input[name=dd_time_U\\[\\]]

      刪除
    4. 匿名2014年6月26日 清晨6:40

      我試了有一些怪怪, 就是

      我載入的 jq 的 js 是
      jquery-ui.js
      jquery-ui-slide.min.js
      jquery-ui-timepicker-addon.js

      你載入的 jq 的 js 是
      jquery-1.11.1.min.js
      jquery-ui-1.10.4.min.js
      jquery-ui-timepicker-addon.js

      用你載入的 JS 就點的出時間表, 我的就不行,
      是因為 JQ 載的 JS 不一樣嗎, 還是 JQ 呼叫的
      變數不一樣.


      刪除
    5. XYZ2014年6月27日 上午11:48

      看您的檔名，好像少載入 jquery，
      總共需要載入三種東西，以我的為例
      1.jquery
      http://jquery.com/
      (jquery-1.11.1.min.js)

      2.jquery ui
      http://jqueryui.com/
      (jquery-ui-1.10.4.min.js)
      jquery ui 裡面含很多小工具(datepicker、dialog、slider...)
      至少要包含datepicker，我這邊是全部下載，都包含在 jquery-ui-1.10.4.min.js 裡面

      3.timepicker
      (jquery-ui-timepicker-addon.js)

      我看您的檔名，似乎少了第1個 jquery。

      刪除
  2. 匿名2014年6月26日 清晨7:47

    想請教，因小弟是初學，有推薦的 java 書。

    回覆刪除
    回覆
    1. XYZ2014年6月27日 上午11:36

      您好，我想您是問 JavaScript 吧?
      初學的話，我是覺得看網路上的教學，就已經足夠。
      倒是建議可以熟悉瀏覽器的 開發者工具，方便 debug

      如果您習慣看實體書學的話，真的要買，
      可以去書局翻一下書的內容，找一本自己看得懂、看得下去的書，
      因為有時別人推薦的，自己可能看了幾頁，
      才發現書本的表達方式，不是自己喜歡的，結果可能看都看不完。

      以上個人經驗，供參考。

      刪除
  3. 匿名2014年6月30日 清晨6:26

    想在請問一下, 我選擇第2項時, 租車出發地：111 , 租車出發地：222 時
    會變成 公車上車站牌：111,公車上車站牌：222 ,
    因目前都只會變 公車上車站牌：111 , 公車上車站牌：222 都不會同時變.

    ＜script type="text/javascript"＞
    function Show(page, tag)
    {
    var i = 1;
    var el;

    while (el = document.getElementById(tag + i))
    {
    if (i == page)
    el.style.display = 'block';
    else
    el.style.display = 'none';
    i++;
    }
    }
    ＜/script＞
    ＜p＞

    ＜td＞
    交通方式：＜select onchange="Show(parseInt(this.value), 'selected');"＞
    ＜option selected="selected" value="1"＞租車＜/option＞
    ＜option value="2"＞公車＜/option＞
    ＜option value="3"＞開車＜/option＞
    ＜/select＞

    ＜div style="display:block" id="selected1"＞
    租車出發地：111 ＜/div＞
    ＜div style="display:block" id="selected2"＞
    租車出發地：222 ＜/div＞

    ＜div style="display:none" id="selected2"＞
    公車上車站牌：111 ＜/div＞
    ＜div style="display:none" id="selected2"＞
    公車上車站牌：222 ＜/div＞

    ＜/td＞

    回覆刪除
    回覆
    1. XYZ2014年7月1日 晚上11:55

      請問您想要的效果是，選到某個下拉選項時，value=2，則 id="selected2" 的 div 都隱藏嗎?
      如果是這樣，會有問題，因為 id 應該是唯一的，這樣的話
      document.getElementById(tag + i) 只會選到一個符合條件的。

      刪除
  4. 匿名2014年7月2日 上午10:16

    想要的效果是，選到下拉選項時，value=1 就顯示 , ＜div style="display:block" id="selected1"＞
    租車出發地：111 ＜/div＞＜div style="display:block" id="selected2"＞租車出發地：222 ＜/div＞

    想要的效果是，選到下拉選項時，value=2 就顯示 , ＜div style="display:none" id="selected2"＞
    公車上車站牌：111 ＜/div＞＜div style="display:none" id="selected2"＞公車上車站牌：222 ＜/div＞

    這樣怎麼寫才對

    回覆刪除
    回覆
    1. XYZ2014年7月3日 下午6:17

      我前一個回覆打錯了，本來是想問選到後都"顯示"嗎?

      我看您的 value=1，也顯示了 ＜div style="display:block" id="selected2"＞租車出發地：222 ＜/div＞

      所以我稍微改一下，看是否是您想要的效果，在以下連結
      http://jsfiddle.net/55nwe/

      刪除
  5. 匿名2014年8月1日 中午12:03

    想請教一下,

    使用 ＜div data-role="panel"＞ 捲動時, 是限制 panel 不回主內容捲動?

    回覆刪除
    回覆
    1. XYZ2014年8月1日 下午6:12

      請問您是指 jQuery Mobile 嗎?
      另外，我不太懂"捲動時，是限制 panel 不回主內容捲動"的意思?

      刪除
  6. Unknown2017年1月4日 晚上9:15

    您好，
    看完您的文章後，
    我有一個實作的疑問，
    請問datetimepicker如何像datepicker一樣選擇一個日期時間範圍，

    datepicker是通過如下的程式碼。
    onClose: function( selectedDate ) {
    $( "#to" ).datepicker( "option", "minDate", selectedDate );
    請問datetimepicker要如何設置呢？

    回覆刪除
    回覆
    1. XYZ2017年1月6日 清晨5:51

      官網 Examples 裡有個 Time Ranges 範例，內容如下，不知是否可達到您的需求。
      var startDateTextBox = $('#range_example_1_start');
      var endDateTextBox = $('#range_example_1_end');

      startDateTextBox.datetimepicker({
      timeFormat: 'HH:mm z',
      onClose: function(dateText, inst) {
      if (endDateTextBox.val() != '') {
      var testStartDate = startDateTextBox.datetimepicker('getDate');
      var testEndDate = endDateTextBox.datetimepicker('getDate');
      if (testStartDate > testEndDate)
      endDateTextBox.datetimepicker('setDate', testStartDate);
      }
      else {
      endDateTextBox.val(dateText);
      }
      },
      onSelect: function (selectedDateTime){
      endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
      }
      });
      endDateTextBox.datetimepicker({
      timeFormat: 'HH:mm z',
      onClose: function(dateText, inst) {
      if (startDateTextBox.val() != '') {
      var testStartDate = startDateTextBox.datetimepicker('getDate');
      var testEndDate = endDateTextBox.datetimepicker('getDate');
      if (testStartDate > testEndDate)
      startDateTextBox.datetimepicker('setDate', testEndDate);
      }
      else {
      startDateTextBox.val(dateText);
      }
      },
      onSelect: function (selectedDateTime){
      startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
      }
      });

      刪除

訂閱： 張貼留言 (Atom)