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
Related
Basically, the most scenarios of programming in react js. The conversion of time is from this 2023-01-25T19:15:27.615Z to HH:MM. So, here in my scenario I want to make the vice versa of it.
within moment you can do this by telling moment the format you are providing for instance moment('13:00', 'HH:mm'); is valid and the return object can be converted to ISO string with .toISOString()
You can use date-fns library.
Firstly install npm install date-fns
import {format} from 'date-fns'
...
format(new Date(),'HH:mm') // MM for months you have to use mm
An external library is not needed to set the hours and minutes for the current date and get an ISO string — a simple function will work:
function timeToIsoString (
hoursMinutes,
{ date = new Date(), utc = false } = {},
) {
const [h, m] = hoursMinutes.split(":").map(Number);
const d = new Date(date.getTime());
d[utc ? "setUTCHours" : "setHours"](h);
d[utc ? "setUTCMinutes" : "setMinutes"](m);
return d.toISOString();
}
const input = "12:34";
// Interpreting time in local time zone:
const output1 = timeToIsoString(input);
console.log(output1);
// Interpreting time in UTC:
const output2 = timeToIsoString(input, { utc: true });
console.log(output2);
// Starting with an existing date:
const date = new Date(Date.UTC(2008, 8, 15));
const output3 = timeToIsoString(input, { date, utc: true });
console.log(output3); // "2008-09-15T12:34:00.000Z"
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 want to disable the dates before event date and event date. But not able to do .Please help to fix this out. Below I am sharing my code.
eventDate = newDate("2022-07-08");
const disableCustomDt = current => {
return !eventDate .includes(current.format('YYYY-MM-DD'));
}
<DatePicker timeFormat={false} isValidDate={disableCustomDt} />
You can refer to this answer
You can compare your current date with today and return true or false
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 use moment js and moment Jalali js and angular-moment js , i would use datePicker jalali and i use angular-moment-picker when i use attribute locale="fa" , call me error Invalid Jalali year 3503
my code here :
<div
moment-picker="profilePet.birthday"
locale="fa"
format="MM/DD/YYYY"
ng-model-options="{ updateOn: 'blur' }">
click me
and error inside the console :
Error: "Invalid Jalali year 3503"
in order to use Jalali -moment to convert time from Gregorian to Jalali you can simply use this method:
getDate(gregorianDate) {
let recivedDate = this.formatGregorianDate(gregorianDate);
let Jalali= moment(recivedDate, 'YYYY/MM/DD').lang('en').format('jYYYY/jMM/jDD');
console.log(Jalali);
}
but because the format of time maybe can not match you can use this method to find desire format, then use the result of the method to input of convert date:
formatGregorianDate(gregorianDate) {
var date = new Date(gregorianDate);
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var fullYear = year + '/' + month + '/' + day;
return fullYear;
}
You can create a Pipe for Jalali-moment and add this code in NPM, and use it according to the link =>
Install via NPM:
`npm install jalali-moment -S`
then import in Angular Pipe:
`import * as moment from 'jalali-moment';`
then Pipe content:
#Pipe({
name: 'jalali'
})
export class JalaliPipe implements PipeTransform {
transform(value: any, args?: any): any {
let MomentDate=moment(value);
return MomentDate.format("jYYYY/jM/jD");
}
}
At the end you can look this page :
[https://www.npmjs.com/package/jalali-moment/v/1.0.6][1]
[1]: https://www.npmjs.com/package/jalali-moment/v/1.0.6