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

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

小云云

リリース： 2017-11-25 09:24:12

オリジナル

2661 人が閲覧しました

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

準備:

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

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

ログイン後にコピー

HTML 構造

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

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

ログイン後にコピー

プラグインの呼び出し

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

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

ログイン後にコピー

設定パラメーター

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

{
    format: &#39;YYYY-MM-DD&#39;,
    separator: &#39; to &#39;,
    language: &#39;auto&#39;,
    startOfWeek: &#39;sunday&#39;,// 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:
    {        //&#39;prev-days&#39;: [1,3,5,7],
        &#39;next-days&#39;: [3,5,7],        //&#39;prev&#39; : [&#39;week&#39;,&#39;month&#39;,&#39;year&#39;],
        &#39;next&#39; : [&#39;week&#39;,&#39;month&#39;,&#39;year&#39;]
    },
    customShortcuts : [],
    inline:false,
    container: &#39;body&#39;,
    alwaysOpen:false,
    singleDate:false,
    batchMode:false,
    beforeShowDay: [function],    dayDivAttrs: [],    dayTdAttrs: [],    applyBtnClass: &#39;&#39;
}

ログイン後にコピー

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 つのイベントがトリガーされます。

$(&#39;#datepicker&#39;)
.dateRangePicker()
.bind(&#39;datepicker-change&#39;,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(&#39;datepicker-apply&#39;,function(event,obj){    console.log(obj);
})
.bind(&#39;datepicker-close&#39;,function(){    console.log(&#39;close&#39;);
});

ログイン後にコピー

API

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

$(dom).data(&#39;dateRangePicker&#39;)
    .setDateRange(&#39;2013-11-20&#39;,&#39;2013-11-25&#39;);  //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