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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
<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();
}
}
} |
