测量js中矩阵日期选择器类型的自定义微件

Question

在我的项目中，我们使用survey JS在angular应用程序中填写表单。在勘测矩阵中，默认日期选取器为jQuery UI日期选取器。它很难使用，因为它没有易用性、访问性、导航性和其他功能。我想使用Bootstrap日期选择器，它比这个默认的好。但是当我在Matrix中选择日期选择器单元格类型时，我不确定如何调用这个自定义小部件。我已经参考了下面的网址https://surveyjs.io/Examples/Library/?id=custom-widget-datepicker&platform=Angular#content-js，它有如何显示日期选择器类型的例子，不确定我如何才能注入到矩阵中。任何帮助都是非常感谢的。

Answer 1

在使用引导程序日期选择器之前，请确保在-widgets.min.js文件之前添加了以下脚本和样式表：

...
    <script src="https://unpkg.com/moment@2.24.0/moment.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/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/surveyjs-widgets@1.8.64/surveyjs-widgets.min.js"></script>

之后，您可以指定矩阵的自定义小部件列类型，如下所示：

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

下面是自定义小部件矩阵示例的一个版本，其中第二列包含引导选取器：https://plnkr.co/edit/BLzBzlMwuLEUaLn5