Level 58
Yes, you can add Tempus Dominus datetime picker to Breeze/Vue with Inertia. Here are the steps to do so:
- Install Tempus Dominus using the CDN link in your HTML file:
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"></script>
</head>
- Create a Vue component for the datetime picker:
<template>
<div>
<input type="text" class="form-control datetimepicker-input" :id="id" :data-target="#datetimepicker1" data-toggle="datetimepicker" :value="value" @input="$emit('input', $event.target.value)">
</div>
</template>
<script>
export default {
props: {
id: {
type: String,
required: true
},
value: {
type: String,
required: true
}
},
mounted() {
$(`#${this.id}`).datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss'
});
}
}
</script>
- Use the component in your Breeze/Vue app:
<template>
<div>
<datetime-picker id="datetimepicker1" v-model="datetime"></datetime-picker>
</div>
</template>
<script>
import DatetimePicker from './DatetimePicker.vue';
export default {
components: {
DatetimePicker
},
data() {
return {
datetime: ''
}
}
}
</script>
That's it! You should now have a working datetime picker in your Breeze/Vue app using Tempus Dominus.