Skip to content

Commit

Permalink
update keyup event to update model
Browse files Browse the repository at this point in the history
  • Loading branch information
@kenhyuwa
kenhyuwa committed Mar 20, 2021
1 parent 1640227 commit 86fd62d
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 70 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@ All notable changes to this project will be documented in this file.

- Fix bug `start-from` if using localization.

## [1.0.11]

- Added trigger `emit` on keyup event.

[Released]: https://github.com/kenhyuwa/litepie-datepicker/
[1.0.0]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.0
[1.0.1]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.1
Expand All @@ -70,3 +74,4 @@ All notable changes to this project will be documented in this file.
[1.0.8]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.8
[1.0.9]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.9
[1.0.10]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.10
[1.0.11]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.11
35 changes: 21 additions & 14 deletions dev/serve.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,31 @@
class="bg-white dark:bg-gray-900 max-w-screen-2xl h-screen mx-auto flex items-stretch overflow-y-auto"
>
<div class="mt-10 w-full">
<div
class="max-w-lg mx-autos ml-auto px-6 py-5 bg-white dark:bg-gray-800 rounded-lg"
>
<div class="max-w-lg px-6 py-5 bg-white dark:bg-gray-800 rounded-lg">
<div class="flex flex-col">
<div class="w-full">
<litepie-datepicker
ref="s"
i18n="zh"
:use-range="true"
:formatter="formatter"
v-model="dateValue"
v-slot:default="{ value }"
trigger="away"
:disable-in-range="false"
:start-from="new Date(2018, 0, 1)"
i18n="id"
:formatter="{
date: 'DD MMMM YYYY',
month: 'MMM'
}"
:options="{
shortcuts: {
today: 'Hari ini',
yesterday: 'Kemarin',
past: period => period + ' hari terakhir',
currentMonth: 'Bulan ini',
pastMonth: 'Bulan lalu'
},
footer: {
apply: 'Terapkan',
cancel: 'Batal'
}
}"
:auto-apply="false"
:disable-date="d"
placeholder="Check"
v-model="dateValue"
>
</litepie-datepicker>
</div>
Expand Down Expand Up @@ -76,7 +83,7 @@ export default defineComponent({
},
setup() {
const away = ref(null);
const dateValue = ref(null);
const dateValue = ref([]);
const shortcuts = () => {
return [
{
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "litepie-datepicker",
"version": "1.0.10",
"version": "1.0.11",
"description": "A date range picker component for Vue.js and Tailwind CSS, dependent to day.js",
"main": "dist/litepie-datepicker.ssr.js",
"browser": "dist/litepie-datepicker.esm.js",
Expand Down
129 changes: 74 additions & 55 deletions src/litepie-datepicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -742,11 +742,39 @@ export default /*#__PURE__*/ defineComponent({
if (sd.isValid() && ed.isValid()) {
setDate(sd);
setDate(ed);
if (useArray()) {
emit('update:modelValue', [s, e]);
} else if (useObject()) {
const obj = {};
obj[start] = s;
obj[end] = e;
emit('update:modelValue', obj);
} else {
emit(
'update:modelValue',
useToValueFromArray(
{
previous: sd,
next: ed
},
props
)
);
}
}
} else {
const d = dayjs(pickerValue.value, props.formatter.date, true);
if (d.isValid()) {
setDate(d);
if (useArray()) {
emit('update:modelValue', [pickerValue.value]);
} else if (useObject()) {
const obj = {};
obj[start] = pickerValue.value;
emit('update:modelValue', obj);
} else {
emit('update:modelValue', pickerValue.value);
}
}
}
};
Expand Down Expand Up @@ -944,8 +972,6 @@ export default /*#__PURE__*/ defineComponent({
emit('update:modelValue', pickerValue.value);
}
}
isShow.value = false;
force();
};
const atMouseOver = date => {
Expand Down Expand Up @@ -1238,9 +1264,6 @@ export default /*#__PURE__*/ defineComponent({
) {
datepicker.value.next = datepicker.value.previous.add(1, 'month');
}
nextTick(() => {
force();
});
};
const emitShortcut = (s, e) => {
Expand Down Expand Up @@ -1360,27 +1383,27 @@ export default /*#__PURE__*/ defineComponent({
newValue => {
nextTick(() => {
placement.value = useVisibleViewport(LitepieRef.value);
});
if (newValue && pickerValue.value !== '') {
if (asRange()) {
const [s, e] = pickerValue.value.split(props.separator);
const start = dayjs(s, props.formatter.date, true);
const end = dayjs(e, props.formatter.date, true);
datepicker.value.previous = start;
if (start.isSame(end, 'month')) {
datepicker.value.next = start.add(1, 'month');
if (newValue && pickerValue.value !== '') {
if (asRange()) {
const [s, e] = pickerValue.value.split(props.separator);
const start = dayjs(s, props.formatter.date, true);
const end = dayjs(e, props.formatter.date, true);
datepicker.value.previous = start;
if (start.isSame(end, 'month')) {
datepicker.value.next = start.add(1, 'month');
} else {
datepicker.value.next = end;
}
} else {
datepicker.value.next = end;
datepicker.value.previous = dayjs(
pickerValue.value,
props.formatter.date,
true
);
datepicker.value.next = datepicker.value.previous.add(1, 'month');
}
} else {
datepicker.value.previous = dayjs(
pickerValue.value,
props.formatter.date,
true
);
datepicker.value.next = datepicker.value.previous.add(1, 'month');
}
}
});
}
);
Expand Down Expand Up @@ -1412,8 +1435,8 @@ export default /*#__PURE__*/ defineComponent({
});
onMounted(() => {
const locale = props.i18n;
nextTick(() => {
const locale = props.i18n;
import(`dayjs/locale/${locale}.js`)
.then(() => {
dayjs.locale(locale);
Expand Down Expand Up @@ -1467,27 +1490,25 @@ export default /*#__PURE__*/ defineComponent({
},
props
);
nextTick(() => {
if (e.isBefore(s, 'month')) {
datepicker.value.previous = e;
datepicker.value.next = s;
datepicker.value.year.previous = e.year();
datepicker.value.year.next = s.year();
} else if (e.isSame(s, 'month')) {
datepicker.value.previous = s;
datepicker.value.next = e.add(1, 'month');
datepicker.value.year.previous = s.year();
datepicker.value.year.next = s.add(1, 'year').year();
} else {
datepicker.value.previous = s;
datepicker.value.next = e;
datepicker.value.year.previous = s.year();
datepicker.value.year.next = e.year();
}
if (!props.autoApply) {
applyValue.value = [s, e];
}
});
if (e.isBefore(s, 'month')) {
datepicker.value.previous = e;
datepicker.value.next = s;
datepicker.value.year.previous = e.year();
datepicker.value.year.next = s.year();
} else if (e.isSame(s, 'month')) {
datepicker.value.previous = s;
datepicker.value.next = e.add(1, 'month');
datepicker.value.year.previous = s.year();
datepicker.value.year.next = s.add(1, 'year').year();
} else {
datepicker.value.previous = s;
datepicker.value.next = e;
datepicker.value.year.previous = s.year();
datepicker.value.year.next = e.year();
}
if (!props.autoApply) {
applyValue.value = [s, e];
}
} else {
datepicker.value.previous = dayjs(props.startFrom);
datepicker.value.next = dayjs(props.startFrom).add(1, 'month');
Expand All @@ -1513,16 +1534,14 @@ export default /*#__PURE__*/ defineComponent({
}
if (s && s.isValid()) {
nextTick(() => {
pickerValue.value = useToValueFromString(s, props);
datepicker.value.previous = s;
datepicker.value.next = s.add(1, 'month');
datepicker.value.year.previous = s.year();
datepicker.value.year.next = s.add(1, 'year').year();
if (!props.autoApply) {
applyValue.value = [s];
}
});
pickerValue.value = useToValueFromString(s, props);
datepicker.value.previous = s;
datepicker.value.next = s.add(1, 'month');
datepicker.value.year.previous = s.year();
datepicker.value.year.next = s.add(1, 'year').year();
if (!props.autoApply) {
applyValue.value = [s];
}
} else {
datepicker.value.previous = dayjs(props.startFrom);
datepicker.value.next = dayjs(props.startFrom).add(1, 'month');
Expand Down

0 comments on commit 86fd62d

Please sign in to comment.