I'm new to react and javascript.
Say I have a property defined like this: DateRanges?: {fromDate: string, toDate?: string}[] and there are no values set currently, what is the correct syntax for setting the fromDate and toDate?
The date are coming from the event.value of a primereact calendar and being converted to a string, and the toDate could be empty.
obj.dateRanges? = {fromDate: event.value.toString(), toDate: ''}
or
if(obj.dateRanges) {
const fromDate = {['fromDate']:'test'}
const toDate = {['toDate']: 'test'}
// set them somehow
}
}
I get lost with all the various brackets lol.
TIA :)
Related
I have a component DateRange using react-date-range ,
Import :
import { Range, DateRange, RangeKeyDict } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';
Default value :
const [dateRangeValue, setDateRangeValue] = useState<Range>({
startDate: new Date(),
endDate: new Date(),
});
Fuction :
const handelOnchange = (itemRespon: Range): void => {
console.log('itemRespon,', itemRespon);
//Display start end date which was chosen
renderFooteDate(itemRespon);
//Set new date range value
setDateRangeValue(itemRespon);
//CallBackParrent to give data back
};
Component :
<DateRange
className={style.dateRangeWrapper}
editableDateInputs={true}
onChange={(item: RangeKeyDict): void => handelOnchange(item.selection)}
moveRangeOnFirstSelection={false}
ranges={[{ ...dateRangeValue, key: 'selection' }]}
months={2}
direction="horizontal"
/>
Picture :
Date
2.I hope i can get value when ever i chose only start date or end date , but currently it only active onChange event when i click both start and end date. I do not always need both start and end , sometimes i just need 1 of them is enough.
I tried to reproduce the error, but it works fine for me.
Please see example.
The only thing you have to do is to press Enter after changing the date, then the changes will be applied.
I tried to assign a value to the Date (input). But I got the warning message and the Date field was also not getting updated with the assigned value.
Warning message: The specified value "Sun May 23 2021 16:06:23 GMT+0530 (India Standard Time)" does not conform to the required format, "yyyy-MM-dd".
How to assign a value (date) to the Date Input field in React using useState() hook?
Please let me know your suggestions. Thanks.
useState:
const todayDate = new Date();
const [ expenseDate, setExpenseDate ] = useState(todayDate);
JSX Part:
<label htmlFor="date-val">
<input type="date" name="date-val" value={expenseDate} onChange={onDateChangeHandler} required />
</label>
You need to convert your Date in specific yyyy-mm-dd format
Try this
const todayDate = new Date();
const formatDate = todayDate.getDate() < 10 ? `0${todayDate.getDate()}`:todayDate.getDate();
const formatMonth = todayDate.getMonth() < 10 ? `0${todayDate.getMonth()}`: todayDate.getMonth();
const formattedDate = [todayDate.getFullYear(), formatMonth, formatDate].join('-');
const [expenseDate, setExpenseDate] = useState(formattedDate);
The resulting value includes the year, month, and day, but not the
time
For better understanding, go through official documentation
Is there any way to use the date picker to simply display blocked out date ranges as opposed actually allowing the user to pick date ranges.
A good example of the functionality I require is the availability display that Airbnb use for each property:
example
Solved this now. In the end, I did the following:
import { DayPickerSingleDateController } from 'react-dates';
....
const [focusedInput, setFocusedInput] = useState('startDate');
<DayPickerSingleDateController
...
onFocusChange={focusedInput => {
return true;
}}
...
>
I'using this library for react time picker: https://github.com/YouCanBookMe/react-datetime
But now I have 2 problems.
The time (Am, Pm, HH:mm) in timepicker doesnt'work , because it doesn't change, it remain to 12 : 00 AM
How correctly update state? because if I handle onChange (input manual write), it receive string, that I can't parse and it is invalid date.
My code is:
import DateTime from 'react-datetime';
var moment = require('moment');
handleChangeDate(propertyName, date) {
const event = Object.assign({}, this.state.event);
if (typeof date === 'string') {
date = moment(date);
}
event[propertyName] = data.format('DD/MM/YYYY HH:mm');
this.setState({ event: event });
}
and in Render() I have compoment:
<DateTime dateFormat={"dddd, MMM. Do YYYY, HH:mm (hh:mm a)"} value={this.state.event.to} onChange={this.handleChangeDate.bind(this, 'to')}/>
What is wrong?
check in below link.
Customized calendar will solve your problem.
https://github.com/YouCanBookMe/react-datetime#customize-the-appearance
After choose date in calendar then click on date. It will show the edit option for time.
Example Link
https://codepen.io/simeg/pen/YppLmO
Let it try
I've got a date coming in from an API that returns the date like this: 2012-10-12 00:00:00
I'm printing it to my page like this:
<span class="year" ng-bind-html="hit._highlightResult.original_release_date.value"></span>
with original_release_date.value being that date (2012-10-12 00:00:00). Does anyone know a quick and easy way to just return the year?
Any help is appreciated. Thanks in advance!
you can use the date api in angularjs
<span class="year"> {{ hit._highlightResult.original_release_date.value | date:"yyyy" }} </span>
hit._highlightResult.original_release_date.value should be a (according to doc)
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
so create javascript date object and format it to show only the year,
step 1 - create a filter to get a date object from a string (2012-10-12 00:00:00)
app.filter('dateToISO', function() {
return function(input) {
var dateTime = input.split(" ");
var date = dateTime[0];
var datePartials = date.split("-");
var time = dateTime[1];
var timePartials = time.split(":");
var formattedDate = new Date();
formattedDate.setFullYear(datePartials[0]);
formattedDate.setMonth(datePartials[1]-1);
formattedDate.setDate(datePartials[2]);
formattedDate.setHours(timePartials[0]);
formattedDate.setMinutes(timePartials[1]);
return formattedDate;
};
});
step 2 - create a controller function to get the date object
$scope.getDate = function() {
return $filter('dateToISO')('2012-10-12 00:00:00');
};
step 3 - call that function and get the date object to format in the HTML
<span class="year"> {{ getDate() | date:"yyyy" }} </span>
here is the working Demo Plunker
This may be a bit off and cheating but I think '2012-10-12 00:00:00'.split('-')[0] will do the trick