Build a Vue.js 3 Bootstrap Datepicker Form Input Field in Different Locales & Languages Using TS

App.vue

<template>
  <section>
    <div class="form-group">
      <label>Select a date</label>
      <div class="input-group">
        <flat-pickr
          v-model="date"
          :config="config"
          class="form-control"
          placeholder="Select date"
          name="date"
        />
        <div class="input-group-append">
          <button
            class="btn btn-default"
            type="button"
            title="Toggle"
            data-toggle
          >
            <i class="fa fa-calendar" />
            <span aria-hidden="true" class="sr-only">Toggle</span>
          </button>
          <button
            class="btn btn-default"
            type="button"
            title="Clear"
            data-clear
          >
            <i class="fa fa-times" />
            <span aria-hidden="true" class="sr-only">Clear</span>
          </button>
        </div>
      </div>
    </div>
    <pre>Selected date is - {{ date }}</pre>
  </section>
</template>

<script setup>
import { ref } from "vue";
import "bootstrap/dist/css/bootstrap.css";
// import this component
import flatPickr from "vue-flatpickr-component";
import "flatpickr/dist/flatpickr.css";
// theme is optional
// try more themes at - https://flatpickr.js.org/themes/
import "flatpickr/dist/themes/material_blue.css";
// localization is optional
import { Hindi } from "flatpickr/dist/l10n/hi.js";

const date = ref("2022-10-28");

// Read more at https://flatpickr.js.org/options/
const config = ref({
  wrap: true, // set wrap to true only when using 'input-group'
  altFormat: "M j, Y",
  altInput: true,
  dateFormat: "Y-m-d",
  locale:Hindi
});
</script>

<label>Select a date</label>

<flat-pickr

v-model="date"

:config="config"

class="form-control"

placeholder="Select date"

name="date"

<button

class="btn btn-default"

type="button"

title="Toggle"

data-toggle

<span aria-hidden="true" class="sr-only">Toggle</span>

</button>

<button

class="btn btn-default"

type="button"

title="Clear"

data-clear

<span aria-hidden="true" class="sr-only">Clear</span>

</button>

</div>

<pre>Selected date is - {{ date }}</pre>

</section>

</template>

import { ref } from "vue";

import "bootstrap/dist/css/bootstrap.css";

// import this component

import flatPickr from "vue-flatpickr-component";

import "flatpickr/dist/flatpickr.css";

// theme is optional

// try more themes at - https://flatpickr.js.org/themes/

import "flatpickr/dist/themes/material_blue.css";

// localization is optional

import { Hindi } from "flatpickr/dist/l10n/hi.js";

const date = ref("2022-10-28");

// Read more at https://flatpickr.js.org/options/

const config = ref({

wrap: true, // set wrap to true only when using 'input-group'

altFormat: "M j, Y",

altInput: true,

dateFormat: "Y-m-d",

locale:Hindi

});

</script>

Build a Vue.js 3 Bootstrap Datepicker Form Input Field in Different Locales & Languages Using TS

Comments

Leave a Reply Cancel reply

Archives