JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-datepicker/lib/index.js"></script>
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<div id="app">
<el-date-picker v-model="input" placeholder="Pick a date"></el-date-picker>
</div>

SCSS

@import url("//unpkg.com/element-theme-default/lib/date-picker.css");
@import url("//unpkg.com/element-theme-default/lib/base.css");

Babel + JSX

Vue.use(ElDatePicker.default)
var locales = {
  en: {
    el: {
      datepicker: {
        now: 'Now',
        today: 'Today',
        cancel: 'Cancel',
        clear: 'Clear',
        confirm: 'OK',
        selectDate: 'Select date',
        selectTime: 'Select time',
        startDate: 'Start Date',
        startTime: 'Start Time',
        endDate: 'End Date',
        endTime: 'End Time',
        year: '',
        month1: 'Jan',
        month2: 'Feb',
        month3: 'Mar',
        month4: 'Apr',
        month5: 'May',
        month6: 'Jun',
        month7: 'Jul',
        month8: 'Aug',
        month9: 'Sep',
        month10: 'Oct',
        month11: 'Nov',
        month12: 'Dec',
        weeks: {
          sun: 'Sun',
          mon: 'Mon',
          tue: 'Tue',
          wed: 'Wed',
          thu: 'Thu',
          fri: 'Fri',
          sat: 'Sat'
        },
        months: {
          jan: 'Jan',
          feb: 'Feb',
          mar: 'Mar',
          apr: 'Apr',
          may: 'May',
          jun: 'Jun',
          jul: 'Jul',
          aug: 'Aug',
          sep: 'Sep',
          oct: 'Oct',
          nov: 'Nov',
          dec: 'Dec'
        }
      }
    }
  }
}

Vue.use(VueI18n)
Vue.config.lang = 'en'
Vue.locale('en', locales.en)

var Main = {
  data() {
    return {
      input: ''
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')