vue 구성 요소의 datetimepicker 부트스트랩 값을 가져오려면 어떻게 해야 합니까?

vue 구성 요소의 datetimepicker 부트스트랩 값을 가져오려면 어떻게 해야 합니까?

내 뷰 블레이드는 다음과 같습니다.

...
<div class="panel-body">
    <order-view v-cloak>
        <input slot="from-date" data-date-format="DD-MM-YYYY" title="DD-MM-YYYY" type="text" class="form-control" placeholder="Date" name="from_date" id="datetimepicker" required>
        <input slot="to-date" data-date-format="DD-MM-YYYY" title="DD-MM-YYYY" type="text" class="form-control" placeholder="Date" name="to_date" id="datetimepicker" required>
    </order-view>
</div>
...

주문보기 컴포넌트는 다음과 같습니다.

<template>
    <div>
        <div class="col-sm-2">
            <div class="form-group">
                <slot name="from-date" required v-model="fromDate"></slot>
            </div>
        </div>
        <div class="col-sm-1">
            <div class="form-group" style="text-align: center">
                -
            </div>
        </div>
        <div class="col-sm-2">
            <div class="form-group">                           
                <slot name="to-date" required v-model="toDate"></slot>
            </div>
        </div>
        <div class="col-sm-4">
            <button v-on:click="filter()" class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return{
                fromDate: '',
                toDate: ''
            }
        },
        methods: {
            filter: function() {
                console.log(this.fromDate)
                console.log(this.toDate)
            }
        }
    }
</script>

위와 같은 v-model을 사용하고 있습니다.

근데 버튼을 클릭해보니까

console.log(this.fromDate)
console.log(this.toDate)

비어 있다

빈 상태로 표시됩니다.

왜 안 되는 거죠?

어떻게 하면 해결할 수 있을까요?

를 사용하여 슬롯을 바인딩할 수 없습니다.v-model기대하다Vue슬롯 입력에 자동적으로 접속됩니다만, 어쨌든 여기서 슬롯을 사용할 필요가 있는 이유를 알 수 없습니다.커스텀 어트리뷰트를 부가할 수 있는 입력이 필요한 것 같습니다.또, 어트리뷰트를 어트리뷰트로서 전달해 주세요.prop및 사용v-bind바인드:

<template>
  <div>
    <input v-bind="attrs" v-model="fromDate" />
    <button @click="filter">filter</button>
 </div>
</template>


export default{
  props: ['attrs'],
  methods: {
    filter() {
      console.log(this.fromDate)
    }
  },
  data() {
    return {
      fromDate: ""
    }
  }
}

new Vue({
  el: "#app",
  data: {
    fromDateAttrs: {
      'data-date-format': "DD-MM-YYYY",
      title: "DD-MM-YYYY",
      type: "text",
      class: "form-control",
      placeholder: "Date",
      name: "from_date",
      id: "datetimepicker",
    }
  }
});

이제 자신의 애트리뷰트를 부모에게 소품으로 전달할 수 있습니다.

<my-comp :attrs="fromDateAttrs"></my-comp>

JSFiddle은 다음과 같습니다.https://jsfiddle.net/rvederzc/

편집

달력 보기 컴포넌트를 작성하는 방법과 관련하여 jQuery 날짜 선택기를 구현하는 방법은 다음과 같습니다.Vue.js:

<template id="date-picker">
  <div>
    <input v-bind="attrs" v-model="date" @input="$emit('input', $event.target.value)" v-date-picker/>
  </div>
</template>

<script type="text/javascript">
export default {
  props: ['attrs'],
  directives: {
    datePicker: {
      bind(el, binding, vnode) {
        $(el).datepicker({
          onSelect: function(val) {
            // directive talk for 'this.$emit'
            vnode.context.$emit('input', val);
          }
        });
      }
    }
  }
}
</script>

그런 다음 그것을 바인딩할 수 있습니다.v-model부모:

<date-picker v-model="myDate"></date-picker>

JSFiddle은 다음과 같습니다.https://jsfiddle.net/g64drpg6/

자바스크립트 기술이 유명해지기 전에 완성되기를 기대할 수 없습니다.그래서 제가 추천을 다 해봤어요.moment로.vue-datapicker모든 권장사항은 설계가 크게 손상되어 하드코드가 필요했습니다.div id에 있습니다.vue에 있어서의 초기화.mounted이런 식으로 내 프로젝트에 해킹을 도입할 수는 없다.설계와 구현의 깔끔함을 엉망으로 합니다.

밋밋한 옛날 jsp로 고쳤어요.저장할 때 이렇게 했어요.

vuedata.dateOfBirthMilliSecs = $("#dateOfBirth").val() ;

날짜 형식의 변환 방법을 알아보겠습니다.milliseconds사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/43228832/how-can-i-get-value-in-datetimepicker-bootstrap-on-vue-component