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.umd.min.js"></script>
<div id="app">
  <date-picker
    v-model="date"
    :clearable="true"
    format="YYYY-MM-DD"
    display-format="jYYYY jMMMM jD"
  ></date-picker>
  <p>Date: {{ date }} </p>
</div>

CSS

body {
  direction: rtl;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    date: '2022-01-02',
  },
  components: {
    DatePicker: VuePersianDatetimePicker
  },
});