surveyjs example


<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Knockout</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
    
    <script src="https://surveyjs.azureedge.net/0.12.20/survey.ko.js"></script>
    
    
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" /> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="surveyElement"></div>
    <div id="surveyResult"></div>
    <script src="./index.js"></script>
</body>

</html>


Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

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"]});

window.survey = new Survey.Model({
    pages: [
        { name:"page1", questions: [
            {name:"date", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true}
        ]}
    ]
});
survey.onComplete.add(function(result) {
	document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});


var widget = {
    name: "datepicker",
    htmlTemplate: "<input class='widget-datepicker' type='text' style='width: 100%;'>",
    isFit: function(question) {
        return question.getType() === 'text' && question.inputType === 'date';
    },
    afterRender: function(question, el) {
        var $el;

        $el = $(el);

        var widget = $el.datepicker({
            dateFormat: question.dateFormat,
            onSelect: function(dateText) {
                question.value = dateText;
            }
        });
        question.valueChangedCallback = function() {
            widget.datepicker('setDate', new Date(question.value));
        }
        question.valueChangedCallback();
        question.value = new Date();
    },
    willUnmount: function(question, el) {

        $(el).datepicker("destroy");

    }
}

Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);



survey.render("surveyElement");


window.surveyForceUpdate = function() {
    document.getElementById("surveyElement").innerHTML = "";

    survey.render();

}


.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
}

.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;
}

.panel-footer {
    text-align: right;
    background-color: #fff;
}