My application can get data from user. For this i have different inputs. One of my inputs is date Picker.
<Form.Item name="Picker" label="date">
<RangePicker
showTime={{ format: "HH:mm" }}
format="YYYY-MM-DD HH:mm"
onChange={onChange2}
onOk={onOk}
/>
</Form.Item>
The issue appear when i try to access data after clicking on submit button. In console i have all data from each input, but from RangePicker, the data is not structured, and i get:
Picker: Array[2]
0: Moment
1: Moment
The problem is that i can access this array, and display on fron end. How to do this?
link to my app: https://codesandbox.io/s/form-methods-ant-design-demo-kbwgk
Try this
import moment from 'moment'
const onFinish = values => {
const startDate = moment(values.Picker[0]).format("YYYY-MM-DD HH:mm");
const endDate = moment(values.Picker[1]).format("YYYY-MM-DD HH:mm");
console.log(startDate, endDate)
};
I got it,
on your rangepicker use
onFinish instead of onOk
<RangePicker
showTime={{ format: "HH:mm" }}
format="YYYY-MM-DD HH:mm"
onChange={onChange2}
onFinish={onFinish}
/>
working as specified
you press Ok twice , so the first onOk still doesnt include the second part of the range
sorry for not giving professional answer
Since you are getting it as an array of moment objects,try using moment js for formatting the moment js according to your needs
https://codesandbox.io/s/form-methods-ant-design-demo-sy4uq
function onOk(value) {
const start = moment(value[0]).format("YYYY-MM-DD HH:mm:ss");
const end = moment(value[1]).format("YYYY-MM-DD HH:mm:ss");
console.log(start, end);
}
const onFinish = values => {
const start = moment(values.Picker[0]).format("YYYY-MM-DD HH:mm:ss");
const end = moment(values.Picker[1]).format("YYYY-MM-DD HH:mm:ss");
console.log(start, end)
};
Related
I am trying to create react-datepicker component with custom styled input:
<DatePicker
selected={startDate}
customInput={<CustomInput inputRef={inputRef} />}
onChangeRaw={(e) => handleChangeRaw(e)}
onChange={(date: Date | null) => {
setStartDate(date);
}}
/>
const CustomInput = forwardRef((props: any, ref) => {
return <Input {...props} ref={ref} />;
});
I wanted to introduce validation (just simple validation that whatever user inputs will be formatted to the date so user cannot just type whatever he wants).
I created a function that would be formatting the input using onChangeRaw attribute in react-datepicker:
const handleChangeRaw = (date) => {
date.currentTarget.value = format(startDate, "dd/MM/yyyy");
};
However after using this I cannot type anymore. Anyone has idea how to use manual typing with custom input in react-datepicker with simple validation function?
Here is recreated issue in the sandbox:
https://codesandbox.io/s/react-datepicker-custominput-sample-forked-elx310?file=/src/App.tsx
selected={startDate}
Here react-datepicker expects a Date object.
However, when you trigger handleChangeRaw, you get an change event, with some value (date.currentTarget.value), but thats not in the Date notation that datepicker expects.
So my take on this would be;
onChangeRaw, convert the input value to a new Date.
If the date isn't valid, just ignore the change
Otherwise, create a new Date, and use setStartDate to change to that new date
const handleChangeRaw = (date) => {
const newRaw = new Date(date.currentTarget.value);
if (newRaw instanceof Date && !isNaN(newRaw)) {
setStartDate(newRaw);
}
};
Try it online
If I understand your issue correctly, you can add the following type to fix the typing.
const handleChangeRaw = (date: React.FocusEvent<HTMLInputElement>) => {
if (!startDate){
return
}
date.currentTarget.value = format(startDate, "dd/MM/yyyy");
};
date should have the type React.FocusEvent<HTMLInputElement>. Since startDate can be null, we have to check before using it. In this case I just return from the function. But you could also assign a default value here or something else.
So im using antd for my design in frontend with React. I want to store an object with datetime in database. I see that antd's Datepicker is capable of that but it always stores in my database with 00:00:00 as time. Date, month year are ok.
I tried to use moment().format('YYYY-MM-DD HH:mm:ss') and save it like that in the database but i get error Uncaught TypeError: date.clone is not a function
This is my datepicker. The issue raises when i try to use my setPickedFrom function from useState. Why is this a problem?
<DatePicker
allowClear={false}
placeholder="Rent from: "
// format="YYYY-MM-DD HH:mm:ss"
disabledDate={disabledDate}
onChange={(e) => onDateClear(e, "from")}
onOk={(date) =>
setPickedFrom(
moment(date).format("YYYY-MM-DD HH:mm:ss"),
"to"
)
}
value={pickedFrom ? pickedFrom : null}
showTime
className="date-picker2"
/>
Saving the dates function (Create Rent)
const createRent = () => {
axios
.post("http://localhost:5000/rents/createRent", {
date_from: pickedFrom,
date_to: pickedUntil,
userId: user.id,
itemId: currentItem.id,
})
.then(() => {
showNotification("Item rented");
setCurrentItem({});
setDifference(null);
setIsModalVisible(false);
setPickedFrom(null);
setPickedUntil(null);
})
.catch((e) => {
showNotification(e.response.data.message, "error");
});
};
I just need to find a way to save date and time in my database in the following format (YYYY-MM-DD HH:mm:ss) because this is the accepted format for my database.
This is what you are looking for
const onOk = (value) => {
console.log("onOk: ", moment().format());
console.log("onOk: ", typeof value);
console.log("onOk: ", value.format("YYYY-MM-DD HH:mm:ss"));
};
<DatePicker format="YYYY-MM-DD HH:mm:ss" showTime={true} onOk={onOK}/>
I'm using ant design for my react hook based development. I am retrieving date from database over a network call and the date retrieved from database is look like "2020-09-01T05:02:00.000+0000". It is a string. I have to parse this date and show the date value and time value through antd datePicker in my page. Though I've success with setting up date part but I'm stuck with setting up the time. Here is my code,
###########
Here is my datepicker
###########
<DatePicker
name="Campaign-date"
defaultValue={moment(formData['Campaign-date'].split('T')[0])}
showTime={{
defaultValue: moment(formData['Campaign-date'].split('T')[1],'HH:mm'),
format: 'HH:mm'
}}
format={'YYYY-MM-DD HH:mm'}
style={{ width: '100%' }}
onChange={handleDateChange}
/>
##########################
Here is my handleDateChange function
##########################
const handleDateChange = date => {
setFormdata({
...formData,
'Campaign-date': date
.format('YYYY-MM-DD HH:mm')
.split(' ')
.join('T')
});
};
formData['Campaign-date'] is the date retrieved from the database. I feel the showTime attribute is not working as expected. I want to get a result of "05:02" but instead the value shown is, "00:00".
I have tried different variation in showTime such as,
defaultValue: moment('05:02','HH:mm'),
//or
defaultValue: moment(formData['Campaign-date'],'HH:mm')
//or
defaultValue: moment(formData['Campaign-date'].split('T')[1].split('.),'HH:mm')
but nothing is working. It is always setting the value as "00:00".
And I have no problem with my onChange functionality. It is working perfect. The date/time change code wise working as expected. It is just the view on my page is not showing correct time.
I'm really stuck with. Any help therefore, is much appreciated.
Ant Design DatePicker:
(sandbox)
import React from "react";
import ReactDOM from "react-dom";
import { DatePicker, Space } from "antd";
import moment from "moment";
import "./index.css";
import "antd/dist/antd.css";
const initialState = {
data1: "form field",
data2: "form field 2",
"Campaign-date": "2020-09-01T05:02:00.000+0000"
};
function FormComponent() {
const [formData, setFormData] = React.useState(initialState);
console.log(formData);
function onChange(value, dateString) {
if (value) {
setFormData({
...formData,
"Campaign-date": value.toISOString(true)
});
}
//console.log("Selected Time: ", value); //Moment object
//console.log("Formatted Selected Time: ", dateString); //String
}
return (
<Space direction="vertical" size={12}>
<DatePicker
name="Campaign-date"
defaultValue={moment(formData["Campaign-date"], "YYYY/MM/DD HH:mm")}
format={"YYYY/MM/DD HH:mm"}
showTime={{ format: "HH:mm" }}
onChange={onChange}
/>
<div style={{ marginTop: 16 }}>
Selected Date:{" "}
{formData["Campaign-date"]
? moment(formData["Campaign-date"]).format("YYYY-MM-YY HH:mm")
: "None"}
</div>
</Space>
);
}
ReactDOM.render(<FormComponent />, document.getElementById("container"));
If you are using react-datepicker 2.0 or up, you need to use a javascript Date object. Here is a working setup.
function parseISOString(s) {
var b = s.split(/\D+/);
return new Date(Date.UTC(b[0], --b[1], b[2], b[3], b[4], b[5], b[6]));
}
const isoString = '2020-09-01T05:02:00.000+0000';
const dateFromISOString = parseISOString(isoString);
<DatePicker
selected={dateFromISOString}
dateFormat="dd/MM/yyyy HH:mm"
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
placeholderText="Select date"
onChange={handleChange}
/>
Overview
The string you are receiving from the database is an ISO date string.
You can use moment.js to easily parse it or parse it manually and create a new Date object from it.
Here is a snippet illustrating both. The Date example uses this answer: Change ISO Date String to Date Object - JavaScript
const isoString = "2020-09-01T05:02:00.000+0000"
// with Moment
console.log("With Moment");
const timeFromMoment = moment(isoString).format("HH:mm");
console.log(timeFromMoment);
// with Date
console.log("With Date");
// https://stackoverflow.com/questions/27012854/change-iso-date-string-to-date-object-javascript
function parseISOString(s) {
var b = s.split(/\D+/);
return new Date(Date.UTC(b[0], --b[1], b[2], b[3], b[4], b[5], b[6]));
}
const dateFromISOString = parseISOString(isoString);
console.log(dateFromISOString);
// return Local adusted time
const localHours = dateFromISOString.getHours();
console.log(localHours);
// return UTC time
const utcHours = dateFromISOString.getUTCHours();
console.log(utcHours);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<DatePicker
name="Campaign-date"
defaultValue={moment(formData['Campaign-date'].split('T')[0])}
showTime={{
defaultValue: moment(formData['Campaign-date'].split('T')[1].split('.')[0],'HH:mm:ss'),
format: 'HH:mm:ss'
}}
format={'YYYY-MM-DD HH:mm'}
style={{ width: '100%' }}
onChange={handleDateChange}
/>
I'm using react-final-form and react-datepicker. I also have a select for year. Start and end dates should be set to January 1 and December 31 of the default year. When a new year is selected I would like to reset the form, clear selected dates and input values of both datepickers and set them to January 1 and December 31 of the selected year respectively.
Here is the link to my codesandbox https://codesandbox.io/s/react-datepicker-clear-cxlxh.
So far, I have a custom component for react-datepicker which works with react-final-form. Start and end dates are set to January 1 and December 31 of the default year.
DatePicker component:
const DatePickerWrapper = props => {
const { input, label, minDate, maxDate } = props;
const [startDate, setStartDate] = useState(input.value);
return (
<div>
<label>{label}</label>
<DatePicker
selected={startDate}
minDate={minDate}
maxDate={maxDate}
onChange={value => {
setStartDate(value);
props.input.onChange(value);
}}
onBlur={props.input.onBlur}
onFocus={props.input.onFocus}
value={props.input.value}
/>
</div>
);
};
And Field where it is used:
<Field
name="startDate"
initialValue={isoDate(minDate(values.year.value))}
component={DatePickerWrapper}
minDate={minDate(values.year.value)}
maxDate={
values.endDate ? values.endDate : maxDate(values.year.value)
}
/>
Here is my component for resetting the form:
<Field name="year" subscription={{}}>
{({ input: { onChange } }) => (
<OnChange name="year">
{value => {
form.reset({
...initialValues,
year: value
});
}}
</OnChange>
)}
</Field>
So my questions are:
How can I clear react-datepicker and its input value on form reset? There is a clear() function, but I couldn't make it to work.
How can I then set the dates to January 1 and December 31 of the selected year? I've added initialValue for each field and the values of the form are updated. But the inputs' values stay the same.
You have few issues in the form.
You are giving initial values to you dates twice. Once at the top and then again as the props. This is causing the render to go into infinite loop. Have moved all the form initialization to top in object
const initialValues = {
year: { value: "2019", label: "2019" },
startDate: isoDate(minDate("2019")),
endDate: isoDate(maxDate("2019")),
amount: ""
};
When you are doing form.reset for the year, at that place you can reset the value for the start date and end date
form.reset({
...initialValues,
year: value,
startDate: isoDate(minDate(value.value)),
endDate: isoDate(maxDate(value.value))
});
From the given code, I didn't see any requirement for usestate in datepicker.jsx as it seemed to be getting handled by the form. And so have removed it.
I have updated the code in the Sandbox.
Have a look at it and let me know if any thing is missed or you have any doubts.
The value is stored in this.component_name.current.state, so use an assignment operator and assign an empty string to it. do this operation in a callback of a state change operation (either a setState or a useState). Should work. worked for me.
this.startdate.current.state.value = "";
this.startdate.current.state.inputValue = "";
I am new in react. I need use react-datepicker
I want to get value of input, when I change date.
If i click on 20th October 2017, i want put 20th October 2017 in my variable.
But the main problem that I should work with component, not with input.
Before I just took value from state. Like this.state.value. But right now it is object(Moment) in state. And this object doesn't have value field.
There is my code:
export default class DatePicker extends Component {
constructor (props) {
super(props);
// this.props.date should looks like "29 November 2017 00:00"
// second argument for moment() it is format of date, because RFC 2822 date time format
this.state = {
date: moment(this.props.value, 'LLL')
};
}
handleChange = (date) => {
// const valueOfInput = this.state.date <--- I want string with date here
console.log('this.state.date',this.state.date);
this.setState({date: date});
};
render() {
return <Form.Field>
<Label>
<Picker
selected={this.state.date}
onChange={this.handleChange}
dateFormat="LLL"
locale={this.props.language}
/>
</Label>
</Form.Field>
Just use this:
handleChange = date => {
const valueOfInput = date.format();
///...
};
Because this datepicker returns a moment.js object!
For more information, look into the moment.js docs here.
Try this
<DatePicker
onChange={(value, e) => this.handleChange(value, e)}
selected={this.state.inputValue} otherProps={here}
/>
// you can access the value field in handleChange by e.target.value
handleChange(value, e) {
console.log(value); // this will be a moment date object
console.log(e.target.value); // this will be a string value in datepicker input field
}
This solved for me by using the following:
handleDateChange = date => {
let selectedDateFromCalender = date.toUTCString();
this.setState({
actualStartDate: selectedDateFromCalender,
});}
<DatePicker
selected={this.state.startDate}
onChange={this.handleDateChange}/>
You can use the following methods as well, choose according to your requirement:
toISOString: "2020-10-05T09:10:38.000Z"
toJSON: "2020-10-06T09:09:16.000Z"
toUTCString: "Thu, 08 Oct 2020 09:11:24 GMT"
If you want to get the new value (once the user clicks on a new date from DatePicker) pass the event to the method.
class MyComponent extends React.Component {
constructor(props) {
this.state = {inputValue: moment(),} // this will set the initial date to "today",
// you could also put another prop.state value there
this.handleChange = this.handleChange.bind(this);
}
}
handleChange(value) {
console.log(value); // this will be a moment date object
// now you can put this value into state
this.setState({inputValue: value});
}
render(){
...
<DatePicker
onChange={(event) => this.handleChange(event)}
selected={this.state.inputValue} otherProps={here} />
...
}
};
The new version of react-datepicker library stopped using a moment.js object, so here is my solution if you want to get a formatted string representation of the date.
First import
import format from "date-fns/format";
Then
<DatePicker
onChange={(value)=>this.handleChange(format(value, "yyyy/MM/dd", {
awareOfUnicodeTokens: true }))}
dateFormat="yyyy/MM/dd"
selected={this.state.inputValue} otherProps={here} />
...
You can use the getTime() helper function on your date object to get the millisecond timestamp for that specific date, which is a JavaScript number data type. Useful for saving data in the backend of your application. For example Flask Peewee ORM requires a timestamp to be saved for the DateTimeField.
const [startDate, setStartDate] = useState(new Date())
<DatePicker
onSelect( date => {
setStartDate(getTime(date))
}
/>
source: https://date-fns.org/v2.0.0-alpha.7/docs/getTime
Combine it with an effect to set the default state value to a timestamp on page load:
useEffect(() => {
setStartDate(getTime(startDate))
}, [])
Otherwise for your UI, you can use the format() helper function to get the string value of the given object, with any given format:
<h1>{format(startDate, "MMMM d, yyyy h:mm aa")}</h1>
source: https://date-fns.org/v2.0.0-alpha.7/docs/format
I have same problem, and I solved it by using the below solution. Please try it:
<p>{this.state.date.toLocaleDateString()}</p>
<input id="tdate" type="date" name="todate" onchange="getToDate(event);">
function getToDate(e){
const tdate = e.target.value;
//alert(tdate);
//console.log(tdate);
//return tdate;
};
here i am trying to access "tdate" variable outside the function.