merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3210 from Haendlerbund/improve-date-pickers 

add a 'clear' button beneath date and datetime pickers
This commit is contained in:
Jitendra Singh 2020-06-16 13:52:51 +05:30 committed by GitHub
parent 44bceedd05 a5720e76d5
commit 3a948e0d50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/Webkul/Ui/src/Resources/assets/js/components/date.vue
View File

@ -1,15 +1,20 @@
<template>
<span>
<span style="display: flex;align-items: center;">
<slot>
<input type="text" :name="name" class="control" :value="value" data-input>
</slot>
<button
class="btn"
style="height:100%;margin-left: 8px; margin-top: 5px;"
@click.prevent="clear"
> <span class="icon trash-icon"></span> </button>
</span>
</template>
<script>
import Flatpickr from 'flatpickr';
import Flatpickr from 'flatpickr';
export default {
export default {
props: {
name: String,
value: String,
@ -27,12 +32,19 @@
var element = this.$el.getElementsByTagName('input')[0];
this.datepicker = new Flatpickr(
element, {
allowInput: true,
altFormat: 'Y-m-d',
dateFormat: 'Y-m-d',
weekNumbers: true,
onChange: function(selectedDates, dateStr, instance) {
this_this.$emit('onChange', dateStr)
},
});
}
},
methods: {
clear() {
this.datepicker.clear();
}
}
};
</script>

18
packages/Webkul/Ui/src/Resources/assets/js/components/datetime.vue
View File

@ -1,15 +1,20 @@
<template>
<span>
<span style="display: flex;align-items: center;">
<slot>
<input type="text" :name="name" class="control" :value="value" data-input>
</slot>
<button
class="btn"
style="height:100%;margin-left: 8px; margin-top: 5px;"
@click.prevent="clear"
> <span class="icon trash-icon"></span> </button>
</span>
</template>
<script>
import Flatpickr from "flatpickr";
import Flatpickr from "flatpickr";
export default {
export default {
props: {
name: String,
value: String
@ -35,10 +40,17 @@
dateFormat: "Y-m-d H:i:S",
enableTime: true,
time_24hr: true,
weekNumbers: true,
onChange: function (selectedDates, dateStr, instance) {
this_this.$emit('onChange', dateStr)
},
});
},
methods: {
clear() {
this.datepicker.clear();
}
}
};
</script>