Vue.js & CTK范围时间选择器。它是如何工作的？

Question

我刚刚发现了CTK Date Time Picker，但我只能运行Date Time Picker。我在文档中找不到如何运行范围日期选择器

这是该组件的简单代码：

<div id="app">
  <vue-ctk-date-time-picker 
  label="Hello World!" 
  v-model="date" 
 
 id=RangeDatePicker
  label="Select date Range"
  format='YYYY-MM-DD'
  formatted='ll'
  range=true
   only-date=true
    dark="false">
                            
                                   
  </vue-ctk-date-time-picker>
 
</div>

Range Date Picket示例：

https://chronotruck.github.io/vue-ctk-date-time-picker/

文档：

https://github.com/chronotruck/vue-ctk-date-time-picker

如果有人使用CTK日期选择器，可以提供帮助。那就太好了。谢谢。

Answer 1

我只是在codePen上构建了一个工作示例：

https://codepen.io/bozieu/pen/vPWjdP?editors=1111

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vue-ctk-date-time-picker@2.0.6/dist/vue-ctk-date-time-picker.css">
<div id="app">
    <vue-ctk-date-time-picker label="Hello World!" v-model="value" :range="true">
    </vue-ctk-date-time-picker>
</div>

<script src="https://unpkg.com/vue" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-ctk-date-time-picker@2.0.6/dist/vue-ctk-date-time-picker.umd.min.js" charset="utf-8"></script>

<script type="text/javascript">
    Vue.component('vue-ctk-date-time-picker', window['vue-ctk-date-time-picker']);
    new Vue({
        el: '#app',
        data () {
            return {
                value: null
            }
        }
    });
</script>

Answer 2

下面是一个有效的示例。Range自动仅显示日期，format参数控制选定的日期格式，在本例中：

{"start":"20191202"，"end":"20191211"}

我发现日期选择器是最灵活和可定制的。我同时使用它来表示日期和日期和时间。这个实例恰好是内联的，因为我在单选按钮选择Range选项时隐藏和显示了它。

请注意每个属性前面的冒号和字符串属性值的双引号中的单引号。

希望这对你有帮助。

          <vue-ctk-date-time-picker
            v-model="dateRange"
            :inline="true"
            :range="true"
            :color="'var(--C_TRUEGREEN)'"
            :custom-shortcuts="shortcuts"
            :format="'YYYYMMDD'"
            :formatted="'MM/DD/YYYY'"
            :label="'Select date'"
          >
          </vue-ctk-date-time-picker>