lightweight, powerful javascript datetimepicker with no dependencies - GitHub - flatpickr/flatpickr: lightweight, powerful javascript datetimepicker with no dependencies

croganm•2y ago

Just add it with on Mount *useEffect.

NikitaOP•2y ago

Its not exactly what I want but its the best for now How implement it with react? Send codesandbox please

croganm•2y ago

I'm on mobile, I can't send codesandbox

croganm•2y ago

https://www.npmjs.com/package/react-flatpickr

npm

react-flatpickr

flatpickr for React. Latest version: 3.10.13, last published: a year ago. Start using react-flatpickr in your project by running npm i react-flatpickr. There are 143 other projects in the npm registry using react-flatpickr.

Jochem•2y ago

"Send codesandbox please" comes off really entitled and probably puts people off trying to help, I know it does me. We're not here to write your code or read documentation for you and implement exactly what you want, this channel is intended to help you on your way if you're stuck on something. Some people might make examples of what you want, or write some code for you, but please don't demand people do so

NikitaOP•2y ago

I got you It just would be good Cause I never did something similar A no - once did but it was date-range

Jochem•2y ago

The best way to learn is to do, though, so people writing code you can copy/paste isn't as effective if you want to keep asking questions like this, that's fine, it's not against any rules, but I've seen quite a few of your questions get low response, and I'm pretty sure it's at least influenced by "send codesandbox please"

NikitaOP•2y ago

Ok I have some progress https://nn8vds-3000.csb.app/

NikitaOP•2y ago

.input-time {
  padding: 1rem 2rem;
  font-size: 1.4rem;
  border: 1px solid #aaaaaa;
  border-radius: 12px;
  outline: none;
}

.react-datepicker__navigation {
  right: 90px !important;
}

.react-datepicker__day--outside-month {
  color: gray;
}

.input-time {
  padding: 1rem 2rem;
  font-size: 1.4rem;
  border: 1px solid #aaaaaa;
  border-radius: 12px;
  outline: none;
}

.react-datepicker__navigation {
  right: 90px !important;
}

.react-datepicker__day--outside-month {
  color: gray;
}

import React, { useState } from "react";
import "./styles.css";
import DatePicker from "react-datepicker";

export default function App() {
  const [startDate, setStartDate] = useState();
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <DatePicker className="input-time"
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        showTimeSelect
        dateFormat="dd.MM.yyyy HH:mm"
      />
    </div>
  );
}

import React, { useState } from "react";
import "./styles.css";
import DatePicker from "react-datepicker";

export default function App() {
  const [startDate, setStartDate] = useState();
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <DatePicker className="input-time"
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        showTimeSelect
        dateFormat="dd.MM.yyyy HH:mm"
      />
    </div>
  );
}

thats for me and others Now I want get date value and change design

NikitaOP•2y ago

When I try it with TypeScript I have no appied styles

Gaming

Programming

How add time in react-date-range?