Vue Bootstrap3 Datepicker

by cactus77kiki

HTML

<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>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-bootstrap-datetimepicker/5.0.1/vue-bootstrap-datetimepicker.min.js"></script>

<div id="app">
<input type="button" class="btn btn-primary" value="reset" v-on:click="resetB"/>
<div class="container">
  <div class="row">
    <div class="col-md-12">      
      <date-picker name="date" v-model="date" :config="options"></date-picker>
      <p>
        v-model: {{date}}
      </p>
    </div>
  </div>
</div>
<div class="form-inline tddatepicker">
                    <div class="form-group">                       
                        <div class="col-sm-12">
                            <date-picker name="sdate" v-model="Qsin_date" v-bind:config="options" class="inputdatepicker"></date-picker>
                        </div>
                    </div>
                    ～
                    <div class="form-group">                        
                        <div class="col-sm-12">
                            <date-picker name="edate" v-model="Qein_date" v-bind:config="options" class="inputdatepicker2"></date-picker>
                            (YYYY/MM/DD)
                        </div>
                    </div>                    
                </div>
<br/>
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
       ...

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

/*
ref:https://jsfiddle.net/ankurk91/01407frf/
doc:http://eonasdan.github.io/bootstrap-datetimepicker/
official:https://www.npmjs.com/package/vue-bootstrap-datetimepicker
*/

var datepickerComponent = Vue.extend({
  //v-el:select
  template: '<div class="input-group date" v-el:inputgroup>' +
    '<input type="text" class="form-control" v-model="value"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>' +
    '</div>',
  props: {
    //value: '2015-01-01'	//預設值
  },
  data: function() {
    return {};
  },
  ready: function() {
    $(this.$els.inputgroup).datepicker({
      format: 'YYYY/M/D',
      autoclose: true
    });
  }
});

Vue.component('date-picker', VueBootstrapDatetimePicker);
$.extend(true, $.fn.datetimepicker.defaults, {
  icons: {
    /*
    today: 'fas fa-calendar-check',
    */
    time: 'glyphicon glyphicon-time',
    date: '	glyphicon glyphicon-calendar',
    up: 'glyphicon glyphicon-arrow-up',
    down: 'glyphicon glyphicon-arrow-down',
    previous: 'glyphicon glyphicon-chevron-left',
    next: 'glyphicon glyphicon-chevron-right',
    today: 'glyphicon glyphicon-screenshot',
    clear: 'glyphicon glyphicon-trash',
    close: 'glyphicon glyphicon-remove-circle'
  },    
  tooltips: {        
        /*clear: 'Clear selection',
        close: 'Close the picker',        
        selectMonth: 'Select Month',
        prevMonth: 'Previous Month',
        nextMonth: 'Next Month',        
        selectYear: 'Select Year',
        prevYear: 'Previous Year',
        nextYear: 'Next Year',
        today: 'Go to today',
        selectDecade: 'Select Decade',
        prevDecade: 'Previous Decade',
        nextDecade: 'Next Decade',
        prevCentury: 'Previous Century',
        nextCentury: 'Next Century'*/
        clear: '清除選取',
        close: '關閉月曆',
        selectMonth: '選取月份',
        prevMonth: '前一月',
        nextMonth: '下一月',
        selectYear: '選取年份',
        prevYear: '前一年',
        nextYear: '下一年'
   ...