How to style vue-datetime picker in laravel vue? - laravel

Question

I am trying to use the vue-datetime component inside an other component here is the vue
<template>
<div class="container p-3 bg-gray-100 flex flex-col">
<div>{{ current_post.title }}</div>
<div v-if="edit == false" id="mode-diplay">
<div v-html="current_post.body" class="text-gray-700"></div>
</div>
<div v-else id="mode-edit">
<form class="flex flex-col" action>
<datetime type="datetime" v-model="datetime"></datetime>
<input type="text" val="details.body" />
<textarea
class="markdown"
name="editor"
id="editor"
v-model="raw_post.body"
rows="50"
></textarea>
</form>
</div>
</div>
</template>
<script>
import { Datetime } from "vue-datetime";
export default {
name: "PostDetails",
props: ["current_post", "raw_post", "edit"],
components: {
datetime: Datetime,
},
data() {
return {
datetime:this.raw_post.beg_date
};
},
};
</script>
The vue-date time is displayed but when I click into the field input, the picker shows up vertically with very huge images of the < char.
I followed the example given here https://mariomka.github.io/vue-datetime/ and I don't know what else to do. The trouble is the same on Firefox and Chromium.

Answer 1

You need a specific loader for CSS files
Import in your parent component the style for the datepicker
import 'vue-datetime/dist/vue-datetime.css';
import { Datetime } from "vue-datetime";
import 'vue-datetime/dist/vue-datetime.css';
export default {
name: "PostDetails",
props: ["current_post", "raw_post", "edit"],
components: {
datetime: Datetime,
},
data() {
return {
datetime:this.raw_post.beg_date
};
},
};