调查 js 中矩阵日期选择器类型的自定义小部件

Posted 2023-05-07

【中文标题】调查 js 中矩阵日期选择器类型的自定义小部件

【英文标题】：custom widget for matrix datepicker type in survey js

【发布时间】：2021-11-04 01:04:06

【问题描述】：

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

【参考方案1】：

在使用引导日期选择器之前，请确保您已添加以下脚本和样式表，就在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

【讨论】：

感谢@Orilux。我会检查并回复你。