- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Flatpickr满足我的日历需求。它提供了一个带有箭头的输入字段来更改年份。
我需要在日历中有一个下拉列表,以便我可以从该下拉列表中选择一年,然后日历指向那一年。
我动态地给日历元素一个特殊的类.birthDate
。我在日历中动态添加了一个下拉列表,如下所示:
var currYear = new Date().getFullYear()
var yearOptions = "";
for(var i = 1960; i <= currYear; i++) {
var option = "<option value = " + i + ">" + i + "</option>";
yearOptions += option;
}
var yearDropdown = "<select class=\"year-dropdown\">" + yearOptions + "</select>";
$(".birthDate .flatpickr-current-month").append(yearDropdown);
问题是,当我点击它时没有任何反应。我的猜测是有一些 preventDefault
方法可以防止任何点击导致任何操作。然而,当我在单击下拉列表时添加控制台语句时,它会出现在控制台上。
所以我的问题是如何在单击它时打开下拉菜单。请查找问题示例 here .
最佳答案
如果有人有兴趣向 Flatpickr 添加年份下拉选择选项,这是我的解决方案
// plugin js file
/**
* Flatpickr Year Select Plugin.
* @author Labi Romabravo
*/
/**
*
* @returns {Function}
*/
const yearDropdownPlugin = function (pluginConfig) {
var defaultConfig = {
text: '',
theme: "light",
date: new Date(),
yearStart: 100,
yearEnd: 2,
};
var config = {};
for (var key in defaultConfig) {
config[key] = pluginConfig && pluginConfig[key] !== undefined ? pluginConfig[key] : defaultConfig[key];
}
var getYear = function (value) {
var date = value.split("/");
return parseInt(date[2], 10);
}
var currYear = new Date().getFullYear();
var selectedYear = getYear(config.date);
var yearDropdown = document.createElement("select");
var createSelectElement = function (year) {
var start = new Date().getFullYear() - config.yearStart;
var end = currYear + config.yearEnd;
for (var i = end; i >= start; i--) {
var option = document.createElement("option");
option.value = i;
option.text = i;
yearDropdown.appendChild(option);
}
yearDropdown.value = selectedYear;
};
return function (fp) {
fp.yearSelectContainer = fp._createElement(
"div",
"flatpickr-year-select " + config.theme + "Theme",
config.text
);
fp.yearSelectContainer.tabIndex = -1;
createSelectElement(selectedYear);
yearDropdown.addEventListener('change', function (evt) {
var year = evt.target.options[evt.target.selectedIndex].value;
fp.changeYear(year);
});
fp.yearSelectContainer.append(yearDropdown);
return {
onReady: function onReady() {
var name = fp.monthNav.className;
const yearInputCollection = fp.calendarContainer.getElementsByClassName(name);
const el = yearInputCollection[0];
el.parentNode.insertBefore(fp.yearSelectContainer, el.parentNode.firstChild);
}
};
};
}
export default yearDropdownPlugin
// if (typeof module !== "undefined")
// module.exports = yearDropdownPlugin;
用法
import yearDropdownPlugin from "@/utils/year_flatpickr_plugin";
var input = document.querySelector("#" + this.containerId);
this.datepicker = flatpickr(input, {
plugins: [
new yearDropdownPlugin({
date: this.value,
yearStart: this.yearStart,
yearEnd: this.yearEnd
})
],
wrap: true,
enableTime: false,
dateFormat: "d/m/Y",
minDate: this.min
//mode: "range"
});
CSS
.flatpickr-current-month .numInputWrapper {
display: none;
}
.flatpickr-current-month span.cur-month {
margin-right: 10px;
width: 85px;
font-size: 0.75em;
top: 0px;
padding-top: 10px;
padding-right: 2px;
position: absolute;
left: 0px;
font-weight: 600;
text-align: right;
}
.flatpickr-current-month {
width: 100px;
}
.flatpickr-year-select {
background-color:#052f66;
z-index: 100;
position: absolute;
top: 5px;
right: 70px;
width: 100px;
}
.flatpickr-year-select select{
width: 100%;
height: 24px;
font-weight: 600;
outline: 0;
overflow: hidden;
background: #ffffff;
color: #747a80;
border: #ffffff;
padding: 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 6px;
}
关于jquery - Flatpickr:添加下拉菜单以更改年份,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51425067/
我正在使用 flatpickr 来设置日期, onChange: function(selectedDates, dateStr, instance) { var myDate = selec
这可能是一个基本问题,但我正在努力。本质上,我有一个 livewire 组件,用于更新用户输入的一系列航类信息。每当组件被重新渲染时, flatpickr 功能就会完全停止工作。我认为这是因为在该字段
当我打开然后关闭 Flatpickr 实例而不选择日期时,它会将其设置为今天的日期。如何防止这种行为?当用户未设置时,我需要日期输入保持为空。 Flatpickr 实例用 React-Flatpick
我正在使用平面选择器,输入的日期如下: 01/02/1991 (Day 1 / Month Feb / Year 1991. 但是,当我添加 Flatpickr 类时,它将日期转换为: 02/01/1
我正在使用 flatpikr https://flatpickr.js.org/我希望在出站(仅日期)选择器的关闭事件中,将返回选择器的初始日期设置为第一个选择器中选择的相同日期。我编写的这段代码可以
我正在使用 Flatpickr满足我的日历需求。它提供了一个带有箭头的输入字段来更改年份。 我需要在日历中有一个下拉列表,以便我可以从该下拉列表中选择一年,然后日历指向那一年。 我动态地给日历元素一个
我正在使用 Flatpickr满足我的日历需求。它提供了一个带有箭头的输入字段来更改年份。 我需要在日历中有一个下拉列表,以便我可以从该下拉列表中选择一年,然后日历指向那一年。 我动态地给日历元素一个
我在我的应用程序上使用“flatpickr”作为日期时间选择器。此日期选择器允许选择多个日期,但在阅读文档后,我找不到任何方法来限制所选日期的最大数量。 Jquery: $('#gig_date_mu
我有以下 html: @Html.LabelFor(x => x.StartDate) @Html.TextBoxFor(m => m.StartDate, "{0:dd-MM-yy
我正在尝试使用 Jquery 实现 flatpickr。到目前为止一切顺利。 我有以下代码,它确实有效: flatpickr("#booking_start", {}); flatpickr("#bo
我有一些使用 flatpickr 日历实例的 HTML。我想做的是在单击随附的跨度时仅打开特定的日历实例。 附带的 Javascript 是
我正在使用这个加载 flatpickr: jQuery(document).ready(function($){ $('#Mydatetime').flatpickr({ a
我开始使用 flatpickr (从 xdsoft datetimepicker 开始,似乎不再积极维护)并希望实现滚动行为,就像 xdsoft 的 datetimepicker 一样,即允许使用鼠标
我正在使用“angularx-flatpickr”以 Angular 形式选择日期。当我点击输入区域然后弹出月份 View 时出现但所有日期都被禁用。 在我的 html 文件中, 我将这个
转载链接: https://jsfiddle.net/isaporto/hav7pqs5/ HTML: Click here JS: document.querySelector('button
我的任务是让用户选择一个日期(它在输入框中正常显示)。创建一个包含年份的新变量,但根据需要使用提供的日期中的一些逻辑来更改它。 我不知道我是否只需要使用提供的 .selectedDates 日期数组,
我目前正在使用 vue-flatpickr-component创建更好的日期输入字段。现在我有一个“onClose()”方法(参见下面的代码)来检查输入的日期是否有效。 我删除了大部分代码以使其更具可
我现在有一个范围日期选择器。 我想重复使用这些日期,但无法为所有场景选择它们。我尝试了下面的代码,如果所选日期在同一个月,该代码效果很好。但我的问题是,如果日期跨越多个月,这段代码将不起作用。 $(
如何在 flatpickr 中设置 maxDate? $("#date-picker").flatpickr("minDate", "2019-7-12"); 但是它不起作用。 最佳答案 尝试使用o
如何在 flatpickr 中设置 maxDate? $("#date-picker").flatpickr("minDate", "2019-7-12"); 但是它不起作用。 最佳答案 尝试使用o
我是一名优秀的程序员,十分优秀!