0

在我的项目中，我们使用调查 JS 来填写 Angular 应用程序中的表格。在 Survey Matrix 中，默认的日期选择器是 jQuery UI 日期选择器。它很难使用，因为它没有易于访问的年度导航和其他功能。我想使用比默认选择器更好的 Bootstrap 日期选择器。但我不确定当我在 Matrix 中选择日期选择器单元格类型时如何调用此自定义小部件。我已经引用了以下 URL https://surveyjs.io/Examples/Library/?id=custom-widget-datepicker&platform=Angular#content-js ，它有如何显示日期选择器类型的示例，但不确定我如何注入这进入矩阵。任何帮助深表感谢。

4

1 回答 1

1

在使用 bootstrap datepicker 之前，请确保在surveyjs-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

于 2021-09-07T12:49:05.517 回答