CODEWITHSUNDEEP
angulardatepickerbootstrap-datepickersurveyjs
Viswa
Viswa

Reputation: 821

custom widget for matrix datepicker type in survey js

In my project, we are using survey JS for filling forms in angular application. In Survey Matrix , the default date picker is jQuery UI Date picker. It is hard to use as it does not have ease of year access navigation and other features. I would like to use Bootstrap date picker which is better than this default one. But I am unsure how I can invoke this custom widget whenever I select the date picker cell type in Matrix. I have referred the below URL https://surveyjs.io/Examples/Library/?id=custom-widget-datepicker&platform=Angular#content-js and it has example of how to display date picker type and not sure how I can inject this into Matrix. Any help is much appreciated.

Upvotes: 0

Views: 672

Answers (1)

Oggy
Oggy

Reputation: 1666

Before using the bootstrap datepicker please make sure you have added the following scripts and stylesheets, just before the surveyjs-widgets.min.js file:

...
    <script src="https://unpkg.com/[email protected]/moment.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" type="text/css" rel="stylesheet"/>
...
    <script src="https://unpkg.com/[email protected]/surveyjs-widgets.min.js"></script>

After that you can specify the custom widget column type for your matrix like so:

var json = {
    questions: [
        {
            type: "matrixdynamic",
            name: customDateMatrix",
            title: "Bootstrap date picker example",
            addRowText: "Add Date",
            columns: [
                {
                    name: "theDate",
                    "cellType": "bootstrapdatepicker",
                    "dateFormat": "mm/dd/yy",
                    title: "Pick a date"
                }
            ],
            rowCount: 1
        }
    ]
};

Here's a version of the custom widget matrix example with the bootstrap picker in the second column: https://plnkr.co/edit/BLzBzlMwuLEUaLn5

Upvotes: 2

Related Questions