2016-07-17 4 views
3

フォームの入力を受け取り、以前のフォームに基づいてフィールドの1つを変更するjQueryを作成しようとしています。アイデアは、顧客が選択したサービスを利用するには2日を追加し、週末を除外する5つの日付のリストを提供します。週末にJavascriptの日付が増減する

私は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

「問題はありません」は問題の適切な説明ではありません。テスト入力、期待される出力、実際の出力、およびエラーメッセージを提供できる必要があります。 'var dd = someDate.getDate();'が30回繰り返されます!!確かにあなたはそれよりもあなたのコードを最適化できますか? – RobG

答えて

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); 

別のオプションは、配列へのプッシュと同じ行に、右getFutureDays機能では、FormatDate呼び出しを置くことであろう。

days.push(formatDate(nextDate)); 

これにより、日付オブジェクト自体ではなく、日付の書式付き表現を含む文字列に配列が返されます。日付オブジェクトを別の場所で使用する必要がない限り、あなたのケースにとっては少し洗練されています。すべてをコードの基本構造に組み込むと、次のようになります。

var formatDate = (function (days, months) {return function(d) { 
 
\t var day = d.getDay(); 
 
    var dd = d.getDate(); 
 
\t 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機能にオプションoffset引数を追加することに注意してください。

+0

* setDate *は新しい時刻値を返すので、 'days.push(new Date(today.setDate(today.getDate()+ 1))')を使って配列を作成できます。 – RobG

+0

@RobG私はそれを行うことができましたが、日付/時刻関数を扱う際には、参照点を変更するのが好きです。それはスタック上の余分な日付変数ですが、私は読みやすさのためにそれが好きであり、将来的に最大限の日数を過ぎるなど、追加の基準を簡単に追加することができます。 – Mic

+0

これは素晴らしいです、ありがとうございます。 1つの最終的な質問tho、私は完全に私はjQueryを使用してフォームに追加することができます必要な形式で日付の配列を返すには、その関数を使用する方法はわかりません。 –

関連する問題