Question T7989
Visible to All Users

Trying to get bootstrap date picker and select2 working with Angular

created 4 years ago

Hi,
Thanks a bunch for all your support so far - you guys really go out of your way to ensure your users are satisfied. Kudos!

I unfortunately have yet another request. I am trying to render surveys in an angular7 app - while the regular surveys work fine, I am looking to use a datepicker for the date field and select 2 for the dropdown. If I run the angular cli with the modern/default theme, the select2 and the datepicker show up but with the same json if apply the bootstrap theme, these do not. I see examples with angular using surveyjs-widgets with the js imported in html but I cant find examples of how I would get this embedded into my angular component.

In my angular component if I use the following statement

import * as Survey from "surveyjs-widgets";

and use that as my survey variable - I am not able to apply themes (e.g. Bootstrap)

If I import * as Survey survey-angular then the select2 and datepicker components dont show up.

Any help with this would be greatly appreciated.

Sign in to comment on this post

Answers approved by surveyjs Support

created 4 years ago

Hello,

In order to get custom widget work you need to load custom widget code (surveyjs-widgets) and the 3rd party code of the widget itself.
Here is the working sample on our site - https://surveyjs.io/Examples/Library?id=custom-widget-bootstrapdatepicker&platform=Angular&theme=modern
Here is the working Angular sample with bootstrap datepicker in Codesandbox - https://codesandbox.io/s/surveyjs-angular-forked-xk2qg

Hope this help

Thanks, Serge
SurveyJS Team

    Comments (3)
    A A
    AbhijitBhattacharya 4 years ago

      So I copied this in my component but the question of type bootstrapdatepicker does not even render.I started with angular cli quickstart package that uses angular 7X. The code sandbox uses v10 of angular. Maybe the version of angular I am using is too old?

      ST ST
      Serge T 4 years ago

        Hello,

        We tested custom widgets with almost all Angular 2+ versions. The thing is most likely is that bootstrap date picker code is not loaded on the page or in your application. Do shared samples work on your side?

        Thanks, Serge
        SurveyJS Team

        A A
        AbhijitBhattacharya 4 years ago

          Hi - it worked finally. Issue was with imports of datepicker module. Thanks for your help

          Sign in to comment on this post
          created 4 years ago

          Hello,

          We have a demo repo illustrating how to integrate SurveyJS products into an Angular application - https://github.com/surveyjs/surveyjs_angular_cli
          Hope this helps.

          Thanks, Serge
          SurveyJS Team

            Comments (3)
            A A
            AbhijitBhattacharya 4 years ago

              Hi Serge - I have already looked at that - when I create my own component to render a custom survey the date picker and select2 plugins dont work. Can you point me to the part of the cli component code that references surveyjs-widgets?

              ST ST
              Serge T 4 years ago

                Sure. Here is the file - https://github.com/surveyjs/surveyjs_angular_cli/blob/master/src/app/components/survey.component.ts

                Thanks, Serge
                SurveyJS Team

                A A
                AbhijitBhattacharya 4 years ago

                  HI Serge - the example helped be get Select2 working. However, in the example there is no reference on how to get the bootstrapdatepicker working

                  For survey.component.ts:

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

                  import { init as initCustomWidget } from "./customwidget";

                  widgets.icheck(Survey);
                  widgets.select2(Survey);
                  widgets.inputmask(Survey);
                  widgets.jquerybarrating(Survey);
                  widgets.jqueryuidatepicker(Survey);
                  widgets.nouislider(Survey);
                  widgets.select2tagbox(Survey);
                  //widgets.signaturepad(Survey);
                  widgets.sortablejs(Survey);
                  widgets.ckeditor(Survey);
                  widgets.autocomplete(Survey);
                  widgets.bootstrapslider(Survey);
                  widgets.prettycheckbox(Survey);

                  initCustomWidget(Survey);

                  This does not appear enough to get the datepicker working
                  I added

                  widgets.bootstrapdatepicker(Survey);

                  before the initCustomWidget(Survey); but that did not help either. I added the bootstrap datepicker css and js to angular.json as well.

                  Am I missing any steps to get the datepicker working? Also I have date time picker - is there a way to get datetime picker dialog on text field that shows up in modern/default theme?

                  Sign in to comment on this post