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": {
"@popperjs/core": "^2.11.6",
"@vuepic/vue-datepicker": "^3.6.1",
"@vueuse/core": "^9.1.1",
"axios": "^1.2.1",
"bootstrap": "^5.2.3",

View File

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

View File

@ -1,6 +1,7 @@
import { parse, toDate } from 'date-fns';
import { format, utcToZonedTime } from 'date-fns-tz';
import humanizeDuration from 'humanize-duration';
import { isUndefined } from './numberformat';
export function dateFromString(datestring: string, format: string): Date {
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)
*/
export function dateStringToTimeRange(datestring: string): string {
return datestring.replace(/-/g, '');
return isUndefined(datestring) ? '' : datestring.replace(/-/g, '');
}
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"
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":
version "9.1.1"
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"
integrity sha512-iCleKqZHqG/4l9AEaZ0aZtyjH5wXGT0JEFpTlAVrsvhbMQptkb5kRQXDh7F9mFKBVQ5+E5ykgRjvSoioIH06DA==
dependencies:
"@nuxt/kit" "3.0.0"
"@nuxt/kit" "3.0.0-rc.12"
bootstrap@^5.2.3:
version "5.2.3"