We Keep Coding

Material ui datetimepicker [duplicate]

I am using material-ui v0.20.0 for React js
This is my DatePicker component
<Field
name='appointmentDate'
label="Select Date"
component={this.renderDatePicker}
/>
renderDatePicker = ({ input, label, meta: { touched, error }, ...custom,props }) => {
return (
<DatePicker
{...input}
{...custom}
autoOk={true}
floatingLabelText={label}
dateForm='MM/DD/YYYY'
shouldDisableDate={this.disabledDate}
minDate={ new Date()}
value={ input.value !== '' ? input.value : null }
onChange={(event, value) => input.onChange(value)}
/>
);
};
What should I write in disabledDate(){...} if I want to disable any of the day/s ?

Here is the sample code that needed to be added.
You can refer this link for more details - https://material-ui.com/components/pickers/#date-time-pickers
You can add condition according to your need in order to disable date.
import React from 'react';
import DatePicker from 'material-ui/DatePicker';
function disableWeekends(date) {
return date.getDay() === 0 || date.getDay() === 6;
}
function disableRandomDates() {
return Math.random() > 0.7;
}
/**
* `DatePicker` can disable specific dates based on the return value of a callback.
*/
const DatePickerExampleDisableDates = () => (
<div>
<DatePicker hintText="Weekends Disabled" shouldDisableDate={disableWeekends} />
<DatePicker hintText="Random Dates Disabled" shouldDisableDate={disableRandomDates} />
</div>
);
export default DatePickerExampleDisableDates;

Consider this
above code code is cutted (demo code is inside a component)
disableWeekends(date) {
/* date interdites french format dd/mm for all year !
01/01
01/05
08/08
14/07
15/08
01/11
11/11
25/12
replace date.getFullYear() by the desired year otherwise
*/
// in the following array format is us month are starting from 0 till 11
const dateInterditesRaw = [
new Date(date.getFullYear(),0,1),
new Date(date.getFullYear(),4,1),
new Date(date.getFullYear(),7,8),
new Date(date.getFullYear(),6,14),
new Date(date.getFullYear(),7,15),
new Date(date.getFullYear(),10,1),
new Date(date.getFullYear(),10,11),
new Date(date.getFullYear(),11,25),
];
/* make a new array with the getTime() without it date comparaison are
never true */
const dateInterdites = dateInterditesRaw.map((arrVal) => {return
arrVal.getTime()});
/*exclude all sunday and use the includes array method to check if the
date.getTime() value is
in the array dateInterdites */
return date.getDay() === 0 || dateInterdites.includes(date.getTime());
}
render() {
return(
<DatePicker
floatingLabelText="Jour de la visite"
value={this.props.dateVisite}
shouldDisableDate={this.disableWeekends}
onChange={this.handleChangeDateVisit}
/>
);
}
}

in the updated API it's the "disablePast" property.
check https://material-ui-pickers.dev/api/DatePicker

I tried to filter the days I had as an array of days with the steps below:
converted strings into a Date object.
converted the Date objects into timeStamp for comparison.
compare timeStamps plus the weekends with all the dates we have in our calendar.
const disableBookedDays = (date) => {
const convertedIntoDateObject = bookedDates.map((bookedDate) => {
return new Date(bookedDate).getTime();
});
return date.getDay() === 0 || date.getDay() === 6 || convertedIntoDateObject.includes(date.getTime());
};

For specific day:
Example: disable May 03 2021
<DatePicker
shouldDisableDate={(date) => date.getTime() === new Date('2021-05-03T00:00').getTime()}
/>

const disabledDays = (date) => {
return !myDates.map((myDate) => new Date(myDate).getTime()).includes(date.getTime());
};
Para deshabilitar un array de fechas especificas

User or to add multiple specific dates
<DatePicker shouldDisableDate={(date) => date.getTime() === new Date('2021-05-03T00:00').getTime() || new Date('2021-05-04T00:00').getTime() || new Date('2021-05-05T00:00').getTime()}
/>

How to get current time in hh:mm:ss format using moment in React JS

I want to calculate the time between hours and moments. with example:
export const DataCoba: React.FC = () => {
const format = "hh:mm:ss";
return (
<div>
{moment(format).isBetween(
moment("21:00:00", format),
moment("23:00:00", format)
)
? "Between"
: "NOOO"}
</div>
);
};
from the script above what I want is to get the current time, but only in hh:mm:ss format only.
for example: moment('23:00:00', hh:mm:ss).
moment(format) is showing invalid date. Is there a way to do it?

Delete your first moment's parameter. Because actually your second and third moment is have the same day as your first moment.
Try this one:
export const DataCoba: React.FC = () => {
const format = "hh:mm:ss";
return (
<div>
{moment().isBetween(
moment("21:00:00", format),
moment("23:00:00", format)
)
? "Between"
: "NOOO"}
</div>
);
};

This is my expected answer from #TimLewis
moment().isBetween(moment().set('hour', 21), moment().set('hour', 23)) ? 'Yes' : 'No'

Different of Date gives a null result in javascript

My goal is to make a time countdown component. I must show a difference of date from current date to user-entered date, in Year Month Day Hour Min Sec format.
I tried to minus the two dates but ended up with 00:00:00:00. Adding them gave me a result but minus gives me this 00.
Other answers do not satisfy requirements or explain why I get a difference of 0 when subtracting dates.
my code:
import "./App.css";
import Countdown from "react-countdown";
function App() {
console.log(Date.now());
return (
<div className="App">
<h1>Hello</h1>
<form>
<input type="date" />
<button>submit</button>
</form>
<Countdown date={new Date(2021, 6, 10) + Date.now()} />,
</div>
);
}

You can either do it manually as
function addDays(date, days) {
var result = new Date(date);
result.setDate(result.getDate() + days);
return result;
}
or use moment js ( https://momentjs.com/ ) for operations

using moment.js, you can do it in this way:
const diffDates = (start, end) => {
let a = moment(start);
let b = moment(end);
return a.diff(b, "days");
};

Disable mat-datepicker with holidays list and weekdays(saturday & Sunday) in angular material

I am trying to disable the dates based on list of holidays (Getting from api), and also I want to disable weekdays i.e Saturday and Sunday. I am able to disable list of holidays date, but can't able to disable the weekdays. Here is my code that I have used.
<input matInput [matDatepickerFilter]="holidayDateFilter" [matDatepicker]="picker">
holidayDateFilter = (d: Date): boolean => {
let d = moment(d);
if (this.holidayList) {
return !this.holidayList.find((x) => {
return moment(x).isSame(d, 'day');
})
}
}
Now, where to I put condition for disabling weekends.
Please help me with this.
Thanks in advance.

You can add functionality to check if the day is weekend.
holidayDateFilter = (d: Date): boolean => {
// check if date is weekend day
if (date.getDay() === 0 || date.getDay() === 6) {
return true;
}
// check if date is holiday
let d = moment(d);
if (this.holidayList) {
return !this.holidayList.find(x => {
return moment(x).isSame(d, 'day');
});
}
};

match values start or end dates in javascript

I am facing an issue in javascript dates, i want to match slot dates comparing start_date or end_date.
my component
{this.state.data && this.state.data.length
? this.state.data
.filter(data => {
const date = new Date(data.start_date);
const enddate = new Date(data.end_date);
console.log(date); //start
console.log(enddate); //end
return date > prevDate && date < nextDate;
})
.map(({ cust_full_name, start_date }, index) => (
<div class="row" key={index}>
slot: {index + 1}
<p>{start_date}</p>
<p>{cust_full_name}</p>
</div>
))
: null}
working demo:
https://codesandbox.io/s/lucid-dream-gl3l7?file=/src/App.js
what should i do? can anyone help me?

Edit: Your slot values in your state are in arrays but when you pass them to date you aren't accessing the string value.
slot1 : ["date"]
Incorrect: new Date[slot1]
Correct: new Date[slot[0]]
In your sandbox it seems you never populated newprevious and newseconddate here:
const prevDate = new Date(this.state.newprevious);
const nextDate = new Date(this.state.newseconddate);
Once i populated those in the above state section, it seems to work. I do also suggest maybe turning Date into something like epoch; so the numbers are easier to work with (Get epoch for a specific date using Javascript)