I'm using ant design date time picker, I'm disabling the past date and before the current time, but I have some conflict on the picker, when I click the future date that time always disable before the current time, anyone knows some solution for the issue
here the stack blitz
Here my code
//date disable
disabledDate(current: any) {
// Can not select days before today and today
//return current && current < moment().endOf('day');
return current && current < moment().startOf("day")
}
//time disable
getDisabledHours() {
var hours = [];
for (let i = 0; i < moment().hour(); i++) {
hours.push(i);
}
return hours;
}
//time disable
getDisabledMinutes = (selectedHour: any) => {
var minutes = [];
if (selectedHour === moment().hour()) {
for (var i = 0; i < moment().minute(); i++) {
minutes.push(i);
}
}
return minutes;
}
<DatePicker
name="Date" disabledDate={this.disabledDate}
onChange={this.onChangeDate}
style={{width: "100%"}}
showTime={{ disabledMinutes: this.getDisabledMinutes,
disabledHours: this.getDisabledHours}}
/>
Problem that I found in your code is, while disabling the hours, you're not taking selected date into consideration.
Just add a condition, that disables logic will run only for the current date, and not for the future dates.
For that condition, you can compare your currently selected date from the state.
<DatePicker
name="Date" disabledDate={this.disabledDate}
onChange={date => this.setSatate({date})}
style={{width: "100%"}}
value={moment(this.state.date)}
showTime={{
disabledMinutes: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledMinutes,
disabledHours: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledHours
}}
/>
https://stackblitz.com/edit/react-ts-rtsqmw
Note: onChange only triggers when you click OK button in the picker, and after selecting a date, when you select the time, then the disable issue will disappear. I not aware of ant design APIs much, but your issue is fixed, all you have to do is update the state of the selected date on clicking on the date and not OK button
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 already follow the docs that works well with date object for pickup time and edit time but problem arise when i have custom time that stored in database like 04:00 PM and on edit event i have to display that time on textfield and edit but edit can't works because format is
timestring.
docs: https://material-ui-pickers.dev
https://codesandbox.io/s/lucid-varahamihira-2unp9
Here the relevant code :
handleStartTimeChange(date) {
this.setState({
offerStartTime: date
});
}
editTime() {
this.setState({
custom_time: "03:00 PM"
});
}
render() {
return (
<div className="app">
<Timepicker
value={this.state.offerStartTime}
onChange={date => this.handleStartTimeChange(date)}
inputValue={this.state.custom_time}
/>
<button onClick={() => this.editTime()} style={{ marginTop: "0px" }}>
Edit
</button>
</div>
);
}
I am not sure I understand your need, I think you want to parse the value you have from string to date.
You can use any library you want for this or the built-in Date in javascript, or you can make a custom function if you are confident about the input.
Example :
editTime() {
this.setState({
offerStartTime: parseTime("03:00 PM")
});
}
function parseTime( t ) {
var d = new Date();
var time = t.match( /(\d+)(?::(\d\d))?\s*(p?)/ );
d.setHours( parseInt( time[1]) + (time[3] ? 12 : 0) );
d.setMinutes( parseInt( time[2]) || 0 );
return d;
}
//render
<Timepicker
value={this.state.offerStartTime}
onChange={date => this.handleStartTimeChange(date)}
// I am not sure you need this : inputValue={this.state.custom_time}
/>
The parseTime function has been found in this SO answer
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();
}
})
I would like to restrict users from selecting particular dates based on business logic in react native ios/ android date pickers. Currently in the document i only see that a min date and max date can be provided.
So is there a way to only restrict lets say (5 , 6, 10, 12 , 18) of a month?
Note: these dates are just an example would change from a case to case scenario
For IOS example
<DatePickerIOS
date={this.state.chosenDate}
onDateChange={(date) => {
if(isAllowedDate(date)) {
this.setState({chosenDate: newDate})
}
else {
this.setState({error:'you can not select this date ...'})
}
}}
/>
use react-native-datepicker module for iOS and Android , set a method to check if date valid or not
render(){
return(
...
<DatePicker
mode="date"
placeholder="select date"
format="YYYY-MM-DD"
onDateChange={this.saveDateIfValid}
/>
...
)
}
saveDateIfValid = (date) =>
{
if(date){
let dateArray = data.split("-");
let validDays = [5,6,10,12,18];
let selectedDay = parseInt(dataArray[2]);
if(validDays.indexOf(selectedDay) > -1){
//date is valid
this.setState({date : date});
return; //end the method
}
}
//not valid
this.setState({date : null});
}
I'using this library for react time picker: https://github.com/YouCanBookMe/react-datetime
But now I have 2 problems.
The time (Am, Pm, HH:mm) in timepicker doesnt'work , because it doesn't change, it remain to 12 : 00 AM
How correctly update state? because if I handle onChange (input manual write), it receive string, that I can't parse and it is invalid date.
My code is:
import DateTime from 'react-datetime';
var moment = require('moment');
handleChangeDate(propertyName, date) {
const event = Object.assign({}, this.state.event);
if (typeof date === 'string') {
date = moment(date);
}
event[propertyName] = data.format('DD/MM/YYYY HH:mm');
this.setState({ event: event });
}
and in Render() I have compoment:
<DateTime dateFormat={"dddd, MMM. Do YYYY, HH:mm (hh:mm a)"} value={this.state.event.to} onChange={this.handleChangeDate.bind(this, 'to')}/>
What is wrong?
check in below link.
Customized calendar will solve your problem.
https://github.com/YouCanBookMe/react-datetime#customize-the-appearance
After choose date in calendar then click on date. It will show the edit option for time.
Example Link
https://codepen.io/simeg/pen/YppLmO
Let it try