0
366
ViewsHow do I get my HTML form date input to only allow specific days of the week to be chosen using JavaScript, React and HTML?
I am trying to get my Forms Date Input to only allow Thursday, Friday, and Saturday to be selected. But I can't seem to find a way to do it.
Is there some JavaScript or HTML code I could use to solve this issue?
Here is my current code
import React from 'react';
const CustomForm = () => {
const addTwoWeeks = function () {
let today = new Date();
today.setDate(today.getDate() + 14);
let dd = today.getDate();
let mm = today.getMonth() + 1;
let yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
today = yyyy + '-' + mm + '-' + dd;
return today;
}
return (
<form>
<label htmlFor="date">Pick-Up Date:</label>
<input type="date" id="date" name="date" min={addTwoWeeks()} required />
</form>
)
}
export default CustomForm;
·
Juan Pablo Isaza
2 answers
Answer question0
It's quite simple if you will use datepicker js
$("#datepicker").datepicker({
beforeShowDay: function (d) {
var day = d.getDay();
return [day != 0 && day != 1 && day != 2 && day != 3];
},
});
Full working example:
<html>
<head>
<title>HTML</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" ></script>
<script>
$(function () {
$("#datepicker").datepicker({
beforeShowDay: function (d) {
var day = d.getDay();
return [day != 0 && day != 1 && day != 2 && day != 3];
},
});
});
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>
·
Juan Pablo Isaza
Report
0
The <input type="date" /> does not allow disabling specific days of the week. See here (MDN docs).
In that case, you can either
- Prevent form submission and showing a proper validation message for the invalid day selection.
- Or, use a third-party react date picker/calendar library (or, if you have time, implement a datepicker).
I recommend react-dates(Github link) in case you go for option 2. Keep in mind the size of the import though.
<SingleDatePickerWrapper isDayBlocked={isDayBlocked} autoFocus />
Here(Storybook) is a variant/example which blocks day selection for Fridays. Link to the corresponding code(Gtihub) .
·
Juan Pablo Isaza
Report
Answer question