我正在尝试创建一个jQuery，它接受表单的输入并根据前一个表单更改其中一个字段。我们的想法是，接受客户选择的服务，向其添加两天，然后向他们提供五个日期的列表供您选择，但不包括周末。
我不是一个JS或jQuery的人，虽然我有一些功能很强大的东西，但它并没有像我期望的那样工作。
Here's the fiddle我正在努力。
$("#ninja_forms_field_74").change(function() {
var service = $("#ninja_forms_field_74").val();
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
if (service == "2Days") {
var someDate = new Date();
var numberOfDaysToAdd = 2;
someDate.setDate(someDate.getDate() + numberOfDaysToAdd);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
if (day == "Saturday"){
someDate.setDate(someDate.getDate() + 2);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
if (day == "Sunday"){
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
var target = day + " " + dd + " " + months[mm];
someDate.setDate(someDate.getDate() + numberOfDaysToAdd);
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
if (day == "Saturday"){
someDate.setDate(someDate.getDate() + 2);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
if (day == "Sunday"){
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
var target2 = day + " " + dd + " " + months[mm];someDate.setDate(someDate.getDate());
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
if (day == "Saturday"){
someDate.setDate(someDate.getDate() + 2);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
if (day == "Sunday"){
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
var target3 = day + " " + dd + " " + months[mm];someDate.setDate(someDate.getDate());
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
if (day == "Saturday"){
someDate.setDate(someDate.getDate() + 2);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
if (day == "Sunday"){
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
var target4 = day + " " + dd + " " + months[mm];someDate.setDate(someDate.getDate());
someDate.setDate(someDate.getDate() +1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
if (day == "Saturday"){
someDate.setDate(someDate.getDate() + 2);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
if (day == "Sunday"){
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
var target5 = day + " " + dd + " " + months[mm];someDate.setDate(someDate.getDate());
$("#ninja_forms_field_84").children().remove().end().append($("<option></option>").val(target).html(target));
$("#ninja_forms_field_84").append($("<option></option>").val(target2).html(target2));
$("#ninja_forms_field_84").append($("<option></option>").val(target3).html(target3));
$("#ninja_forms_field_84").append($("<option></option>").val(target4).html(target4));
$("#ninja_forms_field_84").append($("<option></option>").val(target5).html(target5));
}
if (service == "Fax"){
var someDate = new Date();
var numberOfDaysToAdd = 2;
someDate.setDate(someDate.getDate() + numberOfDaysToAdd);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
if (day == "Saturday"){
// var numberOfDaysToAdd = numberOfDaysToAdd + 2;
someDate.setDate(someDate.getDate() + 2);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
if (day == "Sunday"){
// var numberOfDaysToAdd = numberOfDaysToAdd + 1;
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
var target = day + " " + dd + " " + months[mm];someDate.setDate(someDate.getDate() + numberOfDaysToAdd);
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
if (day == "Saturday"){
// var numberOfDaysToAdd = numberOfDaysToAdd + 2;
someDate.setDate(someDate.getDate() + 2);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
if (day == "Sunday"){
// var numberOfDaysToAdd = numberOfDaysToAdd + 1;
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
var target2 = day + " " + dd + " " + months[mm];someDate.setDate(someDate.getDate());
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
if (day == "Saturday"){
// var numberOfDaysToAdd = numberOfDaysToAdd + 2;
someDate.setDate(someDate.getDate() + 2);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
if (day == "Sunday"){
// var numberOfDaysToAdd = numberOfDaysToAdd + 1;
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
var target3 = day + " " + dd + " " + months[mm];someDate.setDate(someDate.getDate());
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
if (day == "Saturday"){
// var numberOfDaysToAdd = numberOfDaysToAdd + 2;
someDate.setDate(someDate.getDate() + 2);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
if (day == "Sunday"){
// var numberOfDaysToAdd = numberOfDaysToAdd + 1;
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
var target4 = day + " " + dd + " " + months[mm];someDate.setDate(someDate.getDate());
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
if (day == "Saturday"){
// var numberOfDaysToAdd = numberOfDaysToAdd + 2;
someDate.setDate(someDate.getDate() + 2);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
if (day == "Sunday"){
// var numberOfDaysToAdd = numberOfDaysToAdd + 1;
someDate.setDate(someDate.getDate() + 1);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var day = days[ someDate.getDay() ];
}
var target5 = day + " " + dd + " " + months[mm];someDate.setDate(someDate.getDate());
$("#ninja_forms_field_84").children().remove().end().append($("<option></option>").val(target).html(target));
$("#ninja_forms_field_84").append($("<option></option>").val(target2).html(target2));
$("#ninja_forms_field_84").append($("<option></option>").val(target3).html(target3));
$("#ninja_forms_field_84").append($("<option></option>").val(target4).html(target4));
$("#ninja_forms_field_84").append($("<option></option>").val(target5).html(target5));
}
if (service == "SameDay"){
var d = new Date();
var day = d.getDay();
var dd = d.getDate();
var mm = d.getMonth();
var target = days[day] + " " + dd + " " + months[mm];
$("#ninja_forms_field_84").children().remove().end().append($("<option></option>").val(target).html(target));
}
});
答案 0 :(得分：0)
我将一个函数放在一起，该函数返回指定数量的未来日期的日期对象数组，不包括周末。我目前有14天生成，所以你可以看到月份滚动。尝试使用它来获取日期列表。
function getFutureDays(count) {
var days = [];
var today = new Date();
var offset = 1; //start with tomorrow
//while loop continues adding non-weekend dates until the array length equals the supplied count.
while(days.length < count) {
var nextDate = new Date();
nextDate.setDate(today.getDate() + offset);
//weekend check below - only add to the array if it's not a 0 (Sun) or 6 (Sat)
if(nextDate.getDay() !== 0 && nextDate.getDay() !== 6) {
days.push(nextDate);
}
offset++; //increase the offset to move onto the next day.
}
return days;
}
document.write(getFutureDays(14).join('<br />'));
处理格式化，我建议将其作为一个单独的功能。从您已经拥有的代码片段开始：
var d = new Date();
var day = d.getDay();
var dd = d.getDate();
var mm = d.getMonth();
var target = days[day] + " " + dd + " " + months[mm];
这基本上可以做你想要的。每次调用函数时，都会声明当前正在声明的月份和日期字符串数组。这是一种风格选择，但我个人喜欢把它们放在一个封闭的基础上，建立在你喜欢的东西上：
var formatDate = (function (days, months) {return
function(d) {
//var d = new Date(); this becomes the argument
var day = d.getDay();
var dd = d.getDate();
var mm = d.getMonth();
return days[day] + " " + dd + " " + months[mm]; //this can return instead of being a variable
}
})(
['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
);
这使它们不在全局命名空间中，但您不必一直重新创建它们。此时值得指出其他几个选项。您可以查看一些内置的函数，例如Date.toLocaleDateString，而不是编写自己的格式函数。你可以在这里看到它们：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date
Moment.js是一个完善的库，也有一些格式化方法。 http://momentjs.com/
现在，如果你想获得一个代表日期的字符串数组，只要你定位合理的现代浏览器，就有一个选项是从getFutureDays返回的数组并使用Array.map函数生成一个数组字符串。
var formattedDates = getFutureDays(5).map(formatDate);
另一种选择是将formatDate调用放在getFutureDays函数中，与推送到数组的行相同。
days.push(formatDate(nextDate));
这会使从中返回的数组变为包含日期格式化表示形式的字符串，而不是日期对象本身。只要您不需要在其他地方使用日期对象，它对您的情况来说就会更清洁一些。将它全部纳入代码的基本结构，它看起来像这样。
var formatDate = (function (days, months) {return function(d) {
var day = d.getDay();
var dd = d.getDate();
var mm = d.getMonth();
return days[day] + " " + dd + " " + months[mm];
//return target;
}})(['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']);
function getFutureDays(count, offset) {
var days = [];
var today = new Date();
var offset = offset ? offset : 1; //start with tomorrow unless something else is supplied
//while loop continues adding non-weekend dates until the array length equals the supplied count.
while(days.length < count) {
var nextDate = new Date();
nextDate.setDate(today.getDate() + offset);
//weekend check below - only add to the array if it's not a 0 (Sun) or 6 (Sat)
if(nextDate.getDay() !== 0 && nextDate.getDay() !== 6) {
days.push(formatDate(nextDate));
}
offset++; //increase the offset to move onto the next day.
}
return days;
}
$("#ninja_forms_field_74").change(function() {
var service = $("#ninja_forms_field_74").val();
var daysToAdd = [];
if (service === "2Days") {
daysToAdd = getFutureDays(5, 2);
} else if (service === "Fax") {
daysToAdd = getFutureDays(5, 1);
} else {
daysToAdd.push(formatDate(new Date()));
}
var daysField = $("#ninja_forms_field_84");
daysField.children().remove().end();
for(var i = 0; i < daysToAdd.length; i++) {
daysField.append($("<option></option>").val(daysToAdd[i]).html(daysToAdd[i]));
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Service Type
</p>
<select name="ninja_forms_field_74" id="ninja_forms_field_74">
<option value="">-- select an option --</option>
<option value="SameDay">Same Day</option>
<option value="Fax">Fax to Pharmacy</option>
<option value="2Days">Two business days</option>
</select>
<p>Day to collect</p>
<select name="ninja_forms_field_84" id="ninja_forms_field_84">
请注意，我还在getFutureDays函数中添加了一个选项偏移量参数，指定了从此开始的天数。