Fix datepicker not working

This commit is contained in:
Matthias 2022-12-11 10:24:04 +01:00
parent 2b60322614
commit ef848f33e8
4 changed files with 47 additions and 32 deletions

View File

@ -17,6 +17,7 @@
}, },
"dependencies": { "dependencies": {
"@popperjs/core": "^2.11.6", "@popperjs/core": "^2.11.6",
"@vuepic/vue-datepicker": "^3.6.1",
"@vueuse/core": "^9.1.1", "@vueuse/core": "^9.1.1",
"axios": "^1.2.1", "axios": "^1.2.1",
"bootstrap": "^5.2.3", "bootstrap": "^5.2.3",

View File

@ -1,36 +1,36 @@
<template> <template>
<div> <div>
<div class="d-flex"> <div class="d-flex justify-content-center">
<b-form-group class="col-md-6" label="Start date" label-for="dp_dateFrom"> <div>
<b-input-group> <label for="dateFrom">Start Date</label>
<b-input-group-prepend> <Datepicker
<b-form-datepicker v-model="dateFrom" class="mb-1" button-only></b-form-datepicker> id="dateFrom"
</b-input-group-prepend> v-model="dateFrom"
<b-form-input :dark="settingsStore.isDarkTheme"
id="dp_dateFrom" :max-date="now"
v-model="dateFrom" model-type="yyyy-MM-dd"
type="text" format="yyyy-MM-dd"
placeholder="YYYY-MM-DD" text-input
autocomplete="off" auto-apply
></b-form-input> :enable-time-picker="false"
</b-input-group> ></Datepicker>
</b-form-group> </div>
<b-form-group class="ms-2 col-md-6" label="End date" label-for="dp_dateTo"> <div class="ms-2">
<b-input-group> <label for="dateTo">End Date</label>
<b-input-group-prepend> <Datepicker
<b-form-datepicker v-model="dateTo" class="mb-1" button-only></b-form-datepicker> v-model="dateTo"
</b-input-group-prepend> :dark="settingsStore.isDarkTheme"
<b-form-input :max-date="now"
id="dp_dateTo" model-type="yyyy-MM-dd"
v-model="dateTo" format="yyyy-MM-dd"
type="text" text-input
placeholder="YYYY-MM-DD" auto-apply
autocomplete="off" :enable-time-picker="false"
></b-form-input> ></Datepicker>
</b-input-group> </div>
</b-form-group>
</div> </div>
<label class="text-start">
<label class="mt-1 text-start">
Timerange: <b>{{ timeRange }}</b> Timerange: <b>{{ timeRange }}</b>
</label> </label>
</div> </div>
@ -39,6 +39,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { dateFromString, dateStringToTimeRange, timestampToDateString } from '@/shared/formatters'; import { dateFromString, dateStringToTimeRange, timestampToDateString } from '@/shared/formatters';
import { ref, computed, onMounted, watch } from 'vue'; import { ref, computed, onMounted, watch } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';
import { useSettingsStore } from '@/stores/settings';
const settingsStore = useSettingsStore();
const now = new Date(); const now = new Date();

View File

@ -1,6 +1,7 @@
import { parse, toDate } from 'date-fns'; import { parse, toDate } from 'date-fns';
import { format, utcToZonedTime } from 'date-fns-tz'; import { format, utcToZonedTime } from 'date-fns-tz';
import humanizeDuration from 'humanize-duration'; import humanizeDuration from 'humanize-duration';
import { isUndefined } from './numberformat';
export function dateFromString(datestring: string, format: string): Date { export function dateFromString(datestring: string, format: string): Date {
return parse(datestring, format, 0); return parse(datestring, format, 0);
@ -58,7 +59,7 @@ export function timestampToDateString(ts: number | Date): string {
* @param datestring Input string (in the format yyyy-MM-dd) * @param datestring Input string (in the format yyyy-MM-dd)
*/ */
export function dateStringToTimeRange(datestring: string): string { export function dateStringToTimeRange(datestring: string): string {
return datestring.replace(/-/g, ''); return isUndefined(datestring) ? '' : datestring.replace(/-/g, '');
} }
export function timestampHour(ts: number): number { export function timestampHour(ts: number): number {

View File

@ -1670,6 +1670,14 @@
resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.2.6.tgz#23d85b81d05be36f12aa802459a7876457dec795" resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.2.6.tgz#23d85b81d05be36f12aa802459a7876457dec795"
integrity sha512-64zHtJZdG7V/U2L0j/z3Pt5bSygccI3xs+Kl7LB73AZK4MQ8WONJhqDQPK8leUFFA9CmmoJygeky7zcl2hX10A== integrity sha512-64zHtJZdG7V/U2L0j/z3Pt5bSygccI3xs+Kl7LB73AZK4MQ8WONJhqDQPK8leUFFA9CmmoJygeky7zcl2hX10A==
"@vuepic/vue-datepicker@^3.6.1":
version "3.6.1"
resolved "https://registry.yarnpkg.com/@vuepic/vue-datepicker/-/vue-datepicker-3.6.1.tgz#7c082c72b78ebecc63922bb72c0b2e200005e39f"
integrity sha512-kdHFrfRtNaGXlUE0snavYnqajSj6VbdlvkscezPeNQNfo9BEYAVPp0YSFoXpoGXvyJNdBLRvfRDDCTTl2IASRg==
dependencies:
date-fns "^2.29.3"
date-fns-tz "^1.3.7"
"@vueuse/core@^9.1.1": "@vueuse/core@^9.1.1":
version "9.1.1" version "9.1.1"
resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.1.1.tgz#a5c09c33ccee58cfd53bc3ec2d5a0d304155529e" resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.1.1.tgz#a5c09c33ccee58cfd53bc3ec2d5a0d304155529e"
@ -1985,7 +1993,7 @@ bootstrap-vue-3@^0.4.11:
resolved "https://registry.yarnpkg.com/bootstrap-vue-3/-/bootstrap-vue-3-0.4.11.tgz#088e1da6ef09aee0d6687d17ad92668712e22021" resolved "https://registry.yarnpkg.com/bootstrap-vue-3/-/bootstrap-vue-3-0.4.11.tgz#088e1da6ef09aee0d6687d17ad92668712e22021"
integrity sha512-iCleKqZHqG/4l9AEaZ0aZtyjH5wXGT0JEFpTlAVrsvhbMQptkb5kRQXDh7F9mFKBVQ5+E5ykgRjvSoioIH06DA== integrity sha512-iCleKqZHqG/4l9AEaZ0aZtyjH5wXGT0JEFpTlAVrsvhbMQptkb5kRQXDh7F9mFKBVQ5+E5ykgRjvSoioIH06DA==
dependencies: dependencies:
"@nuxt/kit" "3.0.0" "@nuxt/kit" "3.0.0-rc.12"
bootstrap@^5.2.3: bootstrap@^5.2.3:
version "5.2.3" version "5.2.3"