How to make a customed datepicker with selectable input? react - javascript

I have a simple problem in regards of changing input value. When I type a char the value was displayed, but my problem is the cursor stopped. This is the npm datepicker that I used by the way.
Can someone help me fix?
Play this demo video
Goal: is to create customed design input, that can change the date using datepicker and changing the directly to input.
Here is my code:
import DatePicker from 'react-datepicker';
const InputDate = () => {
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
<button>
<input
type='text'
onChange={(e) => setDate(e.target.value)}
value={date}
/>
</button>
));
return (
<div>
<DatePicker
selected={date}
customInput={<ExampleCustomInput />}
/>
</div>
);
};

Related

How to disable input filed using tailwind css and react conditionally? [duplicate]

This question already has answers here:
Conditional disabling of button
(2 answers)
Closed last month.
Hello Dev Community i am here with another issue can need your help.
i want to disable input field based on the Boolean state if the state is true then the input filed should be disable else it can be editable.
i have state variable isTrue which can be eithe true or false and here is the code
export function InputFiled(props) {
return (
<>
<input
className="py-2 pl-3 rounded-[14px] border-[1.3px] border-red-500"
placeholder={"Name"}
onChange={(e) => props.setData(e.target.value)}
value={props.data}
{...(!props.isTrue && "disabled")}
// here (below) it works fine but it is permanently disabled option
// disabled
/>
</>
);
}
The solution of this which i got form the attached (Conditional disabling of button) question is:
export function InputFiled(props) {
return (
<>
<input
className="py-2 pl-3 rounded-[14px] border-[1.3px] border-red-500"
placeholder={"Name"}
onChange={(e) => props.setData(e.target.value)}
value={props.data}
disabled={props.isTrue? true : false}
/>
</>
);
}
You may need to set additional tailwind css classes based on this state or prop which you want to baseline.
const [isDisabled, setDisabled] = useState(false);
//inside render
<input type='button'
onClick={(e)=> setDisabled(!isDisabled)}
disabled={isDisabled}
>

How to change selected date information display in UI Kitten datepicker for React Native

How can I change how the date is displayed i UI Kitten date picker input in the place of placeholder? I need something like "Tomorrow" etc, the only way I managed to do this is to omit date property so that the placeholder is always visible, when I select the date state is updated and based on that I can update placeholder, but the huge downside is that selected date is not highlighted in any way, when I add date property the display date it is always formatted "dd/mm/YYYY", is it possible to change this behaviour? This is my code:
<Datepicker
style={styles.datePicker}
filter={(date) => isToday(date) || isAfter(date, new Date())}
accessoryRight={<CallendarIcon />}
placeholder={placeholder}
label={() => <Label>When do you want to start parking?</Label>}
renderFooter={() => {
return <Text> footer</Text>;
}}
renderDay={({ date }, style) => {
const unifiedCellColor = isEqual(date, selectedDate) || isToday(date);
return (
<View style={[styles.dayContainer, style.container]}>
<Text
style={[style.text, unifiedCellColor && styles.selectedDayText]}
>{`${date.getDate()}`}</Text>
</View>
);
}}
onSelect={(date) => setSelectedDate(date)}
date={selectedDate}
autoDismiss={false}
/>
);
Thanks a lot

How to set default text content in React-Bootstrap date input form control?

I am building an application with React-Bootstrap and Hooks to pre-populate the form with previously known values.
However, when the date input is rendered, it shows the placeholder text 'dd/mm/yyyy' despite the underlying value of the element containing the correct pre-set value, and hence the Save action if the field is untouched still works correctly.
The field appears within a Form Group, with the form becoming editable when the button is clicked (switching the button text in the above screenshot from 'Update' to 'Save', and swapping the date field to show the datepicker rather than a text field showing the calculated age):
Form when read only
Form when editable
In terms of function, the user is still able to select the date and text in the field is then updated to reflect the date selected as expected, it is just the initial default value which doesn't show. This is frustrating as the users may not need to change this field but it appears to wipe the info if they don't.
I have tried using different
Code for the input field:
//hooks
const [editable, setEditable] = useState(false);
const [name, setName] = useState(user.name);
const [dob, setDob] = useState(user.dob);
//functions called
export const dateFromDateString = (dateString) => {
return moment(new Date(dateString)).format('YYYY-MM-DDT00:00:00.000');
};
export const dateForPicker = (dateString) => {
return moment(new Date(dateString)).format('YYYY-MM-DD')
};
const calculateAge = (date) => {
return moment().diff(date, 'years', false);
};
//form with irrelevant fields removed
<Form className="personalInfo">
{editable ?
<Form.Group as={Row} className="mb-3 align-items-center" controlId="dobInput">
<Form.Label column lg={4}>Date of Birth:</Form.Label>
<Col>
<Form.Control type="date"
defaultValue={dateForPicker(dob)}
onfocus={dateForPicker(dob)}
placeholder={dob ? dateForPicker(dob) : "dd/mm/yyyy"}
onChange={(e) => setDob(dateFromDateString(e.target.value))}
/>
</Col>
</Form.Group>
:
<Form.Group as={Row} className="mb-3 align-items-center" controlId="ageDisplay">
<Form.Label column id="ageLabel" lg={4}>Age:</Form.Label>
<Col>
<Form.Control type="text" readOnly
value={calculateAge(dateFromDateString(user.dob))}/>
</Col>
</Form.Group>
}
<Form.Group as={Row} className="d-flex justify-content-end" controlId="nameInput">
<Button variant="outline-dark"
size="sm"
className="w-25 mx-2"
id="profileSubmitBtn"
onClick={editable ? saveChanges : () => toggleEditable(editable, setEditable)}
>
{editable ? "Save" : "Update"}
</Button>
</Form.Group>
</Form>
Versions:
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-bootstrap": "^2.1.0",
If you change the input to a controlled component, it should fix your problem. You shouldn't need a defaultValue on a date input, but you definitely need a value property if you want to control the value of the component. I made those changes below.
<Form.Control
type="date"
value={dob ? dateForPicker(dob) : ''}
onfocus={dateForPicker(dob)}
placeholder={dob ? dateForPicker(dob) : "dd/mm/yyyy"}
onChange={(e) => setDob(dateFromDateString(e.target.value))}
/>

can't edit input with prop value

I have a string , in certain places I need to insert input tags with values. Everything displays fine , but I can't delete or edit values in input. What is wrong with that input?
editModalText() {
let modalMessage="Hello, my name is /# Ann #/. I'm working for /# IStaff #/, could you please call me back"
return (
<div>
{modalMessage
.split("/")
.map((text, idx) =>
text.includes("#") ? this.replaceCharacter(idx, text) : text,
)}
</div>
)
}
replaceCharacter(idx, text) {
let formattedText = text.replace(/#/g, " ")
return (
<input
key={idx}
value={formattedText}
onChange={e => this.setState({input:e.target.value})}
/>
)
}
replace value={formattedText} with defaultValue={formattedText}
this way input will be editable. it will show default value on first render and as you type you'll store that value in your state.
you can read more about controlled and uncontrolled components in the docs
I think you need to bind the input value and the state together. I am not sure how you're currently calling replaceCharacter but I would do something like this :
replaceCharacter(idx) {
return (
<input
key={idx}
value={this.state.input.replace(/#/g, " ")}
onChange={e => this.setState({input:e.target.value})}
/>
)
}
This way when you update your state with the onChange event the value of the state will be populated in the input.

Material-UI , Radio Button + map function ( React JS)

so i need help guys, i want to replace the old radio button (classic)
with a new one using material-ui. i couldn't make it.
please suggest a solution.
thx in advance.
in pic u will see everything
class Question extends Component {
render() {
var that = this; // Funny way to be able to access this from inside our iterator() function below.
var iterator = this.props.questionChoices.map(function(choice){
return (
<div className="radio">
<label>
<input type= {that.props.questionType} name={that.props.questionID} value={choice}/>
{choice}
</label>
<RadioButtonGroup >
<RadioButton
value="ludicrous"
label={choice}
valueSelected={choice}
style={styles.radioButton}
/>
</RadioButtonGroup>
</div>
);
});
return (
<div className="row">
<div className="form">
<Paper zDepth={1} >
<div className="h3">
<h3 >{this.props.questionID} - {this.props.questionText}</h3>
{iterator}
</div>
</Paper>
</div>
</div>
);
}
}
result of the problem image
You are rendering the old radio button as well, you also need to define the selected value in the group component and render the group only once, currently you are rendering it for every option.
var iterator = (
<RadioGroup value={this.state.value} onChange={this.handleChange}>
{ this.props.questionChoices.map(choice =>
<FormControlLabel value={choise} control={<Radio />} label={choise} />
)
}
</RadioGroup>
);
Then you need to create the handleChange function to update the state.
class Question extends Component {
state = {
value: '',
};
handleChange = (event, value) => {
this.setState({ value });
};
...
You can find a working example here: https://material-ui-next.com/demos/selection-controls/

Categories