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",
    htmlTemplate: "<input id='widget-datepicker' type='text' style='width: 100%;'>",
    isFit : function(question) { return question.name == 'date'; },
    afterRender: function(question, el) {

        var widget = $(el).find('#widget-datepicker').datepicker({dateFormat: question.dateFormat});

        widget.on("change", function (e) {
            question.value = $(this).val();
        });
        question.valueChangedCallback = function() {
            widget.datepicker('setDate', new Date(question.value));
        }
        widget.datepicker('setDate', new Date(question.value || Date.now));
    }
}
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);



ReactDOM.render(<Survey.Survey model={survey}/>, document.getElementById("surveyElement"));




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

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