I have create CustomDatePicker.JS file for datePicker, for Android use the DatePickerAndroid and for ios use DatePickerIOS, and its use in my another Profile.js file. I use like below.
<CustomDatePicker ref='modal'></CustomDatePicker>
Now whenever will select the date, CustomDatePicker.JS class get the value but I want to the date value in Profile.js. So how can get date value in profile.
CustomDatePicker.JS : Here Will get date and time log.
Profile.js : Want to date which is selected on CustomDatePicker.
I hope, You are underStand...
Thanks.
In your Profile.js, i.e Profile component you can pass some callback fn as props like,
<CustomDatePicker
mode="date"
onDateChange={date => this.onDateChange(date)}
ref='modal'>
</CustomDatePicker>
In you CustomDatePicker.js, i.e CustomDatePicker component where you have defined DatePickerIOS, you can use those props.
<DatePickerIOS
{...this.props}
/>
Related
I want to add a date picker instead of "Today" button. How can I make this?
If it is with only "Custom Toolbar" can you guys link a demo for that?
If it can't be happen I want to do this out of the calendar. When I choose a date it has to navigate. How can I do this?
Thanks
You can do this by providing a custom Toolbar component.
const { Navigate } from 'react-big-calendar';
export default function CustomToolbar({ date, view, views, label, onView, onNavigate, localizer }) {
// this only works if `newDate` is a true JS Date
const onPickerChange = (newDate) => onNavigate(Navigate.DATE, newDate);
// ... the rest of your Toolbar display
}
Then
<Calendar components={{toolbar: CustomToolbar}} />
If you don't want to provide your own Toolbar, you can add your own component for date picker (for example MUI) and use the onNavigate prop as mentioned in the docs https://jquense.github.io/react-big-calendar/examples/index.html?path=/docs/props--on-navigate
how can I change the value of an TextInput in react-admin.
My idea was
<TextInput label="..." source="..." value="MY VALUE" />
But that doesn't work.
pls help.
You can't do this with the react-admin's TextInput as it is a connected field to the backing react-final-form form and hence you don't control the input.
You should state what is your final aim. I can think of two options:
If you want to have a controlled input you can simply use material-ui's TextField and pass to it your custom value as well as handle the onChange event.
If you don't want to control the value by yourself but alter it in the form state under some condition, you can then use the hook provided by react-final-form:
const form = useForm();
form.change("myValue", newValue);
...
<TextInput label="My Value" source="myValue" />
Since react-adminv4.0.0 library no longer uses react-final-form instead it uses react-hook-form. So you would need to change your relevant code to use it as well.
import {useFormContext} from "react-hook-form";
...
const {setValue} = useFormContext();
setValue("myValue", newValue);
If the value of your input is null or undefined you can use the initialValue prop to set the value when the page loads.
<TextInput source="mySource" initialValue="MY VALUE" />
See React-Admin Input Docs: https://marmelab.com/react-admin/Inputs.html#common-input-props
If you are looking to dynamically change the value after the page has loaded, I would recommend following Kia's answer to leverage the useForm hook.
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
For the past days i've been searching for a way to get the value of my custom input component in the parameters of the create/edit component.
I created the component following Material UI's example in this link
The component is rendered in the application but i can't get the value of the input. Here's how I add the custom input
<Create><SimpleForm>
...
<CustomAutocompleteInput label="Main Subject" suggestions={subjectSuggestions} source="mainSubject"/>
...
</SimpleForm></Create>
Can anyone help me?
you can set a reference to the dom node
<CustomAutocompleteInput
ref={node => {this.input = node;}}
label="Main Subject"
suggestions={subjectSuggestions}
source="mainSubject"
/>
...and then access the value by
let { value } = this.input
//or
let value = this.input.value
I downloaded react-native-material-calandarview inside my project.
They just give some piece of code to get calendar.
https://github.com/NuclleaR/react-native-material-calendarview.
I used that inside my render().
selectedDates={this.state.dates}......{this.state.dates} it gives undefined.
I need the selected dates array,but i cant get that.
where i get the selected dates???
Help me ASAP.Thanks in advance
The calendar expose you an event function onDateChange, you have just to setState in this event like that:
<Calendar
selectedDates={this.state.dates}
onDateChange={data => {
// Add the data to your state here
// for example:
this.setState(state => { dates: state.dates.push(data.date) });
}}
/>