web-dev-qa-db-ja.com

Dateオブジェクトで月のすべての日を検索しますか？

月または年のすべての日を持つ方法はありますか？日付ピッカーで特定の日を無効にするためにこれを探しています。バックオフィスに無効にするこれらの日を選択するページがあります。

だから私は月のすべての日を表示し、毎日の下に「アクティブまたは非アクティブ」ボタンを追加する必要があります。 Dateオブジェクトでこれらの日を見つける方法はありますか？私はこのリンクを例として見つけました： 月のすべての日を表示する しかし、私はそれを本当に理解していません。それに、Javaです。Javascriptで解決策を見つけようとしています。

ご協力ありがとうございました

javascriptjquerydatedatepickermonthcalendar
16
Paul

月のすべての日のリストを取得するには、月の最初の日にDateから始め、月が変わるまで日を増やします。

/**
 * @param {int} The month number, 0 based
 * @param {int} The year, not zero based, required to account for leap years
 * @return {Date[]} List with date objects for each day of the month
 */
function getDaysInMonth(month, year) {
  var date = new Date(year, month, 1);
  var days = [];
  while (date.getMonth() === month) {
    days.Push(new Date(date));
    date.setDate(date.getDate() + 1);
  }
  return days;
}

UTCバージョン

一部のコメントに応えて、ローカライズされたタイムゾーンを返す標準メソッドの代わりにUTCメソッドを呼び出す場合に備えて、UTCメソッドを使用するバージョンを作成しました。

これはうまくいかなかったというコメントの犯人だと思います。タイムゾーンを変換して違いを表示する場合を除いて、getUTCMonth/Day/Hoursでインスタンス化した場合はDate.UTCメソッドを呼び出し、逆の場合も同様です。

function getDaysInMonthUTC(month, year) {
  var date = new Date(Date.UTC(year, month, 1));
  var days = [];
  while (date.getUTCMonth() === month) {
    days.Push(new Date(date));
    date.setUTCDate(date.getUTCDate() + 1);
  }
  return days;
}

この回答を編集する

このスクリプトに問題があると思われる場合は、お気軽に：

  • まず以下の既存の単体テストをご覧ください
  • テストケースを書いて、問題が解決したことを証明します。
  • コードを修正して、既存のテストに合格するようにします。

ユニットテスト

/**
 * @param {int} The month number, 0 based
 * @param {int} The year, not zero based, required to account for leap years
 * @return {Date[]} List with date objects for each day of the month
 */
function getDaysInMonthUTC(month, year) {
  var date = new Date(Date.UTC(year, month, 1));
  var days = [];
  while (date.getUTCMonth() === month) {
    days.Push(new Date(date));
    date.setUTCDate(date.getUTCDate() + 1);
  }
  return days;
}

function getDaysInMonth(month, year) {
  var date = new Date(year, month, 1);
  var days = [];
  while (date.getMonth() === month) {
    days.Push(new Date(date));
    date.setDate(date.getDate() + 1);
  }
  return days;
}

const days2020 = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const days2021 = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

describe("getDaysInMonthUTC", function() {
  it("gets day counts for leap years", function() {
    const actual = days2020.map(
      (day, index) => getDaysInMonthUTC(index, 2020).length
    );
    expect(actual).toEqual(days2020);
  });

  it("gets day counts for non-leap years", function() {
    const actual = days2021.map(
      (day, index) => getDaysInMonthUTC(index, 2021).length
    );
    expect(actual).toEqual(days2021);
  });
});


describe("getDaysInMonth", function() {
  it("gets day counts for leap years", function() {
    const actual = days2020.map(
      (day, index) => getDaysInMonth(index, 2020).length
    );
    expect(actual).toEqual(days2020);
  });

  it("gets day counts for non-leap years", function() {
    const actual = days2021.map(
      (day, index) => getDaysInMonth(index, 2021).length
    );
    expect(actual).toEqual(days2021);
  });
});

// load jasmine htmlReporter
(function() {
  var env = jasmine.getEnv();
  env.addReporter(new jasmine.HtmlReporter());
  env.execute();
}());
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
<link href="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css" rel="stylesheet"/>
62
Juan Mendes

標準の無効日デートピッカーが機能するかどうかは説明からわかりませんので、直接質問にお答えします。

次のようにすることで、1か月の日の配列をかなり簡単に作成できます。

var numOfDays = new Date(2012, 10, 0).getDate(); //use 0 here and the actual month
var days = new Array();

//This will construct an array with all the elements represent the day of the week 
//(i.e. Oct 30th would be days[30-1] or days[29]) and the value would be the actual 
//day of the week (i.e. Tuesday which is representing by the number 2)
for(var i=0;i<=numOfDays;i++)
{
    days[i] = new Date(2012,9,i+1).getDay(); //use month-1 here            
}
//This will give you a number from 0 - 6 which represents (Sunday - Saturday)
alert(days[29]);

その一連の日を使用すると、ほぼ何でも好きなことができ、曜日も知ることができます。

5
Jeremy Morehouse

One linerすべての日を1か月のDateオブジェクトとして取得する

const getDaysInMonth = (month, year) => (new Array(31)).fill('').map((v,i)=>new Date(year,month-1,i+1)).filter(v=>v.getMonth()===month-1)
3
chickens

JQuery datepickerを使用してリクエストした機能を実装しました。

まず、無効にするバックオフィスで選択されたすべての日付を配列に追加します

// format yyyy-mm-dd
var disabledDates = [
    "2012-10-01",
    "2012-10-02",
    "2012-10-30",
    "2012-09-12"
];

次に、2つの関数で日付ピッカーを指定します

$("#datepicker").datepicker({

    // only enable date if dateEnabled returns [true]
    beforeShowDay: dateEnabled,

    // once a date has been selected call dateSelected
    onSelect: dateSelected
});

必要な機能の定義は次のとおりです

function dateEnabled( d ) {

    // if date found in array disable date
    if( disabledDates.indexOf( getDate( d ) ) > -1 ) {

        return [false];

    } else {

        return [true] ;

    }
}

配列の日付と比較するために日付を文字列に変換します

function getDate( d ) {
    var day,
        month,
        year;

    day = d.getDate( );
    month = d.getMonth( ) + 1; // add 1 as getMonth returns 0 - 11
    year = d.getFullYear( );

    if( month < 10 ) month = "0" + month;
    if( day < 10 ) day = "0" + day;
    return year + "-" + month + "-" + day;
}

日付が選択されたら、それを処理します

function dateSelected( d ) { 
   // do stuff with string representation of date                                          
}

これがフィドルです http://jsfiddle.net/KYzaR/7/

Array.indexOfがECMA-262標準への最近の追加であり、IE7およびIE8の場合はサポートされていないことを言及する価値があると思いました。次のMDNページは、これらのブラウザーにArray.indexOfを実装するコードを提供します https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf

1
Bruno

これは、その月の最終日を決定するために毎月実行されるループです。 Javascript Dateオブジェクトは、ゼロから始まる月にインデックスを付け、日をゼロに設定すると、前月の最終日に戻ります。 2月のうるう年最終日の決定に便利

Date( 2012, 12, 0)は2012年12月31日を返します

Date (2012,0,0)は2011年12月31日を返します

そして理解するすべての重要なものは2月です

Date ( 2012,3,0)今年はうるう年から2月29日を返します

var mos=['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']

for (i = 0; i < 12; i++) {
    var lastDate = new Date(2012, i+1, 0);
    $('body').append('Last day of ' + mos[i] + ' is ' + lastDate.getDate()+'<br>')
}

デモ： http://jsfiddle.net/5k8sn/1/

1
charlietfl

日付ピッカーで日付を無効にするには、ここで説明されている答えを使用できます。
https://stackoverflow.com/a/12061715/48082

複数の日付を選択するには（バックオフィスアプリなど）、このプラグインを使用できます。
http://multidatespickr.sourceforge.net/

0
Cheeso