【问题标题】：Unable to format binding value for (mengxiong10 / vue2-datepicker)无法格式化 (mengxiong10 / vue2-datepicker) 的绑定值
【发布时间】：2020-05-28 09:18:44
【问题描述】：

无法设置绑定值，编码为documentation。

JsFiddle 示例： $[https://jsfiddle.net/zarpio/8stw7rvc/13/

或

完整代码：

<!DOCTYPE html>
<html>

<head>
  <title>Vue2 Datepicker</title>
</head>

<body>
  <div id="app">
    <section>
      <p>format</p>
      <date-picker v-model="value1" value-type="format" format="YYYY-MM-DD"></date-picker>
      <p>
        <code>v-model = {{ value1 }}</code>
      </p>
    </section>
    <section>
      <p>date (Date Object)</p>
      <date-picker v-model="value2" value-type="date"></date-picker>
      <p>
        <code>v-model = {{ value2 }}</code>
      </p>
    </section>
    <section>
      <p>timestamp</p>
      <date-picker v-model="value3" value-type="timestamp"></date-picker>
      <p>
        <code>v-model = {{ value3 }}</code>
      </p>
    </section>
    <section>
      <p>DD/MM/YYYY</p>
      <date-picker v-model="value4" value-type="DD/MM/YYYY" format="YYYY-MM-DD"></date-picker>
      <p>
        <code>v-model = {{ value4 }}</code>
      </p>
    </section>
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue2-datepicker@1.9.6/dist/build.min.js"></script>
    <script type="text/javascript">
    Vue.use(DatePicker.default);

    new Vue({
      el: '#app',

      data: {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        lang: {
          formatLocale: {
            firstDayOfWeek: 1,
          },
          monthBeforeYear: false,
        },
      },

      methods: {

      },

      computed: {

      }
    });
    </script>
</body>
</html>

问题： 如您所见，它以字符串格式输出 (Thu May 28 2020 00:00:00)，但我需要格式为“2020-05-28” p>

【问题讨论】：

标签： vuejs2 vue-component

【解决方案1】：

问题中使用的包是旧的，以下工作正常。

<html>
<head>
  <title>Vue2 Datepicker</title>
  <link href="http://p3backend.test/frontend/default/assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/vue2-datepicker/index.css">
</head>
<body>
  <div id="app">
    <section>
      <p>format</p>
      <date-picker v-model="value1" value-type="format" format="YYYY-MM-DD"></date-picker>
      <p>
        <code>v-model = {{ value1 }}</code>
      </p>
    </section>
    <section>
      <p>date (Date Object)</p>
      <date-picker v-model="value2" value-type="date"></date-picker>
      <p>
        <code>v-model = {{ value2 }}</code>
      </p>
    </section>
    <section>
      <p>timestamp</p>
      <date-picker v-model="value3" value-type="timestamp"></date-picker>
      <p>
        <code>v-model = {{ value3 }}</code>
      </p>
    </section>
    <section>
      <p>DD/MM/YYYY</p>
      <date-picker v-model="value4" value-type="DD/MM/YYYY" format="YYYY-MM-DD"></date-picker>
      <p>
        <code>v-model = {{ value4 }}</code>
      </p>
    </section>
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue2-datepicker/index.min.js"></script>
    <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
      },
    });
    </script>
</body>
</html>```

【讨论】：