个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我通过使用 jquery-ui datepicker 制作了一个内联日历，我也在其中使用了 multiDatePicker。但是在单击某个特定按钮时，我希望分配到 multiDatePicker 中的所有日期都将被删除，并且只有单击的日期才会显示为选中。
我的代码是这样的:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet prefetch" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui.multidatespicker.js"></script>
<script>
$(function() {
var today = new Date();
var yesterday = (new Date()).setDate(today.getDate()-1);
var tomorrow = (new Date()).setDate(today.getDate()+1);
var dayAfttomorrow = (new Date()).setDate(today.getDate()+2);
var dayDayAfttomorrow = (new Date()).setDate(today.getDate()+3);
var dates = [yesterday, today, tomorrow, dayAfttomorrow, dayDayAfttomorrow];
$('#calender').multiDatesPicker({
disabled: false,
addDates: dates
});
$( "#calender" ).datepicker({
changeYear: true,
changeMonth: true,
onSelect: function(dateStr) {
// $('#calender').multiDatesPicker('resetDates', true);
var date = $(this).datepicker('getDate');
alert(date);
}
});
});
</script>
<style type="text/css">
/*.ui-state-highlight,*/ .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
border: 1px solid green !important;
/*background: green;*/
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
border: 1px solid #d3d3d3 !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: none !important;
}
/*.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: green;
}*/
</style>
</head>
<body>
<!-- HTML -->
<div id="calender"></div>
</body>
</html>
这里我无法在 onSelect 中获得警报？谁能帮我解决这个问题......
最佳答案
您只需将 onSelect 传递给 multiDatesPicker
$(function() {
var today = new Date();
var yesterday = (new Date()).setDate(today.getDate() - 1);
var tomorrow = (new Date()).setDate(today.getDate() + 1);
var dayAfttomorrow = (new Date()).setDate(today.getDate() + 2);
var dayDayAfttomorrow = (new Date()).setDate(today.getDate() + 3);
var dates = [yesterday, today, tomorrow, dayAfttomorrow, dayDayAfttomorrow];
$('#calender').multiDatesPicker({
addDates: dates,
onSelect: function(dateStr) {
// $('#calender').multiDatesPicker('resetDates', true);
var date = $(this).datepicker('getDate');
$('#calender').multiDatesPicker('resetDates').multiDatesPicker('addDates', [date]);
console.log($('#calender').multiDatesPicker('getDates'))
}
});
});/*.ui-state-highlight,*/
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid green !important;
/*background: green;*/
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #d3d3d3 !important;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: none !important;
}
/*.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: green;
}*/<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet prefetch" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<div id="calender"></div>关于javascript - datepicker OnSelect 不工作，当它有 multidatepicker，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35742962/
25
4
0
在我的DLL中，我已使用System.ObsoleteAttribute将虚拟方法标记为已过时，但这不会产生我所期望的警告。 DLL源(Baz): [Obsolete("This method has
当我输入 DPRtelephonenumber 时，我想在 DPRcallerhometelephonenumber 中重复它。 只要我在打字，这个脚本就可以工作。但是，如果 提供了一个以前使用过的值
这个问题已经有答案了: jQuery - how to alter Datepicker settings after it has been initialized (3 个回答) 已关闭 6 年前
我的日期选择器出现问题。我需要自定义这个日期选择器，但是当我尝试自定义它们时它不起作用。示例: 我有这个 html 代码: 在 javascript 上我尝试这样做: $('
我在 React 类中有工作代码 但是当我更改为 React.Component 时，整个 UI 都崩溃了。 调试了代码，我认为问题出在这个 onSelect 函数上。 因为如果我给控制台语句它不会打
这是我正在尝试的代码 - DIVS- ... ... ... ... 现在我有一个下拉菜单，我从中获取值 16,17, 18,19 在这个下拉菜单中，我调用了 onchange 方法作为 我的 Ja
我有一个日期选择器，但 onClose 和 onSelect 不会触发。代码位于 document.ready 中，因此我知道它已初始化。 $('#DateRangeTo').datepicker({
我试图在 jquery datePicker 对象上处理相同的 onSelect 事件两次。据我了解，该事件可以多次处理，但是当我尝试这样做时，只有一个事件处理程序被触发。它似乎解雇了第二个处理程序，
我无法在 jQuery datepicker 上使用 onSelect。 这是我的代码: $(function() { $('.date-pick').datePicker( {
我一直在尝试获取在 jsTree 中选择的节点的文本。我能够填充树并触发 onSelect 事件，但我无法找出单击了哪个节点。我在网上看到过使用 data.rslt.obj.attr("data")
查看最后的编辑 我刚刚开始使用CodeMirror对于一个项目，我面临着一个我根本不理解的问题。 问题在于处理 CodeMirror 的事件，特别是在 "select" 事件上，因为我正在处理 "ch
当选择日期时，我必须调用 JavaScript 函数，JavaScript 如下， $(document).ready(function(){ var date_input=$('input[
假设我想在用户突出显示包含该范围的一些文本时隐藏该范围，以便将该文本复制到剪贴板上。 例如: The dragon a large, mythical beast belched fire at St
我正在使用定义如下的文本区域: 我试图检测用户何时选择某些文本以及 onselect似乎很适合这个。它在 w3schools 示例上完美运行，我让它工作为: 但是当我将其更改为我自己的函数时，什么
我试图从 AJAX 捕获另一个值，但它给了我一个错误 Uncaught TypeError: e.replace is not a function。 这是我的代码。 source: fun
我使用的是ngx-chips，但无法实现OnSelected函数。 在我的 app.component.html 中我有这个: 在我的 app.component.
我有一个 标签，我希望它在选择一个选项时更改隐藏输入的值。我的想法是使用这个: Option 1 is selected... 然后是这个 function stuff() { document.g
我正在使用 pixabay 自动完成 ( https://goodies.pixabay.com/jquery/auto-complete/demo.html ) 经过一些测试，我设法将纯文本结果列表
如果单击第 1 天或第 3 天，我想在输入字段中打印“18:00-19:00”，否则为“11:00-12.00”，即第 6 天。 除 onselect 函数外，以下所有代码都按预期工作。 jQuery
我有 2 个微调器元素，我想在用户更改任何微调器的选择时仅启动一个异步任务。 问题是，当我在我的设备上启动 Activity 时，两个异步任务都会立即启动，即使用户没有选择任何东西。 我尝试过的:
我是一名优秀的程序员,十分优秀！