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"
        });
        //$('#mydate').timepicker({"timeFormat": "HH:mm"}); //只有 時、分、秒 用 timepicker
    });
</script>
</head>
<body>
    <input type="text" id="mydate">
</body>
</html>

16 則留言:

  1. 有事想請教一下,

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

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

      刪除
    2. 我整理一下, 我有兩個 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. 您好,可以使用 jquery 的 on 綁定事件,我做了個範例如下
      http://demo.cinc.biz/datetimepicker/

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

      刪除
    4. 我試了有一些怪怪, 就是

      我載入的 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. 看您的檔名,好像少載入 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. 想請教,因小弟是初學,有推薦的 java 書。

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

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

      以上個人經驗,供參考。

      刪除
  3. 想在請問一下, 我選擇第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. 請問您想要的效果是,選到某個下拉選項時,value=2,則 id="selected2" 的 div 都隱藏嗎?
      如果是這樣,會有問題,因為 id 應該是唯一的,這樣的話
      document.getElementById(tag + i) 只會選到一個符合條件的。

      刪除
  4. 想要的效果是,選到下拉選項時,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. 我前一個回覆打錯了,本來是想問選到後都"顯示"嗎?

      我看您的 value=1,也顯示了 <div style="display:block" id="selected2">租車出發地:222 </div>

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

      刪除
  5. 想請教一下,

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

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

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

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

    回覆刪除
    回覆
    1. 官網 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') );
      }
      });

      刪除