.setHours() を使用して日付付きのカスタマイズされた時間を取得する 📅

2578 ワード
react webdev javascript webpack テキストリンク
こんにちは👋
この記事では、React で日付を選択したときにカスタマイズされた時間を取得する方法について説明します.
通常、開発者が日付フィールドを使用して日付範囲を選択するように求められる場合、JavaScript は

new Date()


しかし、このアプローチを使用することの最大の欠点の 1 つは、結果の日付にも時間タグが含まれることです.これは、JavaScript では日付と時刻が常にシステムから一緒に取得され、どの側面を使用するか (日付か、または時間.結果は

Sun Jun 20 2021 10:51:18 GMT+0500 (Pakistan Standard Time)


ここで、私の場合のように、特定の時間範囲内でいくつかのデータを取得する必要があり、ユーザーが 1 日からレコードを取得したいとします.簡単に理解すれば、ユーザーは開始日と終了日を同じにすることを選択します.さて、JavaScript は何をしますか.開始日は、たとえば、今日 2021 年 6 月 20 日とします.次のようになります.

Sun Jun 20 2021 00:00:00 GMT+0500 (Pakistan Standard Time)


そして、終了日はいつになると思いますか?同じ.

Sun Jun 20 2021 00:00:00 GMT+0500 (Pakistan Standard Time)


つまり、ユーザーのクエリは、同じ日の真夜中の 12 時から同じ日の真夜中の 12 時までのレコードをチェックすることです.出力にゼロ (0) レコードが表示されます.
この問題を解決するには、JavaScript の .setHours() 関数を使用できます.

利点


  • その日の希望の時間を設定してください
  • システム指定時間の選択からの脱出
  • より多くの利点があります

    • 解決



    開始日を定義するときにこの関数を使用しても意味がありません.右?違う!安全対策のため、開始日と終了日の両方で使用する必要があります.ただし、パラメーターが異なります.

    構文



    .setHours は Date over Date と共に使用され、より良い方法で結果を畳み込みます.

    new Date(new Date().setHours(HH,MM,SS,mm))


    開始日に使用するには、

    new Date(new Date().setHours(00,00,00,0))


    終了日は

    new Date(new Date().setHours(23,59,59,0))


    この手法を使用すると、ユーザーが 1 日からレコードを選択できるようにすることが簡単にできます. 😉
    新しいflutterプロジェクトでpackageピットレコードが取得されません
    [Brute Force]Boj 15652:NおよびM(4)