I'm new to React and NextJS, I have a small project that uses Hotel Datepicker Master with Fecha date formatting and parsing, which is installed on my project. I'm trying to convert my project to React/NextJS but the problem is I can't figure out how to convert my Vanilla JS code to NextJS.
Here is my Vanilla JS code:
(function() {
let today = new Date();
let tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
let input1 = document.querySelector('#checkIn');
input1.value = fecha.format(today, 'YYYY-MM-DD') + ' - ' +
fecha.format(tomorrow, 'YYYY-MM-DD');
let demo1 = new HotelDatepicker(input1);
})();
And here is what I tried so far on NextJS:
_app.js file
import '../styles/globals.css'
import '../hotel-datepicker-master/dist/css/hotel-datepicker.css'
import '../node_modules/fecha/dist/fecha.min.js'
import '../hotel-datepicker-master/dist/js/hotel-datepicker.js'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
hero.jsx file
useEffect(() => {
let today = new Date();
let tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
let input1 = dateInput.current.value;
input1.value = fecha.format(today, 'YYYY-MM-DD') + ' - ' +
fecha.format(tomorrow, 'YYYY-MM-DD');
let demo1 = new HotelDatepicker(input1);}, [dateInput]);
Result: Uncaught TypeError: Cannot read properties of undefined (reading 'format')
Can you please give me an idea of how to do the conversion? Thank you in advance.
Try
import { format } from 'fecha';
And then
input1.value = format(today, 'YYYY-MM-DD') + ' - ' +
I decided to use react date range picker instead of hotel date picker master with fecha, it is easy to implement on nextjs. Thank you for your help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.