JSFiddle - React, Tailwind, and code Playground

by talkhabi

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/moment"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/moment-jalaali.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-persian-datetime-picker-browser.js"></script>
<div id="app">
  <input
    ref="input"
    type="text"
    id="my-custom-input"
  />

  <date-picker
    ref="picker"
    v-model="date"
    format="x"
    display-format="jYYYY jMMMM jD"
    element="my-custom-input"
  ></date-picker>
  
  <p>Date: {{ date }} </p>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    date: 1540845000000,
  },
  components: {
    DatePicker: VuePersianDatetimePicker
  },
  watch: {
    date: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          if (this.$refs.input && this.$refs.picker)
          this.$refs.input.value = this.$refs.picker.displayValue
        })
      }
    }
  }
});