I have an input with type date inside a form as below:
<Input type="date" defaultValue={this.state.todayDate} onChange={this.handleChangeDate}/> // defaultValue contains today's date
However, when changing the date from the current date (today's date), the state won't be updated and the whole item can't be saved upon submission of the form. This is the handleChangeDate method:
handleChangeDate(event) {
let item = {...this.state.item};
item.timeStamp = event.target.value; // Update time stamp in item
this.setState({item: item}); // Update item in state
}
Any help would be appreciated, thanks alot!
Change defaultValue to value:
<Input type="date" value={this.state.item.timeStamp} onChange={this.handleChangeDate}/> // defaultValue contains today's date
Related
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
I want by default display the current date and all information linked to,
and in case of another date choose by user display corresponding info.
const [dateCourante, setDateCourante] = useState(new Date());
const onSetDate = (e) => {
setDateCourrante(e.target.value);
}
I display the date as a string :
<p>
{ dateCourrante.toDateString() }.
</p>
and this input to set/display the same date :
<input
type="date"
name="date"
id="date"
value={dateCourrante}
onChange={onSetDate} />
But thatdont work
please can you help achieve the goal by explain me where i have wrong ?, thanks.
I've created a function that return a substraction or an addition from current Date, and set the result in the min or max of date input :
My function :
SubDate = (subDay) => {
let tgDate = new Date();
tgDate.setDate(tgDate.getDate() + subDay)
return tgDate.toLocaleDateString();
}
My input :
<input type="date" id="dateInput" min={this.SubDate(-7)} max={this.SubDate(7)} />
The function is working. In the navigator's inspector, I see the min and max of the input like so :
<input type="date" id="dateInput" min="13/09/2020" max="27/09/2020">
But when I try to select a date, It does'nt prevent me to choose the min date and the max date.
Can I resolve that ? Or using DateTimePicker instead of that.
Thank you.
I am not sure if you ended up resolving this or not but for reference ,
var today = new Date().toISOString().split('T')[0];
<input type="date" onChange={this.handleChange} max={today} />
I am trying to show a validation error message on Date picker like how we do for TextField using errorText and errorStyle props but the validation error message is not working for DatePicker.
I am using material-ui version "^0.18.7".
Please find full functionality below. I am not sure exactly how to implement this. I also understand that the errorText and errorStyle is not a valid prop to DatePicker. Thought it will work for datepicker but it is not. Is there a way to achieve this.
import DatePicker from 'material-ui/DatePicker';
constructor(props){
super(props)
const dateYesterday = new Date();
dateYesterday.setDate(dateYesterday.getDate() - 1);
this.state={
dob: null,
dobError: '',
dateYesterday: dateYesterday
}
this.changeDateOfBirth = this.changeDateOfBirth.bind(this)
}
changeDateOfBirth = (evt, date) => {
if(date == null || date == undefined){
this.setState({
dobError: 'Please select your date of birth'
});
}else{
this.setState({
dobError: '',
dob: date
});
}
}
const errorStyle = {
display: 'table'
}
<DatePicker
dialogContainerStyle={{position: 'absolute'}}
errorText={this.state.dobError}
errorStyle={errorStyle}
inputStyle={myTheme.inputStyleText}
underlineStyle={myTheme.underlineStyle}
underlineFocusStyle={myTheme.underlineStyle}
floatingLabelStyle={myTheme.floatingLabelStyle}
floatingLabelText="Date Of Birth"
hintText="Select Date Of Birth"
container="inline"
locale="en-US"
firstDayOfWeek={0}
autoOk={true}
value={this.state.dob}
onChange={this.changeDateOfBirth}
defaultDate={this.state.dateYesterday}
>
</DatePicker>
Please suggest.
The DatePicker spreads props through to children elements, so you can in fact use the errorText and errorStyle props from the TextField element. For example, I tested the following DatePicker in "^0.18.7" and can confirm it shows up with a red error message:
<DatePicker hintText="Portrait Dialog" errorText="This is an error message." />
You should be aware that the onChange callback in the DatePicker is only fired when a date is selected, so the date argument will never be null or undefined. In other words, you'll never enter into the following if statement:
if(date == null || date == undefined){
this.setState({
dobError: 'Please select your date of birth'
});
}
If you want to check for cases in which the user has not set any kind of date, consider just checking whether or not your DOB is null (I left out the irrelevant props to keep things short):
<DatePicker
errorText={this.state.dob ? {} : this.state.dobError}
errorStyle={this.state.dob ? {} : errorStyle}
>
I am a novice in Angular and need help regarding the Custom Directive.
I have a date picker Directive where the user selects Date, Month and Year from a Drop Down which is then displayed in a textbox in the format : YYYY-MM-DD
$scope.$watch('model', function ( newDate ) {
$scope.dateFields.day = new Date(newDate).getUTCDate();
$scope.dateFields.month = new Date(newDate).getUTCMonth();
$scope.dateFields.year = new Date(newDate).getUTCFullYear();
});
The Drop Down is displayed using :
<select required name="dateFields.month" data-ng-model="dateFields.month" p ng-options="month.value as month.name for month in months" value="{{dateField.month}}" ng-change="checkDate()" ng-disabled="disableFields"></select>
<select required ng-if="!yearText" name="dateFields.year" data-ng-model="dateFields.year" ng-options="year for year in years" ng-change="checkDate()" ng-disabled="disableFields"></select>
When all above Dropdowns are selected, the Input Textbox shows only the Year whic I want to show the complete date in the Format : YYYY-MM-DD
The Code for that is :
<input required ng-if="yearText" type="text" name="dateFields.year" data-ng-model="dateFields.year" placeholder="Year" class="form-control" ng-disabled="disableFields">
In the above code there is data-ng-model="dateFields.year". is there any method where I can customize this to show dateFields.year-dateFields.month-dateFields.date
The simplest solution is to use dedicated model for complete date. I can see that you are using ngChange directive. In this case you could set proper model value in this function:
$scope.checkDate = function() {
// checking date ...
// all is fine set full date model
$scope.dateFields.fullDate = $scope.dateFields.year + '-' + $scope.dateFields.month + '-' + $scope.dateFields.day;
}
and use in in HTML:
<input data-ng-model="dateFields.fullDate" required ng-if="yearText" type="text" name="dateFields.year" placeholder="Year" class="form-control" ng-disabled="disableFields">
I think it should work in your case.
Demo: http://plnkr.co/edit/SKCbABDifkbnIT2FTV6X?p=preview