Bootstrap-material-datetimepicker MyDemo

by styaue

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://t00rk.github.io/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css">
<script src="https://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://t00rk.github.io/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"></script>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
    <!--文字框，type不可填date，自訂一個class加上去-->
    <input type="text" placeholder="請選擇日期" class="myDatePicker" />

SCSS

.dtp-buttons>button.btn {
    border: none;
    border-radius: 2px;
    position: relative;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.87);
    padding: 5px 16px;
    font-size: 12px;
    margin: 10px 1px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    will-change: box-shadow, transform;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: 0;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
  }

  .dtp-buttons>button.btn:hover,
  .dtp-buttons>button.btn:focus {
    background-color: rgba(153, 153, 153, 0.2);
  }

JavaScript

//當做全域參數使用
  let bootstrapMaterialDatePickerOption = {
    time: false,
    nowButton: true,
    clearButton: true,
    lang: 'zh-tw',
    format: 'YYYY/MM/DD'
  };
  $(function() {
    $('.myDatePicker').bootstrapMaterialDatePicker(bootstrapMaterialDatePickerOption);
  });