Cart Licenses Contact Support Online Creator Log in/Register
v 1.9.50

Bootstrap Datepicker


                    var json = {
  "elements": [
      "name": "date",
      "type": "bootstrapdatepicker",
      "inputType": "date",
      "title": "Your favorite date:",
      "dateFormat": "mm/dd/yy",
      "isRequired": true

                    window.survey = new SurveyKnockout.Survey(json);
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(, null, 3);

<!DOCTYPE html>
<html lang="en">
    <title>Bootstrap Datepicker, Knockoutjs Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
    <script src=""></script>
    <script src=""></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-knockout-ui/survey-knockout-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">
<script src=""></script>
<link rel="stylesheet" href="">
<script src=""></script>
<link href="" type="text/css" rel="stylesheet"/>    <script src="/DevBuilds/surveyjs-widgets/surveyjs-widgets.min.js"></script>

<body style="margin: 0">
            <div id="surveyElement" style="display:inline-block;width:100%;">
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>


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

  • Default - mm/dd/yy
  • ISO 8601 - yy-mm-dd
  • Short - d M, y
  • Medium - d MM, y
  • Full - DD, d MM, yy
  • With text - 'day' d 'of' MM 'in the year' yy

Please note: Unlike jQuery date-picker, bootstrap date-picker doesn't support changing date-format on the fly. You have to set the date format before survey rendering, in JSON or survey model.

Third-party libraries: Bootstrap Datepicker Apache