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

I am having trouble with this ajax timer it is not doing what I expect and does not execute I am having trouble with this ajax timer it is not doing what I expect and does not execute

Ok i am back to this not executing I have in php head the following https://deniserose.000webhostapp.com/fetch_sql.php <head> <title>Audio Stream</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> I have in java script which i am loading at end of the php file <script src = 'js/fetch_updater.js'></script> now this never seems to get run // Start Clock refresh // uses new new Ajax.PeriodicalUpdater( // in main fetch file to trigger the auto update of the page. // Written by Denise Rose var gUpdateDiv="...
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