Question T2723
Visible to All Users

Implementing JqueryUI DatePicker

created 6 years ago (modified 6 years ago)

I am trying to implement the JQuery UI datepicker in react based on this (broken) demo https://stackblitz.com/edit/surveyjs-widgets-react?file=index.js. The JQuery UI picker question simply does not show up. I would appreciate input on what I am doing wrong, and a link to a working demo if possible. My code is below

index.js

JavaScript
import React, { Component } from 'react'; import { render } from 'react-dom'; import $ from 'jquery'; import JqueryUiDatepicker from './JqueryUiDatepicker.tsx'; export default class Survey extends Component { componentWillMount() { import('jquery-ui/ui/widgets/datepicker.js'); window['$'] = window['jQuery'] = $; } render() { return ( <JqueryUiDatepicker /> ); } } render(<Survey />, document.getElementById('root'));

JqueryUiDatepicker

JavaScript
import React, { Component } from 'react'; import * as Survey from 'survey-react'; import * as widgets from 'surveyjs-widgets'; export default class JqueryUiDatepicker extends Component { componentWillMount() { Survey.Survey.cssType = 'bootstrap'; Survey.defaultBootstrapCss.navigationButton = 'btn btn-green'; widgets.jqueryuidatepicker(Survey); } render() { var json = { pages: [ { name: 'name_page', elements: [ { name: "date", type: "datepicker", inputType: "date", title: "JQuery UI picker:", dateFormat: "mm/dd/yy", isRequired: true }, { name: 'date', type: 'text', inputType: 'date', title: 'Normal Date Picker:', dateFormat: 'mm/dd/yy', isRequired: true, } ], }, ] }; var model = new Survey.ReactSurveyModel(json); return <Survey.Survey model={model} />; } }

relevant dependencies

"survey-react": "^1.0.89",
"surveyjs-widgets": "^1.1.13",
"react": "16.8.6",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"bootstrap": "^4.3.1",

Answers approved by surveyjs Support

created 6 years ago (modified 6 years ago)

Hello,

We are not quite understand you. SurveyJS have already JqueryUI DatePicker custom widget. It is not suit for you?

Thanks, Alex
SurveyJS Team

    Comments (2)

      I am trying to implement that widget in react using es modules. I am trying to follow the JqueryUI DatePicker custom widget example given on your repository page https://github.com/surveyjs/widgets but it is broken https://stackblitz.com/edit/surveyjs-widgets-react. Is there a working example of this widget used with react and es modules?

        Hello,

        You can check this repo - https://github.com/surveyjs/surveyjs_react_quickstart.

        Thanks, Serge
        SurveyJS Team