Flowbite Datepicker not using input value

Question

I got a very basic setup for a datepicker:

<script setup>
import { ref, onMounted } from 'vue'
import { initFlowbite } from 'flowbite'
import Datepicker from 'flowbite-datepicker/Datepicker';

const datepickerRef = ref(null);

onMounted(() => {
    initFlowbite();

    new Datepicker(datepickerRef.value); 
})

const date = ref('');
</script>

<template>
<div class="relative max-w-sm">
  <input ref="datepickerRef" datepicker v-model="date" type="text"><br>
  {{ date }}
</div>
</template>

The v-model binding is not working. Is datepicker not using the value and if true, what do I need to do to get the reactive value?

Hacendado · Accepted Answer · 2024-04-18 09:13:17Z

For me was also impossible to make the v-model to work. and this is the solution I end up having

Basically I created a listener on the element to set the value of the date and I watched the input and emit an event to set the value in order to change the value.

In my implementation I send props to set a value from my previous form.

Hope it helps

const props = defineProps({
  date: {
    required: true,
  },
  label: {
    type: String,
    default: 'your label',
  },
})

const emit = defineEmits(['setEmit'])

const picker = ref(null)

const input = ref()

function set(event) {
  input.value = event.detail.date
  picker.value.hide()
}

watch(input, (value) => {
  if (!value)
    return

  emit('setEmit', { date: value })
})

onMounted(() => {
  const element = document.getElementById('date-picker')
  element.addEventListener('changeDate', set)

  picker.value = new Datepicker(element)

  if (props.date)
    picker.value.setEmit(new Date(props.date))
})
</script>

Collectives™ on Stack Overflow

Flowbite Datepicker not using input value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related