Tidak dapat menetapkan nilai pengikatan, dikodekan sesuai dokumentasi.

Contoh JsFiddle: $[https://jsfiddle.net/zarpio/8stw7rvc/13/

ATAU

Kode Lengkap:

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

Masalah: Seperti yang Anda lihat, outputnya dalam format string (Kamis 28 Mei 2020 00:00:00), tapi saya perlu dalam format="28-05-2020"

0
zarpio 28 Mei 2020, 12:18

1 menjawab

Jawaban Terbaik

Paket yang digunakan dalam pertanyaan sudah lama, berikut ini berfungsi dengan baik.

<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>```
0
zarpio 31 Mei 2020, 20:06