We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Maximize productivity with
30% off* for a limited time
using BOOSTDEV30.
Includes 3- and 5-packs.
*Some exclusions may apply.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
<ejs-datepicker ref='datePicker' id='datepicker' placeholder='Select a date' :focus='onFocus'></ejs-datepicker> |
|
export default {
name: 'app',
data() {
return {
msg: 'Syncfusion EJ2 DatePicker Component'
}
},
methods: {
onFocus: function (args) {
this.$refs.datePicker.ej2Instances.show();
}
}
} |
|
<div class="datePicker">
<component id="date" :is="dynamicComponent"></component>
</div> |
|
Vue.component("some-other-component", {
template: ` <ejs-datepicker placeholder='Select a date' :focus='onFocus'></ejs-datepicker>`,
data: function () {
return {
};
},
methods: {
onFocus: function (args) {
if (args.model.inputElement.id == "date")
args.model.inputElement.ej2_instances[0].show();
}
}
});
export default Vue.extend({
name: "app",
data: function () {
return {
dynamicComponent: `some-other-component`
};
}
}); |
|
<template>
<div id="app">
<div v-for="date in listOfDate">
<ejs-datepicker ref="datePicker"
:showClearButton="false"
:floatLabelType="'Auto'"
:allowEdit="false"
:placeholder="'Date'"
:value="date"
:focus='onFocus'
></ejs-datepicker>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { DatePickerPlugin } from '@syncfusion/ej2-vue-calendars';
Vue.use(DatePickerPlugin);
export default {
data () {
return {
listOfDate: [new Date(), new Date("3/3/2019"), new Date("4/4/2019")]
}
},
methods: {
onFocus: function (args) {
args.model.show();
}
}
} |
