JenniferSoft Design Docs

Appearance

InputDate ​

InputAffix 컴포넌트를 확장하여 날짜 입력 기능을 제공합니다. 시간이 표시되는YYYY-MM-DD HH:mm 의 값에 키보드의 ←, → 커서로 위치를 설정한 후 ↑, ↓ 커서로 시간을 변경할 수 있습니다.

Basic ​

5m
vue
<script setup lang="ts">
import { InputDate } from '@jennifersoft/vue-components-v2';
const startTime1 = ref(Date.now() - 1000 * 60 * 5);
const endTime1 = ref(Date.now());
const items = [
    {
        label: '최근 5분',
        value: 5 * 60 * 1000,
    },
    {
        label: '최근 15분',
        value: 15 * 60 * 1000,
    },
    {
        label: '최근 30분',
        value: 30 * 60 * 1000,
    },
    {
        label: '최근 1시간',
        value: 60 * 60 * 1000,
    },
    {
        label: '최근 4시간',
        value: 4 * 60 * 60 * 1000,
    },
    {
        label: '최근 1일',
        value: 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 1주',
        value: 7 * 24 * 60 * 60 * 1000,
    },
];
</script>
<template>
    <input-date
        v-model:start-time="startTime1"
        v-model:end-time="endTime1"
        @update:time-range="
            ({ startTime, endTime }) =>
                console.log(new Date(startTime), new Date(endTime))
        "
        :items="items"
    />
</template>

Size ​

5m
5m
5m
vue
<script setup lang="ts">
import { InputDate } from '@jennifersoft/vue-components-v2';
const startTime2 = ref(Date.now() - 1000 * 60 * 5);
const endTime2 = ref(Date.now());
const startTime3 = ref(Date.now() - 1000 * 60 * 5);
const endTime3 = ref(Date.now());
const startTime4 = ref(Date.now() - 1000 * 60 * 5);
const endTime4 = ref(Date.now());
const items = [
    {
        label: '최근 5분',
        value: 5 * 60 * 1000,
    },
    {
        label: '최근 15분',
        value: 15 * 60 * 1000,
    },
    {
        label: '최근 30분',
        value: 30 * 60 * 1000,
    },
    {
        label: '최근 1시간',
        value: 60 * 60 * 1000,
    },
    {
        label: '최근 4시간',
        value: 4 * 60 * 60 * 1000,
    },
    {
        label: '최근 1일',
        value: 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 1주',
        value: 7 * 24 * 60 * 60 * 1000,
    },
];
</script>
<template>
    <input-date
        v-model:start-time="startTime2"
        v-model:end-time="endTime2"
        size="small"
        :items="items"
    />
    <input-date
        v-model:start-time="startTime3"
        v-model:end-time="endTime3"
        size="medium"
        :items="items"
    />
    <input-date
        v-model:start-time="startTime4"
        v-model:end-time="endTime4"
        size="large"
        :items="items"
    />
</template>

date-format ​

5m
1h
1d
vue
<script setup lang="ts">
import { InputDate } from '@jennifersoft/vue-components-v2';
const items = [
    {
        label: '최근 5분',
        value: 5 * 60 * 1000,
    },
    {
        label: '최근 15분',
        value: 15 * 60 * 1000,
    },
    {
        label: '최근 30분',
        value: 30 * 60 * 1000,
    },
    {
        label: '최근 1시간',
        value: 60 * 60 * 1000,
    },
    {
        label: '최근 4시간',
        value: 4 * 60 * 60 * 1000,
    },
    {
        label: '최근 1일',
        value: 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 1주',
        value: 7 * 24 * 60 * 60 * 1000,
    },
];

const hours = [
    {
        label: '최근 1시간',
        value: 60 * 60 * 1000,
    },
    {
        label: '최근 2시간',
        value: 2 * 60 * 60 * 1000,
    },
    {
        label: '최근 3시간',
        value: 3 * 60 * 60 * 1000,
    },
    {
        label: '최근 4시간',
        value: 4 * 60 * 60 * 1000,
    },
    {
        label: '최근 5시간',
        value: 5 * 60 * 60 * 1000,
    },
    {
        label: '최근 6시간',
        value: 6 * 60 * 60 * 1000,
    }
];

const days = [
    {
        label: '최근 1일',
        value: 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 2일',
        value: 2 * 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 3일',
        value: 3 * 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 4일',
        value: 4 * 24 * 60 * 60 * 1000,
    },
];
const startTime5 = ref(Date.now() - 1000 * 60 * 5);
const endTime5 = ref(Date.now());

const startTime6 = ref(Date.now() - 1000 * 60 * 60 );
const endTime6 = ref(Date.now());

const startTime7 = ref(Date.now() - 1000 * 60 * 60 * 24);
const endTime7 = ref(Date.now());
<template>
    <div class="flex flex-col">
        <input-date v-model:start-time="startTime5" v-model:end-time="endTime5"  :items="items" date-format="YYYY-MM-DD HH:mm" />
        <input-date v-model:start-time="startTime6" v-model:end-time="endTime6"  :items="hours" date-format="YYYY-MM-DD HH" />
        <input-date v-model:start-time="startTime7" v-model:end-time="endTime7"  :items="days" date-format="YYYY-MM-DD" />
    </div>
</template>

HelpContent 사용 ​

5m
vue
<script setup lang="ts">
import { InputDate, Chip } from '@jennifersoft/vue-components-v2';
const startTime8 = ref(Date.now() - 1000 * 60 * 5);
const endTime8 = ref(Date.now());
const inputDateRef = ref();
</script>
<template>
    <input-date
        ref="inputDateRef"
        v-model:start-time="startTime8"
        v-model:end-time="endTime8"
        :use-help-content="true"
        :items="items"
    >
        <template #help>
            <span class="typo-body-medium mb-4">
                이렇게 조회할 수 있어요.
            </span>
            <div class="flex gap-3">
                <chip
                    text="45m"
                    size="small"
                    @click="
                        inputDateRef.changeTimeRangeAndClose(45 * 60 * 1000)
                    "
                />
                <chip
                    text="1h"
                    size="small"
                    @click="
                        inputDateRef.changeTimeRangeAndClose(60 * 60 * 1000)
                    "
                />
                <chip
                    text="1d"
                    size="small"
                    @click="
                        inputDateRef.changeTimeRangeAndClose(
                            24 * 60 * 60 * 1000
                        )
                    "
                />
                <chip
                    text="1w"
                    size="small"
                    @click="
                        inputDateRef.changeTimeRangeAndClose(
                            7 * 24 * 60 * 60 * 1000
                        )
                    "
                />
            </div>
        </template>
    </input-date>
</template>

API ​

Props ​

PropTypeDefaultDescription
startTime (v-model)numberDate.now() - 5 * 60 * 1000시작 시간(타임스탬프, ms). v-model로 사용.
endTime (v-model)numberDate.now()종료 시간(타임스탬프, ms). v-model로 사용.
timeZoneOffsetnumber9 * 60 * 60 * 1000타임존 오프셋(ms). 기본값은 KST(한국).
items{ label: string; value: number }[][]빠른 선택을 위한 기간 preset 목록.
dateFormat'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH' | 'YYYY-MM-DD''YYYY-MM-DD HH:mm'날짜/시간 표시 및 입력 포맷.
updateEndTimeOnInteractionbooleantruepreset/키보드 조작 시 endTime을 현재 시각으로 갱신할지 여부.
overlayStylePartial<CSSStyleDeclaration>-오버레이 스타일 커스텀.
size'mini' | 'small' | 'medium' | 'large''medium'인풋 크기.
disabledbooleanfalse비활성화 여부.

v-model ​

NameTypeDescription
startTimenumber시작 시간(ms)
endTimenumber종료 시간(ms)

Emits ​

EventPayloadDescription
update:timeRange{ startTime: number, endTime: number }시간 범위가 변경될 때 발생

Expose ​

MethodDescription
changeTimeRangeAndClose특정 기간(ms)을 선택하고 오버레이를 닫음