Survey-library: jquery UI DatePicker in Angular

[wollerman]

Are you requesting a feature, reporting a bug or ask a question?

Bug/Question

What is the current behavior?

I'm trying to use the jquery UI DatePicker example (https://surveyjs.io/Examples/Library/?id=custom-widget-datepicker&platform=Angular2) with Angular2 but I'm having issues. It seems like there shouldn't be anything special besides including jquery and specifying type of datepicker in the json. Is that all that's needed?

When I do those things the question simply doesn't render. I've recently pulled and now I'm on 1.0.1 release.

Also the editor does not support the datepicker type. If you copy the custom-widget-datepicker json into the editor (https://surveyjs.io/Editor/Editor/) it says the property type is incorrect in the object.

I'm unsure on how surveyjs knows to pick up and use the datepicker type. Looking in the source the only references I could find were in this plugins page: https://github.com/surveyjs/surveyjs/tree/master/src/plugins. And there it specifies to rebuild with some file changes.

I feel like I'm missing something simple here. Thanks!

Specify your

• browser: chrome
• browser version: 63.0.3239.132
• surveyjs platform: angular2
• surveyjs version: 1.0.1

[dmitrykurmanov]

Hello, you need to init the widget: please try the code:

import * as Survey from 'survey-react';
import * as widgets from 'surveyjs-widgets';
widgets.jqueryuidatepicker(Survey);

you can find examples for es6 here: https://stackblitz.com/edit/surveyjs-widgets-react?file=components%2FJqueryUiDatepicker.js

[wollerman]

I knew I was missing something. I installed that module, but unfortunately I'm still receiving JsonIncorrectTypeError from surveyModel.jsonErrors locally. I have the lines:

import * as Survey from 'survey-angular';
import * as widgets from 'surveyjs-widgets';

// component definition and constructor, etc. here

  ngOnInit() {
    widgets.jqueryuidatepicker(Survey);
    console.log(Survey.JsonObject.metaData);

    let surveyModel = new Survey.ReactSurveyModel(json);
}

And looking at the output of metaData I can see the classes which does not include datepicker. So it seems like it's not being loaded properly? Is there something else that would stop it from loading?

Also I think it would be helpful if there was a brief install description next to the documentation/examples for surveyjs-widgets. I was looking through this section and didn't see any mention of the separate requirement to import surveyjs-widgets.

[wollerman]

Looking through where the widget gets added I also checked: console.log(Survey.CustomWidgetCollection.Instance);. The widget datepicker seems to be available here:

// CustomWidgetCollection
{
  "widgetsValues": [
    {
      "name": "datepicker",
      "widgetJson": {
        "name": "datepicker",
        "title": "Date picker",
        "iconName": "icon-datepicker",
        "htmlTemplate": "<input class='form-control widget-datepicker' type='text' style='width: 100%;'>"
      },
      "htmlTemplate": "<input class='form-control widget-datepicker' type='text' style='width: 100%;'>"
    }
  ],
  "widgetsActivatedBy": {
    "datepicker": "customtype"
  },
  "onCustomWidgetAdded": {}
}

But as mentioned it's not in the Survey.JsonObject.metaData.classes.

[dmitrykurmanov]

Hello! We will create custom widgets examples for the angular in https://github.com/surveyjs/surveyjs_angular_cli repo I think it will helps

And we found a bug with an our signature_pad widget (it works in the react but not in the angular), so we will fix it and complete our angular examples.

[wollerman]

Great, thanks! Should I keep this open or follow the changes in the other repo and open something if I'm still having issues?

[dmitrykurmanov]

I think that we need to create a new issue in the widgets repo. And I've created it https://github.com/surveyjs/widgets/issues/23