vue滑动选择器(一键开启时间选择器)

Posted 2023-04-23

参考技术A # vue滑动选择器(一键开启时间选择器)(移动端和PC端都能使用) 

### 先来张效果图

安装 npm install time_check_jiangji

引入 import Time from 'time_check_jiangji'

## 直接上干货，demo

```javascript

<template>

  <div class="App">

    <div @click="timeShow = true">点击显示Time组件</div>

    <Time v-if="timeShow" :cancleFn="cancleFn" :time="true" :defaultValue="[2019, 6, 5, '上午', '随便2']"  :arr="[['上午', '下午'], ['随便1', '随便2']]" @click="clickFn" :arrayFirstdayAndLastday="['2012.6.8', '2019.6.10']" :stylBtn="'color': '#00ffff'" />

  </div>

</template>

<script>

import Time from 'time_check_jiangji'

export default

  name: 'App',

  components:

    Time

  ,

  data()

    return

      timeShow: true

    ;

  ,

  methods:

    clickFn (e)

      console.log(e)

      this.timeShow = false

    ,

    cancleFn ()

      console.log('取消')

      this.timeShow = false

   

 

;

</script>

```

下面再来一个说明

```javascript

@click="clickFn"

是点击确认按钮的触发的函数 接受一个参数(数组类型)，是当前的值

(例如[2019, 6, 5, "上午", "随便2"])

:cancleFn="cancleFn"  (特别注意，是:cancleFn不是@cancleFn，是: 不是@)

是点击取消按钮触发的函数，不传则不显示取消按钮(非必传)

:defaultValue="[2019, 6, 5, "上午", "随便2"]"

是回显值(一维数组，非必传，传了能回显)  数据类型注意要对应上

:time="true"

开启年月日的时间选择模式(只能选择三年内的日期，非必传)

:arr="[['上午', '下午'], ['随便1', '随便2']]"

传入二维数组(非必传)

如果:time="true" 那么前三列是时间(年月日)，第四列是['上午', '下午']，第五列是['随便1', '随便2']

如果:time="false"或者未传， 第1列是['上午', '下午']，第2列是['随便1', '随便2']

:arrayFirstdayAndLastday="['2016.6-8', '2019-6.10']" (日期用逗号(.)或者一杠(-)隔开都行)

arrayFirstdayAndLastday是一维数组，数组长度必须是2，数组长度必须是2，数组长度必须是2

第一项是最早的显示时间，第二项是最晚的显示时间

['2016.6.8', '2019.6.10'] 那么最早显示时间是2016年6月8号，最晚时间是2019年6月10号

:stylBtn="'color': '#00ffff'"

是按钮这一栏的行内样式

```

附上github地址 https://github.com/jiangji1/time_check_jiangji

Vue 2 日期选择器组件

【中文标题】Vue 2 日期选择器组件

【英文标题】：Vue 2 Datepicker Component

【发布时间】：2017-02-20 18:49:15

【问题描述】：

我正在尝试使用 Bootstrap Datepicker 创建一个 Vue 2 组件，但在选择日期后尝试更新输入时卡住了，这是我的代码：

Vue.component('datepicker', 
template: '\
  <input class="form-control datepicker"\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
        v-on:blur="updateValue($event.target.value)"\
        v-on:focus="updateValue($event.target.value)"\
        data-date-format="dd-mm-yyyy"\
        data-date-end-date="0d"\
        placeholder="dd-mm-yyyy"\
       type="text"  />\
',
props: 
    value: 
      type: String,
      default: moment().format('DD-MM-YYYY')
    
,
mounted: function () 

,
methods: 
    updateValue: function (value) 
        this.$emit('input', value);
    ,

);

如果通过键盘输入，但在日历中选择时，值不会更新。有什么想法可以通过日历更新日期更改的值吗？

** 更新**

我已经得到了以下代码：

mounted: function() 
    let self = this;
    this.$nextTick(function() 
        $('.datepicker').datepicker(
            startView: 1,
            todayHighlight: true,
            todayBtn: "linked",
            autoclose: true,
            format: "dd-mm-yyyy"
        )
        .on('changeDate', function(e) 
            var date = e.format('dd-mm-yyyy');
            self.updateValue(date);
        );
    );

但它现在会更新页面上所有 Datepicker 实例的值。如何设置它以便仅针对选定的 Datepicker 进行更新？

【问题讨论】：

组件安装后是否也需要初始化它，例如通过 $('.datepicker').datepicker(options)?在 vue 2.0 中，请记住在 this.$nextTick 方法调用中执行此操作，以确保 DOM 元素在调用之前存在。

你试过 v-on:change 事件吗？

【参考方案1】：

当你初始化 Datepicker 时，你可以在选项中指定当项目被选中时应该调用什么方法：

mounted: function() 
   let self = this;
   let args = 
      format: 'DD-MM-YYYY',
      placeholder: 'dd-mm-yyyy',
      onSelect: function(dateText) 
         self.updateValue(dateText);
      
   ;
   this.$nextTick(function() 
      $('.datepicker').datepicker(args)
   );

【讨论】：

感谢您为我指明正确的方向，我猜此代码用于不同的日期选择器，而不是 Bootstrap Datepicker。请参阅我更新的问题。

【参考方案2】：

这是最终的工作组件：

Vue.component('datepicker', 
template: '\
  <input class="form-control datepicker"\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
        data-date-format="dd-mm-yyyy"\
        data-date-end-date="0d"\
        placeholder="dd-mm-yyyy"\
        type="text"  />\
',
props: 
    value: 
      type: String,
      default: moment().format('DD-MM-YYYY')
    
,
mounted: function() 
    let self = this;
    this.$nextTick(function() 
        $(this.$el).datepicker(
            startView: 1,
            todayHighlight: true,
            todayBtn: "linked",
            autoclose: true,
            format: "dd-mm-yyyy"
        )
        .on('changeDate', function(e) 
            var date = e.format('dd-mm-yyyy');
            self.updateValue(date);
        );
    );
,
methods: 
    updateValue: function (value) 
        this.$emit('input', value);
    ,

);

【讨论】：

你好，你在哪里加载引导日期选择器？只是require('bootstrap-datepicker')吗？我不断收到一个 js 错误，说 $(...).datepicker is not a function

我只是像使用

【参考方案3】：

这样您就不会被选定的日期覆盖，也不会丢失您写的文本

this.$nextTick(function() 
          $(this.$el).datepicker(args).on('changeDate', function(e:any) 
            var date = e.format(format);
            var sval:string = e.currentTarget.__vue__.$refs.input._value;
             //console.log(sval);               
           //so that value doesnt get erased everytime i put one character there, wait to have more
           if(sval.length>2) 
             self.updateValue(date); console.log('upate'+date+sval);
             
        ).on('hide', function(e:any) 
            var date = e.format(format);
            var sval:string = e.currentTarget.__vue__.$refs.input._value;            
             self.updateValue(date); console.log('upate2'+date+sval);              
        );
      );