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
JavaScriptimport 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
JavaScriptimport 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",