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.
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 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
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 use Standard Date picker using below component but however I want to display custom error message when the enterted date is not in the speciied min & max range. But I am not able to achieve it as I could see the standard error message. I implemented the same by referring to : https://developer.salesforce.com/docs/component-library/bundle/lightning:input/example and in this link I can see that the custom error messages can be shown. But nothing worked for me can anyone please help.
https://developer.salesforce.com/docs/component-library/bundle/lightning:input/documentation
<lightning:input aura:id="field
type="date"
name="MyDatefield"
label="MyDateField"
value="2017-09-07"
min="2017-09-05"
messageWhenRangeUnderflow="Select correct date range1"
max="2017-09-22"
messageWhenRangeOverflow="Select correct date range2"
onchange="{!c.checkValidity }"
</aura:component>
This was asked 1 month back but sharing the answer if anybody else runs across this. Use lightning's setCustomValidity() and reportValidity() methods.
Component:
<aura:component >
<lightning:input aura:id="field"
type="date"
name="MyDatefield"
label="MyDateField"
value="2017-09-07"
min="2017-09-05"
max="2017-09-22"
onblur ="{!c.checkValidity }"
/>
</aura:component>
Controller:
({
checkValidity : function(component, event, helper) {
var inputCmp = component.find("field");
inputCmp.setCustomValidity(""); //reset error
var value = inputCmp.get("v.value");
console.log('value: '+value);
var lowerRange = new Date("2017/09/05");
var higherRange = new Date("2017/09/22");
if(!inputCmp.checkValidity()){
if(Date.parse(value)){
if (Date.parse(value) < lowerRange) {
inputCmp.setCustomValidity("Select correct date range1");
}else if (Date.parse(value) > higherRange){
inputCmp.setCustomValidity("Select correct date range2");
}
}else{
inputCmp.setCustomValidity("Invalid value");
}
}
inputCmp.reportValidity();
}
})
My HTML for date field is
<input class="form-control"type="text" name="txtOrderContractFinishDate" id="txtOrderContractFinishDate" ng-model="SelectedOrder.OrderContractFinishDate | jsDate | date:'MM/dd/yyyy'" placeholder="mm/dd/yyyy" />
jsDate function is as below
app.filter("jsDate", function () {
return function (x) {
return new Date(parseInt(x.substr(6)));
};
});
the date gets converted from JSON date format to MMddyyy format without any problem. But once after data is displayed if I try to edit the date field it is not allowing me to do so. I am new to angularjs. Can anyone help, please ?