Vue3BetterPick (Tailwindcss)

StackBlitz Demo

Usage

1<template>
2  <div class="p-4 flex flex-col gap-8">
3    <label>
4      datetime
5      <DateTimePicker
6        v-model="date"
7        type="datetime"
8        format="dd.MM.yyyy HH:mm"
9        @update:modelValue="console.log"
10      />
11    </label>
12    <label>
13      date
14      <DateTimePicker
15        v-model="date"
16        type="date"
17        format="dd.MM.yyyy"
18        @update:modelValue="console.log"
19      />
20    </label>
21    <label>
22      time
23      <DateTimePicker
24        v-model="date"
25        type="time"
26        format=" HH:mm"
27        @update:modelValue="console.log"
28      />
29    </label>
30
31    <div class="text-lg">Selected date: {{ date }}</div>
32  </div>
33</template>
34
35<script setup lang="ts">
36import { ref } from "vue";
37const testDate = new Date();
38testDate.setMonth(0);
39
40const date = ref<Date | null>(new Date());
41</script>
42
43<style>
44:root {
45  --better-pick-primary: 117 143 237;
46}
47</style>

Props

prop	type	default
type	"datetime" | "date" | "time"	"datetime"
placeholder	string	"Datum auswählen"
invalidDateText	string	"Ungültiges Datum"
format	string	"dd.MM.yyyy HH:mm"
ui	DatePickerUiStyling	undefined

DatePickerUiStyling

You can style the DatePicker-Component using tailwind by passing the style-description-object to the component.

Whatever you pass in gets merged with the default.

Example:

1<DateTimePicker
2  :ui="{
3    content: {
4      picker: {
5        date: {
6          controls: {
7            navigation: {
8              button:
9                'rounded-full hover:bg-red-500 p-1 aspect-square w-8 h-8 flex items-center justify-center',
10            },
11          },
12        },
13      },
14    },
15  }"

Shape of the description-type

1type DatePickerUiStyling = {
2  trigger: {
3    wrapper: string;
4    input: string;
5  };
6  content: {
7    wrapper: string;
8    picker: {
9      wrapper: string;
10      date: {
11        wrapper: string;
12        controls: {
13          wrapper: string;
14          monthYear: {
15            wrapper: string;
16            month: {
17              button: string;
18              content: {
19                wrapper: string;
20                button: {
21                  base: string;
22                  active: string;
23                  current: string;
24                };
25              };
26            };
27            year: {
28              button: string;
29              content: {
30                wrapper: string;
31                button: {
32                  base: string;
33                  active: string;
34                  current: string;
35                };
36              };
37            };
38          };
39          navigation: {
40            wrapper: string;
41            button: string;
42          };
43        };
44        daysGrid: {
45          wrapper: string;
46          weekDay: string;
47          offset: string;
48          day: {
49            base: string;
50            selected: string;
51            today: string;
52          };
53        };
54      };
55      time: {
56        wrapper: string;
57        timeInfo: string;
58        pickersWrapper: string;
59      };
60    };
61  };
62};

Default description values

1const datePickerUiStyling: DatePickerUiStyling = {
2  trigger: {
3    wrapper:
4      "border border-black rounded-md p-1 focus-within:border-[color:var(--better-pick-primary)]",
5    input:
6      "w-full focus:border-none focus:ring-0 focus:outline-none bg-transparent",
7  },
8  content: {
9    wrapper: "p-1 bg-white shadow-md",
10    picker: {
11      wrapper: "flex gap-2",
12      date: {
13        wrapper: "flex flex-col",
14        controls: {
15          wrapper: "flex items-center justify-between",
16          monthYear: {
17            wrapper: "flex items-center",
18            month: {
19              button:
20                "rounded-md hover:bg-[color:rgba(var(--better-pick-primary)/0.25)] p-1",
21              content: {
22                wrapper:
23                  "p-1 bg-white shadow-md grid grid-cols-3 gap-2 overflow-auto h-64",
24                button: {
25                  base: "text-center rounded-md hover:bg-[color:rgba(var(--better-pick-primary)/0.25)] p-1",
26                  active: "",
27                  current: "",
28                },
29              },
30            },
31            year: {
32              button:
33                "rounded-md hover:bg-[color:rgba(var(--better-pick-primary)/0.25)] p-1",
34              content: {
35                wrapper:
36                  "p-1 bg-white shadow-md grid grid-cols-4 gap-2 overflow-auto h-64",
37                button: {
38                  base: "text-center rounded-md hover:bg-[color:rgba(var(--better-pick-primary)/0.25)] p-1",
39                  active: "",
40                  current: "",
41                },
42              },
43            },
44          },
45          navigation: {
46            wrapper: "flex items-center",
47            button:
48              "rounded-full hover:bg-[color:rgba(var(--better-pick-primary)/0.25)] p-1 aspect-square w-6 h-6 flex items-center justify-center",
49          },
50        },
51        daysGrid: {
52          wrapper: "grid",
53          weekDay: "text-center aspect-square p-1 font-semibold",
54          offset: "text-center aspect-square p-1",
55          day: {
56            base: "text-center rounded-full border border-transparent aspect-square p-1 cursor-pointer hover:bg-[color:rgba(var(--better-pick-primary)/0.25)]",
57            selected:
58              "!bg-[color:rgba(var(--better-pick-primary)/0.75)] text-white",
59            today: "border-gray-500",
60          },
61        },
62      },
63      time: {
64        wrapper: "flex flex-col p-1",
65        timeInfo: "text-center",
66        pickersWrapper: "flex-1 flex gap-2 w-[150px] items-center",
67      },
68    },
69  },
70};

Todos

• Dark Theme
• More props, for example 'clearable'
• Date Range
• Multi-Dates