How do I format ReactJs date picker to look normal? How do I format ReactJs date picker to look normal? 

import React, { useState } from "react";
import DatePicker from "react-datepicker";

function GenericCalendarRange() {
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);
    return (
        <>
            <h4 className="datepicker__title"> From </h4>
            <DatePicker
                selected={startDate}
                onChange={(date) => setStartDate(date)}
                selectsStart
                startDate={startDate}
                endDate={endDate}
            />
            <h4 className="datepicker__title"> To </h4>
            <DatePicker
                selected={endDate}
                onChange={(date) => setEndDate(date)}
                selectsEnd
                startDate={startDate}
                endDate={endDate}
                minDate={startDate}
            />
        </>
    );
}

export default GenericCalendarRange;

My code ends up looking quite odd in the storybook story. Storybook output. Am I missing something? Is there a formatting mistake going on or not being implemented correctly?



from Stackoverflow

Comments

Post a Comment

Popular posts from this blog

\\u0000 cannot be converted to text error \\u0000 cannot be converted to text error

I am using NextJS and supabase to insert some data into PostgreSQL database. Data is array of objects. The error is like this \\u0000 cannot be converted to text. unsupported Unicode escape sequence . There is no unicode character like \\u0000 in my data. There is a error response but I cant see which keys value is causing the error. Is there any way to resolve this issue? const Data = async (req, res) => { try { const { data, error } = await supabase.from('db').insert([]) return res.status(200).json({ data: data, error: error, }); } catch (error) { console.log(error); } } from Stackoverflow
Read more

How to create @click on select menu in VueJS How to create @click on select menu in VueJS

I wanna create @click in my select menu which is empty by default. I tried to create it in select , option and even div , but it doesn't to seem work. So, I have this code in my template : <div style="float: right; padding-right: 13px"> <span> Sort by: </span> <select v-model="sort"> <option v-for="item in items" :key="item.id" :value="item" @click="sortBy" v-text="item.title" ></option> </select> </div> This in data : items: [ { id: 1, title: 'Price: Low to High', sort: 1 }, { id: 2, title: 'Price: High to Low', sort: 2 }, { id: 3, title: 'Newest first', sort: 3 }, { id: 4, title: 'Oldest first', sort: 4...
Read more

Using Ts-Standard linting, JSDoc comment at beginning of file triggers "This rule requires the `strictNullChecks` compiler option" error Using Ts-Standard linting, JSDoc comment at beginning of file triggers "This rule requires the `strictNullChecks` compiler option" error

I'm using Typescript and the TS-standard version of StandardJS's ESlint plugin and extension for VSCode. I have been using JSDoc-style comment blocks ( /** Some text */ ) at the beginning of javascript and now typescript files to indicate things like author and give a general overview of the contents of the file. I was using the standardJS eslint plugin already, but it generally didn't work properly on my code library, never figured out why. Recently I started upgrading my codebase to Typescript, and now I'm getting this error on all of these comment blocks: This rule requires the `strictNullChecks` compiler option to be turned on to function correctly. (@typescript-eslint/strict-boolean-expressions)ts-standard(@typescript-eslint/strict-boolean-expressions) I tried turning on the strictNullChecks option, and it did indeed clear that error, but is also a nightmare for certain places where I know values aren't going to be null if the object exists at all (and using...
Read more