将 JSON 数据绑定到日期范围选取器日历
Bind JSON data to date range picker calendar
我正在使用 JSON 来存储数据并使用日期范围选择器作为以下代码。
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
if (!date1 || date2) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker("option", "minDate", dateText);
} else {
$("#input2").val(dateText);
$(this).datepicker("option", "minDate", null);
}
//$("#dateoutput").html("Chosen date is <b>" + date1 + "</b> - <b>" + dateText + "</b>");
}
});
});
如何根据所选日期范围绑定数据。
enter code here
我不完全确定你想做什么,但我根据我的理解制作了一个 JSFiddle。
要进行测试,请执行以下操作:
1)我已将初始日期保存为JSON字符串,因此您可以单击"加载JSON日期",它将解析JSON字符串并将值存储在2个输入字段中。
2)然后,您可以选择另一个日期范围,然后单击"存储JSON数据",它将字符串化数据。
3) 更改日期
4) 单击"加载 JSON 数据",它会将字段重置回您存储的数据。
http://jsfiddle.net/1xqbgshm/4/
该代码执行以下操作:
$("#store").click(function () {
var date1 = $("#input1").val();
var date2 = $("#input2").val();
var dateObject = {
"fromDate": date1,
"toDate": date2
};
jsonString = JSON.stringify(dateObject);
alert(jsonString);
});
$("#load").click(function () {
var javascriptObject = $.parseJSON(jsonString);
$("#input1").val(javascriptObject.fromDate);
$("#input2").val(javascriptObject.toDate);
});
这有帮助吗?
相关文章:
- JavaScript打印功能使日历停止工作
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- primefaces日历可以禁用过去的日期和时间吗
- Google 脚本:用于创建日历活动的脚本运行时不会出错,但不会执行任何操作
- 如何在谷歌日历图表中使用布尔型列
- Json在完整日历中对数据进行了编码
- 将到达日历中的2天添加到离开日历中
- 如何在下拉列表中选择完整的日历月份和年份
- 谷歌公共日历链接没有'不工作(完整日历)
- 清除启动日期选取器值
- 引导 3 日期选取器使用内联日历捕获日期
- 将 JSON 数据绑定到日期范围选取器日历
- 使用同一页面上另一个日历中的日期更改引导日期选取器日历中的日期
- 日期范围选取器 在两个日历上显示结束日期
- JQUERY UI 日期选取器日历未显示
- JQuery 日期选取器隐藏页面上一个日历中的日期
- 引导日历日期时间选取器在单击时不加载
- 如果单击日期选取器字段,则必须显示两个日期范围日历
- 引导日期选取器日历不会在你按 Tab 键浏览时隐藏
- 在数据选取器上隐藏日历