jQuery の日付範囲セレクターの使用に関するチュートリアル

jQuery は、HTML と JavaScript 間の操作を簡素化するクロスブラウザー JavaScript ライブラリです。この記事では、jQuery の日付範囲セレクターの使用方法に関するチュートリアルを共有します。

準備:

この日付ピッカー プラグインを使用するには、jQuery 1.3.2 以降および Moment 2.2.0 以降のサポートが必要です。

<link rel="stylesheet" href="css/daterangepicker.css" /><script src="js/moment.min.js"></script><script src="js/jquery.daterangepicker.js"></script>

HTML 構造

入力ボックスである日付ピッカーを配置する必要がある場所に、次の HTML 構造を追加します。

<input type="text" id="datepicker" value="">

プラグインの呼び出し

jQuery Date Range Picker プラグインの呼び出しは、他の一般的な jQuery プラグインと同様に非常に簡単です:

$('#datepicker').dateRangePicker(option);

設定パラメーター

日付ピッカーのデフォルトの設定パラメーターは次のとおりです。 :

{
    format: 'YYYY-MM-DD',
    separator: ' to ',
    language: 'auto',
    startOfWeek: 'sunday',// or monday
    getValue: function()    {        return this.value;
    },
    setValue: function(s)    {        this.value = s;
    },
    startDate: false,
    endDate: false,
    minDays: 0,
    maxDays: 0,
    showShortcuts: true,
    time: {
        enabled: false
    },
    shortcuts:
    {        //'prev-days': [1,3,5,7],
        'next-days': [3,5,7],        //'prev' : ['week','month','year'],
        'next' : ['week','month','year']
    },
    customShortcuts : [],
    inline:false,
    container: 'body',
    alwaysOpen:false,
    singleDate:false,
    batchMode:false,
    beforeShowDay: [function],    dayDivAttrs: [],    dayTdAttrs: [],    applyBtnClass: ''
}

format (文字列): 瞬間の日付形式。 Moment のドキュメントを表示するには、ここをクリックしてください。

separator (文字列): 日付文字列間の区切り文字。

言語 (文字列): 事前定義された言語は「en」と「cn」です。このパラメータを使用して言語をカスタマイズできます。 「自動」に設定して、ブラウザーが言語自体を検出できるようにすることもできます。

startOfWeek (文字列): 「日曜日」または「月曜日」。

getValue (関数): この関数は、DOM 要素から日付範囲を取得するときに呼び出され、関数のコンテキストが datepicker DOM に設定されます。

setValue (関数): この関数は、DOM 要素に日付範囲を書き込むときに呼び出されます。

startDate (文字列または false): ユーザーが許可する最も古い日付を定義します。形式は format と同じです。

endDate (文字列または false): ユーザーが許可する最後の日付を定義します。形式は format と同じです。

minDays (数値): このパラメーターは、日付範囲の最小日数を定義します。0 に設定すると、最小日数に制限がないことを意味します。

maxDays (数値): このパラメーターは、日付範囲の最大日数を定義します。0 に設定すると、最大日数に制限がないことを意味します。

showShortcuts (ブール値): ショートカット領域を隠すか、非表示にします。

time (オブジェクト): このパラメーターが許可されている場合、時間範囲の選択が追加されます。

ショートカット (オブジェクト): ショートカット ボタンのボタンを定義します。

customShortcuts (配列): カスタムショートカットボタンを定義します。

inline (ブール値): オーバーレイ モードの代わりにインライン モードを使用して日付ピッカーをレンダリングします。 true に設定した場合、コンテナーのパラメーターを一緒に設定する必要があります。

container (文字列、css セレクター || DOM オブジェクト): レンダリングされる日付セレクター DOM 要素。

alwaysOpen (ブール値): インライン モードを使用している場合、ページの読み込み時に日付ピッカーをレンダリングすることができます。このパラメータを true に設定すると、「閉じる」ボタンが非表示になります。

singleDate (ブール値): 単一の日付を選択するには true に設定します。

batchMode (false / 'week' / 'month'): 自動バッチ処理モード。

イベント

この日付ピッカーが DOM 内の特定の日付範囲を選択すると、3 つのイベントがトリガーされます。

$('#datepicker')
.dateRangePicker()
.bind('datepicker-change',function(event,obj){    console.log(obj);    // obj will be something like this:
    // {
    //      date1: (Date object of the earlier date),
    //      date2: (Date object of the later date),
    //      value: "2013-06-05 to 2013-06-07"
    // }})
.bind('datepicker-apply',function(event,obj){    console.log(obj);
})
.bind('datepicker-close',function(){    console.log('close');
});

API

$(dom).dateRangePicker() を呼び出した後:

$(dom).data('dateRangePicker')
    .setDateRange('2013-11-20','2013-11-25');  //set date range, two date strings should follow the `format` in config object
    .clear();   // clear date range
    .close();   // close date range picker overlay
    .open();    // open date range picker overlay
    .destroy(); // destroy all date range picker related things

上記は、jQuery の日付範囲ピッカーの使用方法に関するチュートリアルです。

関連する推奨事項: 日付の形式が正しいかどうかを確認する

php

現在の日付と時刻を取得するJsメソッドとその他の操作

現在の日付と時刻を取得するJavaScriptメソッドとその他の操作の詳細な説明時間

以上がjQuery の日付範囲セレクターの使用に関するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。