JQuery UI Datepicker Custom Widget

Source code: Survey setup
Survey.defaultBootstrapCss.navigationButton = "btn btn-primary";
Survey.Survey.cssType = "bootstrap";
Survey.JsonObject.metaData.addProperty("dropdown", {name: "dateFormat", default: "mm/dd/yy", choices: ["mm/dd/yy", "yy-mm-dd", "d M, y", "d MM, y", "DD, d MM, yy", "'day' d 'of' MM 'in the year' yy"]});
var survey = new Survey.Model({
    pages: [
        { name:"page1", questions: [
            {name:"date", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy"}
        ]}
    ]
});




var widget = {
    name: "datepicker",
    isFit : function(question) { return question.name == 'date'; }
}

Vue.component(widget.name, {
    props: ['question', 'css', 'isEditMode'],
    template: "<input id='widget-datepicker' type='text' style='width: 100%;'>",
    mounted: function () {
        var vm = this
        var widget = $(vm.$el).datepicker({dateFormat: vm.question.dateFormat});
        widget.on("change", function (e) {
            vm.question.value = $(this).val();
        });
        vm.question.valueChangedCallback = function() {
            widget.datepicker('setDate', new Date(vm.question.value));
        }
        widget.datepicker('setDate', new Date(vm.question.value || Date.now));
    },
    destroyed: function () {
        $(this.$el).off().remove();
    }
})
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);
new Vue({ el: '#surveyElement', data: { survey: survey } });




Date format: (default is 'mm/dd/yy')

var q = survey.getQuestionByName('date');
q.dateFormat = yourvalue; 
survey.render();