Home>
I use a date picking library called flatpickr
Current disabled state
・ Every Wednesday
-Specific date Example: disable: ['2019-07-19', '2019-07-18', '2019-07-16',]
What I want to do is to enable only a part of Wednesday.
As you did,
enable: ['2019-11-20', '2020-01-01',],
If i add, only the above specified date is enabled and the others are disabled.
function hook_flatpickr_script () {
$output = "<script>
jQuery (function ($) {
function getMinDate (later) {
var today = new Date ();
today.setDate (today.getDate () + later);
var year = today.getFullYear ();
var month = today.getMonth () + 1;
var day = today.getDate ();
return yyyymmdd (year, month, day);
}
// date format
function yyyymmdd (y, m, d) {
var y0 = ('0000' + y) .slice (-4);
var m0 = ('00' + m) .slice (-2);
var d0 = ('00' + d) .slice (-2);
return y0 + '-' + m0 + '-' + d0;
}
var minDate = getMinDate (3);
var config = {
minDate: minDate,
// enable: [
// '2019-11-20',
// '2020-01-01',
//],
disable: [
'2019-07-19',
'2019-12-23',
'2019-12-24',
{
from: '2016-09-11',
to: '2016-10-10'
},
function (currentDate) {
return (currentDate.getDay () === 3);
}
],
locale: {
firstDayOfWeek: 0,
weekdays: {
shorthand: ['day', 'moon', 'fire', 'water', 'tree', 'gold', 'sat'],
},
months: {
longhand: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', '10 'Month', 'November', 'December'],
},
},
};
$('. flatpickr'). flatpickr (config);
})
</script>
<style>
.flatpickr-day.disabled, .flatpickr-day.disabled: hover {
color: rgba (255, 0, 0, 0.5);
}
</style>";
}
-
Answer # 1
Related articles
- i want to apply the behavior specified by addeventlistener to all td in each tr using javascript
- javascript - how to enable the checkbox in the parent window when you can see that all the pages in the child window are display
- javascript - i want to get all specified column values from the model defined by sequelize
- javascript - is it possible to get even if name is entered in the id name specified by getelementbyid?
- javascript - delete the data in the specified row
- javascript - when you mouse over the scroll bar, the mouse cursor specified in the image returns to the normal cursor
- text and link colors cannot be specified in javascript
- javascript - how to get the src of the clicked img and display the src of the obtained img in the specified location (when there
- javascript - i want to get the information of the specified query parameter in restapi acquisition using axios
- javascript - even if false is specified for onsubmit of form, full screen update may occur
- javascript - how to enable debugger in environment built with vue-cli
- javascript - how to make an array by separating with specified characters
- i want to extract only the elements that match the specified elements of the map array in the elements of the javascript array
- javascript - if the specified data exists in ajax communication, i want to send it all at once
- javascript - [gas] search the specified item from the table and get the number of cases every day [with image]
- javascript - how to use flatpickr
- javascript - [js] i want to get all the dates in the specified period using the dayjs library
- javascript - [js] i want to move to the specified scroll location with an element in overflow
- javascript - open only specified element (accordion link destination) after transition from another page
Trends
It seems that
config
can be dynamically built with javascript without writing object literals all at once.For example, it looks like this
How about using the time calculation method in this question to dynamically generate a value to be included in disabled?