Всем привет, подскажите пожалуйста как разместить компонент на сайте, в моем случае bitrix. На локалке через npm настроил, работает, а вот как на сайте сделать не могу понять. npm run build наверное не подходит. Мне нужно, чтобы компонент можно было вызвать на главной странице, например кликнув на кнопку. Вот сам
календарь
app.js
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import DateFnsUtils from '@date-io/date-fns'; // choose your lib
import { ThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from "@material-ui/core";
import format from "date-fns/format";
import ruLocale from "date-fns/locale/ru";
import {
DateTimePicker,
MuiPickersUtilsProvider,
} from '@material-ui/pickers';
import TextField from "@material-ui/core/TextField";
class LocalizedUtils extends DateFnsUtils {
getDatePickerHeaderText(date) {
return format(date, "d MMM yyyy", { locale: this.locale });
}
}
const localeCancelLabelMap = {
ru: "отмена",
};
const defaultMaterialTheme = createMuiTheme({
palette: {
primary: {
// light: will be calculated from palette.primary.main,
main: '#e61e23',
// dark: will be calculated from palette.primary.main,
// contrastText: will be calculated to contrast with palette.primary.main
},
},
});
function App() {
const [selectedDate, handleDateChange] = useState(new Date());
var newDate = new Date();
newDate.setFullYear(newDate.getFullYear() + 1);
return (
<MuiPickersUtilsProvider utils={LocalizedUtils} locale={ruLocale}>
<ThemeProvider theme={defaultMaterialTheme}>
<DateTimePicker
cancelLabel={"Отмена"}
autoOk
ampm={false}
disablePast
minDate={new Date()}
maxDate={newDate}
value={selectedDate}
onChange={handleDateChange}
label="24h clock"
format="d MM yyyy HH:mm"
/>
</ThemeProvider>
</MuiPickersUtilsProvider>
);
}
export default App;
Простой
Простой