how to enable two day only in react-day-picker - reactjs

I need to enable two days only in my react-day-picker. The remaining days should be disabled. Could anyone give me an example of how to accomplish this?
I tried with this example but it not working for me.
export default function Example() {
getDaysInMonth(month, year){
// Since no month has fewer than 28 days
let date = new Date(year, month, 1);
const days = [];
while (date.getMonth() === month) {
dateys.push(new Date(date));
date.setDate(date.getDate() + 1);
}
return days;
}
const disabledMonth = this.getDaysInMonth(12, 2017);
return (
<DayPicker
initialMonth={new Date(2017, 3)}
disabledDays={
this.disabledMonth.filter(
(date) => ![new Date(2017, 12, 3), new Date(2017, 12, 13)].includes(date)
)
}
/>
);
}
i tried to run this code i getting empty array

An option is that you could set that the user should not be able to change the month if the two days are within the same month. You can set which month this is with initial month.
You can then set the disabled days which will be an array of dates which is the days of that month excluding the two available days.
Example:
If you use something like this to have a method to get all dates in a month, you could do something like this:
import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
export default function Example() {
const disabledMonth = getDaysInMonth(11, 2017);
return (
<DayPicker
initialMonth={new Date(2017, 11)}
disabledDays={
this.disabledMonth.filter(
(date) => ![new Date(2017, 11, 3).toString(), new Date(2017, 11, 13).toString()].includes(date.toString())
)
}
/>
);
}
Here i am filtering out two dates, the 3rd and 13th of december, which should be available.
This is written with es6

Related

Is there a way to enable only certain calendar options?

I am trying to create a calendar which depends on a parameter. If the user wants a weekend pass I need to let him choose only one set of the days Friday, Saturday, Sunday in the period of one month.
Example:
If I choose to buy a weekend pass today 09/09/2021, I can have the options 10-12/09,17-19/09,24-26/09 for September.
The calendar has to be Infinite in order to be renewed every day. I have created the values date, month, year to get the current full date, which I parse to minDate maxDate in order to limit the options into only one month.
Code:
render() {
let newDate = new Date()
let date = newDate.getDate();
let month = newDate.getMonth();
let year = newDate.getFullYear();
let weeklyVignette = newDate.getDate();
const {label, t, value = '', loading, error, width, height, displayOptions, locale, key, required, validateOnBlur,
theme, name, proposed, disabled = false, onChange, minDateBeforeToday, setError, available=true,
minDate = new Date(year, month, date),
maxDate = new Date(year, month, date+30)} = this.props;
const {selected} = this.state;
const _locale ={...locale, ...{weekdays: locale.weekdays.map(day => t(day))}}
const resultCalendar =
this.state.open && !disabled
? <InfiniteCalendar
width={width}
height={height}
selected={value||selected||proposed}
displayOptions={displayOptions}
locale={_locale}
theme={theme}
minDate={minDate}
weeklyVignetteDays = { (weeklyVignette===4 && weeklyVignette===5 && weeklyVignette===6 )}
max = { new Date(year, month, date+30) } // Maximum month to render
min = { new Date(year, month, date) } // Minimum month to render
maxDate={maxDate}
onSelect={(e) => this.onClick(e, onChange)}
/>
: null;
How can I block all the days of the current month except Fridays, Saturdays and Sundays?
Any thoughts?
you should use the property of disabledDays
For example, to disable Monday and Sunday: [0, 6]
in your case you should use: disabledDays = [0,1,2,3]

React year picker with min max range

Is there any react year picker which will only pick a year from a given range of the year. If so, how can I do it. I have tried react-datetime. But I couldn't set the range of the year.
<Datetime min={1800} max={2020} dateFormat="YYYY" timeFormat={false} onChange={(date) => this.onChangeExactYear(date)}/>
You should use isValidDate prop (https://github.com/arqex/react-datetime#blocking-some-dates-to-be-selected)
const isValidDate = current => {
const year = current.year();
return year >= 1800 && year <= 2020;
};

Add / Remove 1 day with Moment.js in React

I have a div with 2 dates inside, for example (< march 25th - march 26th >), and there are 2 arrows "<" and ">"
If a user presses the "<" arrow, I need to remove 1 day to the 2 dates :
(< march 25th - march 26th >) becomes (< march 24th - march 25th >),
and if a user presses the ">" arrow, I need to add 1 day to the 2 dates :
(< march 25th - march 26th >) becomes (< march 26th - march 27th >),
I stored the 2 dates in hooks, and by default, the firstValue is the day of today and the secondValue is 1 week later
const [firstValue, setFirstValue] = useState(
moment(new Date()).format("dddd Do MMMM YYYY")
);
const [secondValue, setSecondValue] = useState(
moment(new Date())
.add(1, "weeks")
.format("dddd Do MMMM YYYY")
);
I tried this when the user presses the "<" arrow :
function previousDay() {
console.log(firstValue, secondValue);
setFirstValue(moment(firstValue).remove(1, "days"));
setSecondValue(moment(secondValue).remove(1, "days"));
}
but I have the error
TypeError: moment__WEBPACK_IMPORTED_MODULE_2___default(...)(...).remove is not a function
Can somebody know how can I do that
Based on my comments, I'd suggest the following changes:
const [firstValue, setFirstValue] = useState(
moment(new Date()) // remove .format() here
);
const [secondValue, setSecondValue] = useState(
moment(new Date())
.add(1, "weeks")
);
On your render:
render() {
<>
...
...
{firstValue.format("dddd Do MMMM YYYY")}
</>
}
And your function should be something like:
function previousDay() {
setFirstValue(firstValue.subtract(1, "days")); // don't need to moment() anymore
setSecondValue(secondValue.subtract(1, "days"));
}
Change to :
function previousDay() {
console.log(firstValue, secondValue);
setFirstValue(moment(firstValue).subtract(1, "days"));
setSecondValue(moment(secondValue).subtract(1, "days"));
}
Because "remove" is not a valid property of [Moment object].

How to set today date as a default date in antd?

I want to set today date as a default selected date in ant design date picker.
how can I do that?
<DatePicker
onChange={this.onChange}
defaultValue={moment("YYYY-MM-DD")}
/>
I am trying to do that using this line it is not working.
Just call moment without arguments and separate the format to its property.
const dateFormat = 'YYYY/MM/DD';
ReactDOM.render(
<div>
<DatePicker defaultValue={moment()} format={dateFormat} />
</div>,
document.getElementById('container'),
);
you can set a function on mounted to create today's date
data() {
return {
date: ''
};
},
methods: {
getDate() {
const d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
this.date = [year, month, day].join('-');
},
},
mounted() {
this.getDate();
}
then you can pass this.date value into the default value like this:
<DatePicker
onChange={this.onChange}
defaultValue={moment(date)}
/>
if this script not working :
[year, month, day].join('-') you can change to ${year}-${month}-${day}
tell me if this still not work for your problem because from what i'm understand, you are tried to set the default value by today date right?

Want to display last day of last month in reactjs

I want to initially display the last month's last date, for example, this is November, I want to display 31/10/2019. How is it possible?
var date = new Date();
date.setMonth(date.getMonth())
const firstDayOfCurrent = new Date(date.getFullYear(), date.getMonth(), 0);
const firstDayOfCurrentMonth = moment(firstDayOfCurrent).format('MM/DD/YYYY')
console.log(firstDayOfCurrentMonth);
<td><input type="date" value={firstDayOfCurrentMonth} onChange={(e) => { this.state.invoice.InvoiceDateString = e.target.value; this.setState({ isset: true }); }} required /></td>
This code snippet will give you last date of last month
var date = new Date();
date.setMonth(date.getMonth())
var lastDay = new Date(date.getFullYear(), date.getMonth(), 0);
var lastDayOfLastMonth = lastDay.toISOString().substr(0, 10);
and your input tag
<input type="date" defaultValue={lastDayOfLastMonth } required />
You can take month from current date to take first day of current month and then subtract one day:
const today = new Date();
const firstDayOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), -1);
``
I would recommend to use date-fns, which has a ton of helper functions you could use for that use-case.
For example lastDayOfMonth, which returns the last day of the month.
It also allows tree-shacking, so that you do not import the whole library, but only the functions you use.

Resources