A timestamp string is stored in database like so:
startsAt: 1535705100000
endsAt: 1535708100000
currently there is as a const endTime that should convert the timestamp string into a human-readable, as well as a TimeInput field like this:
import Moment from "react-moment";
..
const endTime = (
<Moment unix format="HH:mm">
{endsAt / 1000}
</Moment>
);
.
..
import { TimeInput } from "semantic-ui-calendar-react";
<TimeInput
..
name="startsAt"
placeholder="00:00"
value={endTime}
..
/>
With that const endTime declared, what is being rendered to the input field is [object Object].
The question is - whether I can use to create a constant at all to be displayed as a value in the TimeInput component.
OR/ALSO - what is the best way to render a readable time from a string in such scenario? Desired output: H:mm
Many thanks in advance!
Take a look at your console. My guess is you are probably also getting a prop-type error for the value prop on your TimeInput component. It is rendering [object Object] because you are passing a React component there instead of a string. So it looks like value does not accept a React component as input.
You are using react-moment as your package to convert time. But it is always going to render some sort of html tag around your string when converting the time displayed. You should instead try using moment instead. The main library will return you an actual string which you can directly pass to your value.
Q: whether I can use to create a constant at all to be displayed as a value in the TimeInput component.
A: Yes you can!
BTW you have messed up types - this is a cause why your example doesn't work correctly.
Let's look on types:
endTime is described as const of type JSX.Element
property value of TimeInput element has type of string
So you are using incompatible types as compatible!
The example of how Moment, moment and TimeInput should be used together:
import "./styles.css";
import moment from "moment";
import Moment from "react-moment";
import { TimeInput } from "semantic-ui-calendar-react";
export default function App() {
const endsAt = 1535708100000;
return (
<div className="App">
<h1>React-moment usage example</h1>
<Moment unix format="HH:mm">
{endsAt / 1000}
</Moment>
<TimeInput
name="startsAt"
placeholder="00:00"
value={moment(endsAt).format("HH:mm")}
onChange={() => {
return;
}}
/>
</div>
);
}
Take a look onto working example here: https://codesandbox.io/s/epic-napier-kc6q6k?file=/src/App.tsx
Related
Working on an update to Replace Moment.js with date-fns for Ant Design's DatePicker based on the documentation which seems to be working fine.
Mainly it's suggesting to create the following:
import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns'
import generatePicker from 'antd/es/date-picker/generatePicker'
const DatePicker = generatePicker<Date>(dateFnsGenerateConfig)
Then use the component as below:
<DatePicker.RangePicker
placeholder={['From', 'To']}
onChange={range => setRange(range)}
value={range}
/>
For the above the following state has been created with the type RangeValue:
const [range, setRange] = useState<RangeValue<Date>>(
[from, to]
)
The RangeValue type has been imported as the following:
import { RangeValue } from 'rc-picker/lib/interface'
// technically:
// import { RangeValue } from '../../../../node_modules/rc-picker/lib/interface'
Question:
I found only this comment in one of the questions here where we have similar conversation.
Is there any way to import the RangeValue type, maybe from Ant Design? Thank you!
I was having a hard time typing antd values. Seems like they don't provide any easy option. Eventually ended up on using this:
type RangeValue = Parameters<NonNullable<React.ComponentProps<typeof DatePicker.RangePicker>['onChange']>>[0]
That will pull out the type of the first argument that is sent into the onChange function. It will also work with other events (onClick, onBlur etc). You can also pull out the types of other arguments simply by increasing the number in the square brackets.
Now you can assign this type to your onChange handler:
const handleOnChange = (dates: RangeValue, formattedDates: string[]) => {
//do something
return dates
}
I want to remove "00" from time in react-big-calendar but not able to find the way.
If you had looked into Localization and Date Formatting in the Readme / Manual, you could have easily done it using the following. TBH, it's right there in the Getting Started - you need to use dateFormat:
import BigCalendar from 'react-big-calendar'
import moment from 'moment'
// Setup the localizer by providing the moment (or globalize) Object
// to the correct localizer.
const localizer = BigCalendar.momentLocalizer(moment) // or globalizeLocalizer
const MyCalendar = props => (
<div>
<BigCalendar
localizer={localizer}
events={myEventsList}
startAccessor="start"
endAccessor="end"
dateFormat="h t"
/>
</div>
)
Preview
Related: How to set momentLocalizer (moment.js) for react-big-calendar (fullcalendar.js)?
My date-time format from the api result is 2019-12-30T06:16:48.453Z. It is not supported by the react-datepicker.
My code is following and is a functional component. I didn't write the complete code below. Added just the required parts.
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
<DatePicker
selected={'2019-12-30T06:16:48.453Z'}
{...props}
/>
I also tried adding moment by importing it and used as selected={moment('2019-12-30T06:16:48.453Z')}
I'm getting the error in both cases like Maximum update depth exceeded.
Still version 1.8 of react datepicker they were using moment, to reduce the package size they are using the native Date Objects. reference
So you can update your code as shown below
function App() {
return (
<div className="App">
<DatePicker selected={new Date("2019-12-30")} />
<DatePicker selected={new Date("2019-12-30T06:16:48.453Z")} />
</div>
);
}
working codesandbox
Update
to get the required format react datepicker has a prop called dateFormat, so you can add like this dateFormat="dd/MM/yyyy", See here
Maximum update depth exceeded
This error happens when your function call inside return of render method exceeds limits. Can you checkout any other function calls inside your component.
And for
react-datepicker
try basic JavaScript Date api.
selected={new Date('2019-12-30T06:16:48.453Z')}
This should work
const datee='2019-12-30T06:16:48.453Z';
let filt = Date(datee);
console.log(filt);
document.write(filt);
This error about infinite loop .
You can check this issue : ReactJS: Maximum update depth exceeded error
And also you can set dateFormat in DatePicker component like : dateFormat="MMMM d, yyyy h:mm aa"
Check this for formats: https://reactdatepicker.com/
I'm trying to set the locale of blueprintjs DateRangeInput. The docs state that the Component uses Moment.js for localisation. So I tried to set locale="de", but the language is English still. Any ideas what is missing to get a translated date input?
I'm fairly new to React programming so I can't be sure that it has nothing to do with my React skills, even tho passing the props seems quite right to me.
<DateRangeInput
locale={"de"}
value={dates}
onChange={...}
/>
try adding this import "moment/locale/de" to the top of the file
i think blueprint uses new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) to remove the locales from moment which is pretty common since moment is really large.
if that doesn't work try adding this to your webpack plugins
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de/)
The DateTime components (Date picker, Date range picker, Time picker, Date time picker, Date input, and Date range input) all depend on react-day-picker.
To set the desired locale, according to the react-day-picker documentation you need to import the desired locale from moment as mentioned above and set the localeUtils (a set of functions used to render the component based on the current locale).
The code below is how it works.
import React from 'react';
import { DateRangeInput } from "#blueprintjs/datetime";
import 'react-day-picker/lib/style.css';
// Include the locale utils designed for moment
import MomentLocaleUtils from 'react-day-picker/moment';
// Make sure moment.js has the required locale data
import 'moment/locale/ja';
export default class LocalizedExample extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<DateRangeInput localeUtils={MomentLocaleUtils} locale='ja' />
</div>
);
}
}
I'm trying to isolate why React/Redux/Redux-Form is automatically converting my payload to a string, whenever I focus and blur a input field.
There must be some process that is interfering but I don't know how to troubleshoot.
I've tried using the ReduxDevTools Chrome Extension which basically outputs :
type(pin): "##redux-form/INITIALIZE"
▶meta(pin)
▶payload(pin)
Amount(pin): 2222
type(pin): "##redux-form/FOCUS"
▶meta(pin)
type(pin): "##redux-form/BLUR"
▶meta(pin)
touch(pin): true
payload(pin): "2222.00"
Do you need to use redux-form?
If your data can remain within the context of the component, it should.
Here is one option, provided you don't need your data in the global app state:
import React, { Component } from 'react';
import wrapStateHelpers from 'react-state-helpers';
class Example extends Component {
render() {
const { mut, values: { someNumber } } = this.props;
return (
<input
type='number'
value={someNumber}
onChange={mut('someNumber', parseInt)} />
);
}
}
export default wrapStateHelpers(Example);
This just provides an event handler and wrapping component that manages form state in the component-level-state and then passes that state as the values object in the props to your component.
Note the parseInt passed to mut. Input fields nearly always return a string, and react-state-helpers provides an api for data conversion (second parameter to mut can be any function)
Here is a link to the project / docs, if this
The answer in this case was painfully obvious in retrospect. I was using normalize to format the value using .toFixed(2) which unknown to me, always returns a string.