iT邦幫忙

0

bootstrap ClockPicker

各位大大好:
想請問 ClockPicker要怎麼跑出來,我放網頁都無法點出時鐘- -? 請問像bootstrap語法要怎麼寫入mysql的資料庫呢? 也是跟平常用html一樣嗎?謝謝

以及欄位要如何縮小,我看教學的網頁欄都會縮短..

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="http://www.ee.nsysu.edu.tw/key/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="http://www.ee.nsysu.edu.tw/key/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css">
<script src="http://www.ee.nsysu.edu.tw/key/bootstrap/js/jquery.min.js"></script>
<script src="http://www.ee.nsysu.edu.tw/key/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".change").each (function(){
  $(this).on("click",function(event){
  
  var s=$(this).attr("value");
  
  $("h5").text("日期:"+s);
  
  alert($(this).attr("value"));
      
   });
   });
});

$('.clockpicker').clockpicker({
    placement: 'top',
    align: 'left',
    donetext: 'Done'
});             
</script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
                 
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
            
            <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      
     
         <div class="input-group clockpicker" >
    <input type="text" class="form-control" value="09:30">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
    </div>

      
      
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

看更多先前的討論...收起先前的討論...
froce iT邦高手 1 級 ‧ 2018-01-26 08:58:40 檢舉
1.請用瀏覽器的開發者模式,先看看有沒有什麼錯誤訊息。
2.建議先寫個簡單一點的網頁來熟悉組件運作。
froce iT邦高手 1 級 ‧ 2018-01-26 09:19:19 檢舉
然後剛剛幫你看了一下,或許是出在 placement: 'top', 有可能其實組件已經出來了,但是因為位置的關係超出畫面。

mysql 的話要看你送出到後端傳回的 request 字串,時間通常會和日期結合,轉換成後端程式語言的時間(datetime)物件,並看有沒有需要處理時區,再存回資料庫。
或者是你另有用途,直接存成字串也行。端看你的處理過程。

縮小的話,官方範例是用 css 控制的,.input-group 都被給定寬度了。
''
.input-group {
width: 110px;
margin-bottom: 10px;
}
''
mayyola iT邦新手 3 級 ‧ 2018-01-26 21:14:56 檢舉
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" type="text/css"href="http://www.ee.nsysu.edu.tw/key/bootstrap/dist/bootstrap-clockpicker.css">

<link rel="stylesheet" type="text/css"href="http://www.ee.nsysu.edu.tw/key/bootstrap/dist/bootstrap-clockpicker.min.css">

<script type="text/javascript" src="http://www.ee.nsysu.edu.tw/key/bootstrap/dist/bootstrap-clockpicker.js"></script>
<script type="text/javascript" src="http://www.ee.nsysu.edu.tw/key/bootstrap/dist/bootstrap-clockpicker.min.js"></script>

<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

</head>
<div class="input-group clockpicker">
<input type="text" class="form-control" value="12:34">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</html>
mayyola iT邦新手 3 級 ‧ 2018-01-26 21:15:55 檢舉
我照https://weareoutman.github.io/clockpicker/第一個範例跑..不知道為甚麼也不行- -

1 個回答

0
froce
iT邦高手 1 級 ‧ 2018-01-30 09:30:45
最佳解答
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" type="text/css"href="http://www.ee.nsysu.edu.tw/key/bootstrap/dist/bootstrap-clockpicker.css">

<link rel="stylesheet" type="text/css"href="http://www.ee.nsysu.edu.tw/key/bootstrap/dist/bootstrap-clockpicker.min.css">

<script type="text/javascript" src="http://www.ee.nsysu.edu.tw/key/bootstrap/dist/bootstrap-clockpicker.js"></script>
<script type="text/javascript" src="http://www.ee.nsysu.edu.tw/key/bootstrap/dist/bootstrap-clockpicker.min.js"></script>

<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

</head>
<div class="input-group clockpicker">
<input type="text" class="form-control" value="12:34">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</html> 

1.你沒有 body block,雖然現代 browser 是會幫你加,不過不建議。
2.bootstrap 需要 jQuery,你沒載入。

我要發表回答

立即登入回答