TempusJS-JavaScriptで日付を操作する

みなさんこんにちは!

私はしばしば統計を扱う必要があり、日付と結びついています。 さらに、同じ日付を異なる形式でページ上で使用できます(たとえば、車に便利で、人に便利です)。 皆さんのほとんどは、Dateオブジェクトを使用することから来るこの恐ろしいコードをよく知っていると思います。

たとえば、DD.MM.YYYYの形式で現在の日付を取得するには、次を実行する必要があります。

var d = new Date(), fd = d.getDate() + '.' + (d.getMonth()+1) + '.' + d.getFullYear();
      
      





そして、あなたはいつそのようなラインをたくさん手に入れますか? javascriptでは、それだけでなく開発を行うと、1か月はゼロから始まることを言うのは簡単ですか? または、バックエンドのほぼすべての場所のように、ミリ秒であり、秒ではないという事実ですか? 人気のあるMoment.jsライブラリを使用すると、いくつかの問題を解決できますが、動作は非常に遅くなります。

問題のライブラリはこれらの問題を解決します。

興味があれば、この短いレビューを読むことをお勧めします。







TempusJSは、主にDateオブジェクトの構文糖で構成されているため、非常に高速に動作します。 ライブラリ自体の構文は非常に単純です。 たとえば、前の例を書くには、次のようにします。

 var fd = tempus().format('%d.%m.%Y');
      
      





スピードについて。 ネタバレでは、TempusとMomentの比較、および日付をフォーマットするネイティブの方法を見ることができます(上記参照)。

ネイティブJS、MomentJS、TempusJSの比較
現在の日付を取得します


ネイティブJS x 2,175,575 ops /秒±0.75%(96回のサンプリング) 
モーメントx 284.864 ops /秒±0.85%(96回のサンプリング) 
 Tempus x 2,086,081 ops /秒±0.73%(97回のサンプリング)




書式設定


ネイティブJS x 1,637,517 ops /秒±0.61%(100回のサンプリング) 
モーメントx 8,808 ops /秒±1.07%(100回のサンプリング) 
 Tempus x 942.815 ops /秒±0.68%(94回のサンプリング) 




自動日付と解析


ネイティブJS x 11,204,316 ops /秒±0.81%(88回のサンプリング) 
モーメントx 38.511 ops /秒±1.41%(95回のサンプリング) 
 Tempus x 93.973 ops /秒±1.06%(85回のサンプリング) 


形式による日付の解析


モーメントx 46.293 ops /秒±0.63%(100回のサンプリング) 
 Tempus x 109.947 ops /秒±0.93%(99回のサンプリング) 


解析と検証


モーメントx 44.588 ops /秒±1.09%(90回のサンプリング) 
 Tempus x 103.439 ops /秒±0.90%(94回のサンプリング)


Google Chrome 30.0.1599.114のラップトップで結果が得られました。 他のブラウザでは結果は異なりますが、比率はほぼ同じままです。

bench.jsライブラリーがテストに使用されました。

他の機能のベンチマークについては、 こちらをご覧ください





したがって、このライブラリの利点として、次のように記述できます。





このライブラリのすべての機能は、 ドキュメントに記載されています 。 サイトにはテストもあります(エラーを見つけた場合は、こちらから報告してください



ここでは、一部の機能のみに焦点を当てます。



フォーマットと解析





したがって、まず、日付の書式設定の別の例です。 ここでも呼び出しのチェーンを使用します。 各値設定の最後に、TempusDateオブジェクトを取得します。これは、チェーンでさらに使用できます。 例:

 tempus(). //    calc({month: -1}). //      format('%d.%m.%Y'); //    
      
      





したがって、同じ日、時間、秒になりますが、1か月前です。 これは、先月のレポートを受信するのに役立ちます。



次の例は、日付の解析です。

 //   TempusDate  "2013-11-18" tempus('18.11.2013'); //   TempusDate  "2013-12-12" tempus('2013-12-12', '%Y-%m-%d'));
      
      





Tempusは、いくつかの既知の形式を自動的に検出できます。 また、特定の形式を指定することができ、解析がより速く行われます。 さらに、解析が失敗した場合に返される日付を設定できます。

 // .. "123"     '%d.%m.%Y',  //   ,   2013-01-01 tempus('123', '%d.%m.%Y', tempus([2013, 1, 1]));
      
      





デフォルトの形式のリストはこちらにあります。



既にフォーマットされた日付のフォーマットを変更します

 // '2013-11-05' tempus('05.11.2013').format('%Y-%m-%d'); //   // 'October, 12' tempus('2013-10-12 12:31:01', '%Y-%m-%d %H:%M:%S').format('%B, %d');
      
      







ローカライズを使用してフォーマットすることもできます。 デフォルトでは、ユーザー言語が選択されます(ブラウザーから取得します)。または、使用可能なTempus言語の中にユーザー言語が見つからない場合はデフォルト言語が選択されます。

 //   tempus.lang('ru'); //   format // ', 05' tempus(1383609600).format('%B, %d');
      
      





現時点では、ロシア語と英語の2つの言語しかないので、喜んでお手伝いします。



検証



日付の検証は次のとおりです。

 //  false tempus('32.08.2013', '%d.%m.%Y').valid(); //  true tempus('00:00 01.01.2012', '%H:%M %d.%m.%Y').valid();
      
      







エラーが発生した場合、値が偽ではない場所でエラーが発生したフィールドを確認できます。

 //  {"year":-5,"month":false,"day":false,"hours":false, // "minutes":false,"seconds":false,"milliseconds":false} tempus(). year(-5). //  =-5, ..  errors(); //    
      
      







期間



年数(年齢など)、月、日などを取得する必要がある場合があります。 2つの日付の間。 これを行うには、betweenメソッドを使用します。このメソッドは、2つの日付の差を検出し、目的の形式(「年」、「月」、「日」、「時間」、「分」、「秒」、「ミリ秒」)で返します。

以下は、2013年11月1日から2014年5月5日までの月数を取得する簡単な例です。

 //  6 tempus([2013, 11, 1]).between(tempus([2014, 5, 5]), 'month');
      
      





または、新年までの残り時間

 tempus().between(tempus([2014]), 'hours');
      
      





最後の例では、年のみを示していることがわかります。 配列またはオブジェクトで値を設定する場合、欠損値は

最小限でいっぱい。 最小値を持つ定数のリストは、ドキュメントで確認できます。



また、calc関数を使用して日付を変更できます。

 //  TempusDate   2012-01-01 tempus([2011, 5, 2]).calc({year: 1, month: -4, day: -1});
      
      







独自のフォーマット



月には独自の形式を使用し、1〜12の値をとることができます(01〜12ではありません)。

 //    tempus.registerFormat('%q', //  - %q function(date) { //    , ..     %q return date.month(); }, function(value) { //     var v = Number(value); return {month: (isNaN(v) ? undefined : v) }; }, 1, //  ,     2, //   'number' //  ); //  //  "01.1.2013"; tempus({year: 2013, month: 1, day: 1}).format('%d.%q.%Y'); //  {"year":2013,"month":2,"day":10,"hours":0,"minutes":0,"seconds":0}; tempus('10.2.2013', '%d.%q.%Y').get();
      
      





登録すると、いくつかのパラメーターが個別に設定され、正規表現を使用できることがわかります。 実際、元々そこにありましたが、それを放棄した後、速度は数十倍に増加しました。

何らかの形式を削除する必要がある場合は、unregisterFormatを使用します。

 tempus.unregisterFormat('%d'); //  "%d.01.2013", ..  %d   . tempus.format({year: 2013, month: 1, day: 1}, '%d.%m.%Y');
      
      







ゲッター/セッター



年()、月()、日()、時間()、分()、秒()、ミリ秒()、dayOfWeek()、utc()、タイムスタンプ()またはset関数を使用して値を取得/設定できます()。 例:

 tempus(). //    year(1900). //    ,   1900  leapYear(); // ,    ,    false tempus().year(); //        
      
      







日付生成



日付はさまざまな方法で生成できます。パラメーターの完全なリストはドキュメントにあります。 最小限の例を次に示します。

 // returns ["29.03.2013", "30.03.2013", "31.03.2013", "01.04.2013", "02.04.2013"]; tempus.generate({ dateFrom: '20130329', formatFrom: '%Y.%m.%d', dateTo: '20130402', period: {day: 1}, format: '%d.%m.%Y' });
      
      





これは、日付ごとにグラフを表示したり、バックエンド要求なしでクライアント上で表示形式を直接変更したりする場合に役立ちます。 日付は、配列または日付自体がキーとなるオブジェクトとして生成できます(これは、カレンダーを作成するときなど、イベントを任意の日付にバインドする必要がある場合に便利です)。 また、日付は日、週、月、時間、年ごとにグループ化できます。 これはカレンダーにも適用できます。



プラグイン



さて、最後-プラグイン。 ここで、工場を拡張してランダムな日付を生成します。 また、tempusDateクラスが必要です。これはtempus.classes()にあります。 プラグインの例を次に示します。

 (function (tempus) { var TempusDate = tempus.classes('TempusDate'); tempus.randomDate = function() { var date = new TempusDate(); date.year(Math.floor((Math.random()*(tempus.MAX_YEAR - tempus.MIN_YEAR)) + tempus.MIN_YEAR)). month(Math.floor((Math.random()*(tempus.MAX_MONTH - tempus.MIN_MONTH)) + tempus.MIN_MONTH)). day(Math.floor((Math.random()*(date.dayCount() - tempus.MIN_DAY)) + tempus.MIN_DAY)). hours(Math.floor((Math.random()*(tempus.MAX_HOURS - tempus.MIN_HOURS)) + tempus.MIN_HOURS)). minutes(Math.floor((Math.random()*(tempus.MAX_MINUTES - tempus.MIN_MINUTES)) + tempus.MIN_MINUTES)). seconds(Math.floor((Math.random()*(tempus.MAX_SECONDS - tempus.MIN_SECONDS)) + tempus.MIN_SECONDS)); return date; }; })(tempus); //        var someRandomDate = tempus.randomDate();
      
      





このようにして、jQuery + Tempus、Angular + Tempusなどを使用してウィジェットを簡単に作成できると思います。



ソースコード



githubからソースをダウンロードしてインストールできます:

https://github.com/crusat/tempus-js/releases

または、バウアー経由:

 $ bower install tempus
      
      





必要なファイルは、tempus.jsまたはtempus.min.jsの1つだけです。



このライブラリが役に立つことを願っています。また、ライブラリを正しい方向にさらに発展させるために、不足しているものを知ることも興味深いでしょう。 ご清聴ありがとうございました!

PS招待してくれてありがとう!



All Articles