为什么 Jquery UI 擦除我的输入框?
Why does Jquery UI erase my input box?
我正在制作一个 .net MVC 应用程序,我在 fiddle 中重现了这个问题。
当我尝试更改我的日期时,日历会停留在那里,当我单击屏幕上的其他地方时,日历会消失,但另一个日期会被删除。
我只是希望日历在我 select 日期时消失,而不是删除其他日期。
$('#from').datepicker({
inline: true,
showOtherMonths: true,
dateFormat: 'dd.mm.yy.',
firstDay: 1,
changeMonth: true,
changeYear: true,
yearRange: "-50:+50",
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$('#to').datepicker({
inline: true,
showOtherMonths: true,
dateFormat: 'dd.mm.yy.',
firstDay: 1,
changeMonth: true,
changeYear: true,
yearRange: "-50:+50",
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
$(".dates").change(function () {
var dateFrom = $("#from").val();
//check that there is data before saving into sessionStorage
if (dateFrom.value.length >= 8)
sessionStorage.setItem("fromDate", this.value)
var dateTo = $("#to").val();
//check that there is data before saving into sessionStorage
if (dateTo.value.length >= 8)
sessionStorage.setItem("toDate", dateTo)
if (dateTo != null && dateFrom !=null) {
$.ajax({
url: '/MainPage/DateSessionCreate',
type: 'POST',
data: { "dateTo": dateTo, "dateFrom": dateFrom },
dataType: 'json'
});
}
else {
alert("one of the dates is null");
}
});
var today = new Date();
var curr_date = today.getDate();
var curr_month = today.getMonth();
curr_month++;
var curr_year = today.getFullYear();
var toDate = "";
//check if there's a to Date in sessionStorage
if (sessionStorage.getItem("toDate")) {
toDate = sessionStorage.getItem("toDate");
sessionStorage.setItem("toDate", toDate);
} else {
toDate = curr_date + "." + curr_month + "." + curr_year;
sessionStorage.setItem("toDate", toDate);
if (toDate != null) {
$.ajax({
url: '/MainPage/DateSessionCreate',
type: 'POST',
data: { "dateTo": toDate},
dataType: 'json'
});
}
}
document.getElementById("to").value = toDate;
today.setDate(today.getDate() - 7);
var new_date = today.getDate();
var new_month = today.getMonth();
new_month++;
var new_year = today.getFullYear();
var fromDate = "";
//check if there's a from Date in sessionStorage
if (sessionStorage.getItem("fromDate")) {
console.log("if");
fromDate = sessionStorage.getItem("fromDate");
sessionStorage.setItem("fromDate", fromDate);
} else {
console.log("else");
fromDate = new_date + "." + new_month + "." + new_year;
sessionStorage.setItem("fromDate", fromDate);
if (fromDate != null) {
$.ajax({
url: '/MainPage/DateSessionCreate',
type: 'POST',
data: { "dateFrom": fromDate },
dataType: 'json'
});
}
}
document.getElementById("from").value = fromDate;
我承认,我还是个新手,如果我知道如何让日期选择器在输入框中写入日期(但是当我使用 'defaultDate: -7' 它时,整个代码可能会缩短仅突出显示日历中的日期)。
所以这就是我创建日期格式并手动将其写入输入框的原因。
额外的代码是为了确保日期在页面重新加载后保留在那里,有些是为了向控制器发送信息
EDIT1 有人指出 onClose 函数混淆了。虽然它确实解决了擦除问题,但它产生了另一个问题——我故意把它们放在限制日期范围内。这样 'to' 日期就不能早于 'from' 日期。也许还有另一种方法可以限制它?
您可以将日期格式更改为末尾没有 .
:
dateFormat: 'dd.mm.yy',
$("#from").val()
中的 return 值也是字符串,因此它没有值 属性。您可以改为检查字符串的长度:
if (dateFrom.length >= 8)
要为日期选择器设置日期,可以使用setDate
方法:
var today = new Date();
$('#to').datepicker("setDate", today);
$('#from').datepicker("setDate", new Date(today.setDate(today.getDate() - 7)));
我正在制作一个 .net MVC 应用程序,我在 fiddle 中重现了这个问题。
当我尝试更改我的日期时,日历会停留在那里,当我单击屏幕上的其他地方时,日历会消失,但另一个日期会被删除。
我只是希望日历在我 select 日期时消失,而不是删除其他日期。
$('#from').datepicker({
inline: true,
showOtherMonths: true,
dateFormat: 'dd.mm.yy.',
firstDay: 1,
changeMonth: true,
changeYear: true,
yearRange: "-50:+50",
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$('#to').datepicker({
inline: true,
showOtherMonths: true,
dateFormat: 'dd.mm.yy.',
firstDay: 1,
changeMonth: true,
changeYear: true,
yearRange: "-50:+50",
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
$(".dates").change(function () {
var dateFrom = $("#from").val();
//check that there is data before saving into sessionStorage
if (dateFrom.value.length >= 8)
sessionStorage.setItem("fromDate", this.value)
var dateTo = $("#to").val();
//check that there is data before saving into sessionStorage
if (dateTo.value.length >= 8)
sessionStorage.setItem("toDate", dateTo)
if (dateTo != null && dateFrom !=null) {
$.ajax({
url: '/MainPage/DateSessionCreate',
type: 'POST',
data: { "dateTo": dateTo, "dateFrom": dateFrom },
dataType: 'json'
});
}
else {
alert("one of the dates is null");
}
});
var today = new Date();
var curr_date = today.getDate();
var curr_month = today.getMonth();
curr_month++;
var curr_year = today.getFullYear();
var toDate = "";
//check if there's a to Date in sessionStorage
if (sessionStorage.getItem("toDate")) {
toDate = sessionStorage.getItem("toDate");
sessionStorage.setItem("toDate", toDate);
} else {
toDate = curr_date + "." + curr_month + "." + curr_year;
sessionStorage.setItem("toDate", toDate);
if (toDate != null) {
$.ajax({
url: '/MainPage/DateSessionCreate',
type: 'POST',
data: { "dateTo": toDate},
dataType: 'json'
});
}
}
document.getElementById("to").value = toDate;
today.setDate(today.getDate() - 7);
var new_date = today.getDate();
var new_month = today.getMonth();
new_month++;
var new_year = today.getFullYear();
var fromDate = "";
//check if there's a from Date in sessionStorage
if (sessionStorage.getItem("fromDate")) {
console.log("if");
fromDate = sessionStorage.getItem("fromDate");
sessionStorage.setItem("fromDate", fromDate);
} else {
console.log("else");
fromDate = new_date + "." + new_month + "." + new_year;
sessionStorage.setItem("fromDate", fromDate);
if (fromDate != null) {
$.ajax({
url: '/MainPage/DateSessionCreate',
type: 'POST',
data: { "dateFrom": fromDate },
dataType: 'json'
});
}
}
document.getElementById("from").value = fromDate;
我承认,我还是个新手,如果我知道如何让日期选择器在输入框中写入日期(但是当我使用 'defaultDate: -7' 它时,整个代码可能会缩短仅突出显示日历中的日期)。 所以这就是我创建日期格式并手动将其写入输入框的原因。 额外的代码是为了确保日期在页面重新加载后保留在那里,有些是为了向控制器发送信息
EDIT1 有人指出 onClose 函数混淆了。虽然它确实解决了擦除问题,但它产生了另一个问题——我故意把它们放在限制日期范围内。这样 'to' 日期就不能早于 'from' 日期。也许还有另一种方法可以限制它?
您可以将日期格式更改为末尾没有 .
:
dateFormat: 'dd.mm.yy',
$("#from").val()
中的 return 值也是字符串,因此它没有值 属性。您可以改为检查字符串的长度:
if (dateFrom.length >= 8)
要为日期选择器设置日期,可以使用setDate
方法:
var today = new Date();
$('#to').datepicker("setDate", today);
$('#from').datepicker("setDate", new Date(today.setDate(today.getDate() - 7)));