jquery UI DatePicker in Angular

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]

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

[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.