I am using react time picker(rc-time-picker) in my code, I want to set the time picker value dynamically.
Here is my Time Picker Code
<span id="editstartTime">
<span class="rc-time-picker timeStylstartTimeAdd">
<input type="text" class="rc-time-picker-input" readonly="" value="">
<span class="rc-time-picker-icon"></span>
</span>
</span>
And I tried like this.
$('#editstartTime span input').val(this.state.shifts[index].startTime);
But it did not worked for me.
Please help me to overcome this issue.
Thanks in advance.
TimePicker has a value state of type moment, which holds the current value.
so e.g. if you instantiate with a state called timePickerValue:
<TimePicker value={this.state.timePickerValue} ... />
then you can modify timePickerValue using
this.setState({timePickerValue: newValue})
(In your example newValue would be this.state.shifts[index].startTime)
I suggest you try out this example as it shows how to mutate the TimePicker.value state.
const now = moment().hour(0).minute(0);
<TimePicker
showSecond={false}
value={moment().hours(13).minute(1)}
className="time-picker"
placeholder="HH:MM"
onChange={(e) => {
console.log(e);
console.log(moment(taskCreateFormData.startTime));
onTimeChange(e, 'start');
}}
format={format}
use12Hours
/>
if you take format for use12Hours then if you write moment().hours(13).minute(1) time like this then it will convert to PM time format
Related
I'm getting my backend date as follows:
2020-01-01T03:00:00.000Z
I am using the daterangepicker from the AdminLTE template.
my field:
<div className="col-sm-3">
<label>Contratação *</label>
<Field
name="dt_contracting"
type="date"
className="form-control"
/>
</div>
I want to convert the received date, to the format "DD/MM/YYYY"
my input is already in the correct format to select, but when I receive the Back-End date, it is not filled due to difference in format.
Easiest way is to use the built-in toLocaleDateString() function. MDN
In your case you can use it like this:
function toPrettyDate( rawDateStr ) {
const date = new Date( rawDateStr );
return date.toLocaleDateString('en-GB'); // Should really use user-based locale here
}
You can use momentjs.
Prefer this for installation
https://www.npmjs.com/package/react-moment
https://momentjs.com/docs/ for examples
I have a formsy form with a bunch of Inputs. I can see the value of those inputs in the onValidSubmit function. One example of such an input is the following:
<Input
name="myStartDate"
id="myStartDate"
value=""
label="Start Date (YYYYMM)"
type="tel"
validations={{
matchRegexp: /^(19|20)\d\d(0[1-9]|1[012])$/
}}
validationErrors={{
matchRegexp: 'Enter the year and month (YYYYMM).'
}}
placeholder="YYYYMM"
required
/>
In the formsy form I have:
onValidSubmit={this.onValidSubmit}
The function only logs the form data:
onValidSubmit(formData){
console.log(formData);
}
I want to change this input to be a react-datepicker component (DatePicker), however, after I make the necessary changes to make the DatePicker work, the "formData" object in the onValidSubmit no longer contains the value for "myStartDate". What should I do to make this work?
My DatePicker component looks like this: (it's basically the same as the Input but with some additional stuff)
<DatePicker
name="myStartDate"
id="myStartDate"
value=""
label="Start Date (YYYYMM)"
type="tel"
validations={{
matchRegexp: /^(19|20)\d\d(0[1-9]|1[012])$/
}}
validationErrors={{
matchRegexp: 'Enter the year and month (YYYYMM).'
}}
placeholder="YYYYMM"
required
placeholderText="ÅÅÅÅMM"
dateFormat="YYYYMM"
className="form-control"
selected={this.state.myStartDate}
onChange={this.myStartDate}
isClearable={true}
/>
I know that DatePicker handles dates using the moment.js and I will handle this change accordingly, however, as I said before, "myStartDate" no longer shows up in the "formData" object passed to "onValidSubmit". What gives?
Thank you very much for your help!
I have an input whose value I want to store in a React variable.
<div>
<label>Nombre Completo: </label>
<input style={eachBit} required id='name' type='text' placeholder='Zeus Aurel'></input>
</div>
Without the complications of constructor or classes, I can't find anything useful anywhere. I know nothing of reactjs, please help.
onChange event allows value to be stored in state. Here is how input value is stored in a state named inputValue.
<input
onChange={e => this.setState({ inputValue: e.target.value }))
/>
Are you asking about the way to change/insert a HTML element as a variable ?
Hope this topic can help you : Insert HTML with React Variable Statements (JSX)
I have not use any datepicker still code is working fine. I have selected input type to date and everything's working fine. Now I want to disable future dates. How do I do that?
<div className="form-group col-md-6">
<label for="inputDate4">Date of Birth</label>
<input type="date" className="form-control" id="inputDate4" placeholder="Date of Birth" name="dob" onChange={this.handleChange} />
</div>
Edit:
Issue solve by other way
I used React Date Picker
It is so easy to implement. Just install the npm package
npm install react-datepicker --save
Install moment aslo
npm install moment --save
Import the libraries
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';
In the constructor
this.state = {
dob: moment()
};
this.dateChange = this.dateChange.bind(this);
dateChange function
dateChange(date) {
this.setState({
dob: date
});
}
And finally the render function
<DatePicker
selected={this.state.dob}
onChange={this.dateChange}
className="form-control"
placeholder="Date of Birth"
maxDate={new Date()}
/>
Here the maxDate function is used to disable future dates.
maxDate={new Date()}
Source: https://www.npmjs.com/package/react-datepicker
Thank you!
You can use a min, max attribute to restrict the date selection within a date range
<div className="form-group col-md-6">
<label for="inputDate4">Date of Birth</label>
<input type="date" className="form-control" id="inputDate4" placeholder="Date of Birth" name="dob" onChange={this.handleChange} max={moment().format("YYYY-MM-DD")}/>
</div>
The maxDate did the job for me.
Try using minDate as well for minimum date selection.
import moment from 'moment';
import DatePicker from 'react-datepicker';
<DatePicker maxDate={moment().toDate()} />
var input = new Date ("inputgotBackfromthe user")
var now = new Date();
if (before < now) {
// selected date is in the past
}
You need to try converting the input to a date object, after that you can make a new date object and check the input date object is older or not. Remember this will be big, because the users must input it in the right format. If not you will maybe get an exception or a wrong date object.
you can use moment.js library for working with date.
now for check date is future you can use diff function of moment.js.
// today < future (31/01/2014)
today.diff(future) // today - future < 0
future.diff(today) // future - today > 0
Therefore, you have to reverse your condition.
If you want to check that all is fine, you can add an extra parameter to the function:
moment().diff(SpecialTo, 'days') // -8 (days)
note:
this won't work if it's a different day but the difference is less than 24 hours
I am checking the date selected by comparing it with the current date or precisely with moment() which gives us the value of current time elapsed in seconds from some date in 1970. It will not allow to select any future dates.
handleDateChange(date){
if(date <= moment()){
this.setState({
testDate: date
});
}
}
<DatePicker className="form-control" dateFormat="DD/MM/YYYY" id="testDate onChange={this.handleDateChange.bind(this)} onSelect={this.handleSelect} selected={this.state.testDate}/>
<DateTimePicker
dateConvention={DateConvention.Date}
showGoToToday={true}
onChange={date => this.handleDateChange(date)}
placeholder={"Enter Date"}
showLabels={false}
value={this.state.startDate}
maxDate={this.props.todaydate}//or use new date()
//formatDate={this._onFormatDate}
/>
Check this - https://pnp.github.io/sp-dev-fx-controls-react/controls/DateTimePicker/
import moment from 'moment';
<
Input type="date"
max={moment().format("DD-MM-YYYY")}
onChange={(e) => setDOB(e.target.value)}
/>
PS: Ignore the classes
Use the Date class to get the current date and then use the max prop and give it a value of current date.
const DatePicker = () => {
let curr = new Date();
curr.setDate(curr.getDate());
let date = curr.toISOString().substring(0, 10);
return (
<div className="flex items-center text-center justify-center">
<div className="form-control">
<label className="input-group input-group-vertical">
<input type="date" className="input text-primary bg-neutral-focus font-bold input-group-sm" defaultValue={date} max={date} />
</label>
</div>
</div>
)
}
I'm using switches component (designed by Materialize) inside React components, and I'd like to know, how could I get the value when the user has changed the switch (on/of).
<div className="switch right">
<label>
Any
<input type="checkbox" onChange={() => alert('changed')}/>
<span className="lever"></span>
All
</label>
</div>
I tried to set a onChange event to verify if I can, at least, get when it's triggered.
As a start, I would recommend using react-materialize, which has been written into components for react here https://react-materialize.github.io/#/forms.
I guess the problem is that onChange works only for JSX, and from your code it looks like you are using plain HTML?
I have added your onChange event into my JSX and it works as expected.
If you used react-materialize, your code would look something like this:
<Input name='on' type='switch' onLabel='Any' offLabel='All' onChange={() => alert('changed')}/>