Eyecatch jQuery

Javascript,jQuery

jQueryで日数計算をしてみる

2015/06/04

個人的なことですが、娘の百日膳を行うにあたって「誕生日からの100日目っていつなんだ?」というのを調べる機会があったのですが、せっかくなので勉強がてら自分でも組んでみようと思い、日数計算できるスクリプトを jQuery を利用して作ってみたので公開してみたいと思います。

From日付から本日までの経過日数を求める

「勉強がてら」ということで段階を踏んでみようと思い、まずは適当な日付(From)を基点とし、本日までの日にちを計算して表示するスクリプトを作ってみました。

画面イメージ

日数計算1画面

HTML部分

日付を入れるフォームとボタン、表示させるタグのみ。CSSは特に何も用意していません。
ページ遷移させないために、アクションは「/」を指定しています。

スクリプト

フォームの値を受け取りと結果の描画、ページ遷移をさせないという仕掛け部分にjQueryを使っています。
フォームに数字以外が入力された場合に何も表示させないように、isNaN関数あたりで、判定しています。

デモ

デモ:こちらから(別ウィンドウが開きます)

2点間の経過日数を計算してみる

ではちょっとレベルアップして、From日付、To日付どちらも任意の日付を指定できるようにしてみます。

画面イメージ

日数計算2画面

HTML部分

フォームが増えているだけで、先ほどの内容と特に変わりはありません。

スクリプト

先程は本日で固定だったところが任意の日付に変わっているだけです。

デモ

デモ:こちらから(別ウィンドウが開きます)

××日後の日付を求める

ということで、今回のメインエベント。
From日付から、任意の日数を入力し、それが何月何日かを表示させるスクリプトです。
フォームは相変わらずです。

画面イメージ

日数計算3画面

スクリプト

上記2つとは若干内容が異なりますが、基本的に同じです。
getMonth関数の返る値は0スタートなので、実際の月にするのに+1します。
曜日も関数で取得できるので、配列っぽいものを作成して表示してみました。

デモ

デモ:こちらから(別ウィンドウが開きます)

まとめ

これで誕生日から100日目も、2月3日の節分から88日目のお茶摘みの時期も分かるってものですね。

参考にしたサイト様

つくって覚えるjQuery入門

つくって覚えるjQuery入門

オフィス加減

価格 : 1,944円

     

-Javascript,jQuery
-, ,