Невозможно отформатировать значение привязки для (mengxiong10 / vue2-datepicker) - PullRequest
Новая
       4

Невозможно отформатировать значение привязки для (mengxiong10 / vue2-datepicker)

0 голосов
/ 28 мая 2020

Невозможно установить значение привязки, закодировано согласно документации .

JsFiddle Пример: $ [https://jsfiddle.net/zarpio/8stw7rvc/13/

OR

Полный код: 

<!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>

Проблема: Как видите, он выводится в строковом формате (четверг, май 28 2020 00:00:00) , но мне нужно в формате = " 2020-05-28 "

1 Ответ

0 голосов
/ 31 мая 2020

Пакет, используемый в вопросе, старый, следующий работает нормально. 

<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>```
...