Vue 3 Datepicker

<template>
    <appdate-picker
      :full-month-name="true"
      input-class="customClass"
      placeholder="YYYY-MM-DD"
      :typeable="true"
      :hideInput="false"
    >
    </appdate-picker>
  </template>

<script lang="js">
  import { ref } from 'vue';
  export default {
    setup(){
      const dateSelected = ref(new Date())
      /**
         * Handler for select-day function
         */
        function handleValue(payload: Date): void {
          console.log('handleValue', payload);
        }
      return {
        dateSelected,
        handleValue
      }
    }
  }
  <script>

<template>
    <appdate-picker
      placeholder="Select Date"
      :disabled-dates="{
        to: new Date(2020, 10, 5),
        from: new Date(2020, 10, 16),
        dates: [
            new Date(2020, 10, 10),
            new Date(2020, 10, 11),
          ],
      }"
      :prevent-disable-date-selection="preventDisableDateSelection"
    >
    </appdate-picker>
  </template>

<script lang="js">
  import { ref } from 'vue';
  export default {
    setup(){
      const defaultValue = ref(new Date())
      /**
         * Handler for select-day function
         */
        function dateSelected(payload: Date): void {
          console.log('dateSelected', payload);
        }
      const preventDisableDateSelection = true
      return {
        dateSelected,
        defaultValue
        preventDisableDateSelection
      }
    }
  }
  <script>

<template>
    <appdate-picker
      placeholder="Select Date"
      @input="dateSelected"
      :value="defaultValue"
    >
    </appdate-picker>
  </template>

<script lang="js">
  import { ref } from 'vue';
  export default {
    setup(){
      const defaultValue = ref(new Date())
      function dateSelected(payload: Date): void {
        console.log('dateSelected', payload)
      }
      return {
        dateSelected,
        defaultValue
      }
    }
  }
  <script>

<appdate-picker
  v-model="dateinput"
  @update:modelValue="dateSelected"
/>

<script lang="js">
  import { ref } from 'vue';
  export default {
    setup(){
      const dateinput = ref(new Date())
      function dateSelected(payload : Date): void {
        console.log(payload);
      }
      return {dateinput,dateSelected}
    }
  }
  <script>

<appdate-picker
        :ref="(el) => {
          inputRef = el;
        }"
      >
      </appdate-picker>
      <div class="change-btn">
        <button  type="button" @click="accessDatePicker">
          Access DatePicker
        </button>
      </div>

<script lang="js">
  import { ref } from 'vue';
  export default {
    setup(){
      const inputRef = ref(null);
      function accessDatePicker(): void {
        (inputRef.value).value
      }
      return {inputRef,accessDatePicker}
    }
  }
  <script>

<template>
    <appdate-picker
      placeholder="Select Day"
      :minimum-view="'day'"
      :maximum-view="'day'"
      @input="handleChangedDay"
    >
    </appdate-picker>
  </template>

<script lang="js">
  export default {
    setup(){
      function handleChangedDay(payload) {
        console.log( payload )
      }
      return {handleChangedDay}
    }
  }
  <script>

<template>
    <appdate-picker
      placeholder="Select Date"
        :highlighted="{
          to: new Date(2020, 11, 16),
          from: new Date(2020, 10, 17),
        }"
    >
    </appdate-picker>
  </template>

<script lang="js">
  import { ref } from 'vue';
  export default {
    setup(){
      return {
      }
    }
  }
  <script>

<template>
    <appdate-picker
      placeholder="Select Month"
      :minimum-view="'month'"
      :maximum-view="'month'"
      @changedMonth="handleChangedMonth"
    >
    </appdate-picker>
  </template>

<script lang="js">
  export default {
    setup(){
      function handleChangedMonth(payload) {
        console.log( payload )
      }
      return {handleChangedMonth}
    }
  }
  <script>

<template>
    <appdate-picker
      placeholder="Select Year"
      :minimum-view="'year'"
      :maximum-view="'year'"
      @changedYear="handleChangedYear"
    >
    </appdate-picker>
  </template>

<script lang="js">
  export default {
    setup(){
      function handleChangedYear(payload) {
        console.log( payload )
      }
      return {handleChangedYear}
    }
  }
  <script>

<template>
    <appdate-picker
      placeholder="Select Date"
      :iconColor="color"
      :iconHeight="height"
      :iconWidth="width"
    >
    </appdate-picker>
  </template>

<script lang="js">
  export default {
    setup(){
      const color = 'red';
      const height = '18';
      const width = '18';
      return {color,width,height}
    }
  }
  <script>

<template>
    <appdate-picker
      placeholder="Select Date"
      @input="dateSelected"
      :value="defaultValue"
    >
    <template v-slot:belowDate>
      <p>Below Date Input</p>
    </template>
    <template v-slot:customCalendarHeader>
      <p>Before Calendar Header Slot</p>
    </template>
    <template v-slot:formatDateTopBar>
      <p>{{formattedDate}}</p>
    </template>
    </appdate-picker>
  </template>

<script lang="js">
  import { ref } from 'vue';
  export default {
    setup(){
      const defaultValue = ref(new Date())
      function dateSelected(payload: Date): void {
        console.log('dateSelected', payload)
      }
      /**
       * Handler for select-day function
       */
      function dateSelected(payload: Date): void {
        defaultValue.value = payload
      }

      const formattedDate = computed(() => {
        return defaultValue.value.toString();
      })
      return {
        ...
        defaultValue,
        dateSelected,
        changeDefaultValue,
        formattedDate
      }
    }
  }
  <script>

<template>
    <appdate-picker
      placeholder="Select Date"
      @input="dateSelected"
      value="2020-12-16"
    >
    </appdate-picker>
  </template>

<script lang="js">
  import { ref } from 'vue';
  export default {
    setup(){
      const defaultValue = ref(new Date())
      function dateSelected(payload: Date): void {
        console.log('dateSelected', payload)
      }
      return {
        dateSelected,
        defaultValue
      }
    }
  }
  <script>

<template>
    <appdate-picker
      inline="true"
    >
    </appdate-picker>
  </template>

<script lang="js">
  export default {
    setup(){
      return {}
    }
  }
  <script>

<template>
    <appdate-picker
      placeholder="Select Date"
      @input="dateSelected"
      :value="defaultValue"
      language="hi"
    >
    </appdate-picker>
  </template>

<script lang="js">
  import { ref } from 'vue';
  export default {
    setup(){
      const defaultValue = ref(new Date())
      function dateSelected(payload: Date): void {
        console.log('dateSelected', payload)
      }
      return {
        dateSelected,
        defaultValue
      }
    }
  }
  <script>