vue.js+bootstrap datepicker try

實驗中.實驗結果：vue.js div內有問題，無法點出月曆.需確認問題

by cactus77kiki

HTML

<!--jquery-->
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<!--bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--time-->
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/zh-tw.js"></script>
<!--datepicker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>


<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>

  {{selectdate}}
    
</div>
<div class="input-group" id="datetimepicker1">
  <input type="text" class="form-control input-sm"/>
   <span class="input-group-addon" title="月曆">
     <i class="glyphicon glyphicon-calendar"></i>
   </span>
</div> 


<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({
        	format:"YYYY/M/D"//,
          //defaultDate:new Date()	//give default value
        });
    });
</script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

JavaScript

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ],
    selectdate:"2018/5/3"
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }//,
  /*mounted: function(){
  	$('#datetimepicker1').datepicker({ 
    	selectdate: this.selectdate 
    });
  }*/
})

/*
ref:
https://www.npmjs.com/package/vue-bootstrap-datetimepicker
https://github.com/charliekassel/vuejs-datepicker?ref=madewithvuejs.com#demo
*/