moment.jsで日付自動更新するプログラム作ったらIEにやられた

moment.jsで日付自動更新するプログラム作ったらIEにやられた

IE、、、、
本名 インターネットエクスプローラー

そう、製作者ならば誰もが悩まされるであろう悪魔のブラウザですね。
今回も私は魔の手に捕らえられ苦汁をなめさせられた次第でございます。

日付自動更新させようと思ったのよ

とあるクライアントから
「キャンペーンの期限を1週間ごとに自動更新するプログラムを作って欲しい」と依頼がありました。

作るのは初めてだったので、先人の知識を参考にしつつなんとか形にしようと思いました。
そうして色々調べていくと、moment.jsという日付操作に特化したライブラリにたどり着いたのです。

moment.jsの配布サイト

日付表示が恐ろしく楽なmoment.js

紐解いてみると何日後の日付を計算したり、曜日を指定したりと、かなり使い勝手のいいライブラリだということが分かりました。
日付表示はコレにまかせるとしてあとは自動更新するプログラムを作るだけ。
色々調べて以下のようなコードを作成してみました。


<script>
	var nMoment = moment();
	var gMoment = moment("2017-4-9").add(7,'days');

	function timecheck(){
		if(nMoment >= gMoment){
	document.getElementById ('timer').innerHTML = gMoment.add(7, 'days').format("YYYY年M月D日");
}
}
	setInterval("timecheck()",1000);
</script>

上のコードをmoment.jsの読み込み直下に設置したらOK。
あとはHTMLの中にtimerというIDの付いた空のdivタグを設置したら、その空タグの中に日付が出る仕様です。
※最初に起点の日付を出しときたい場合は、divタグの中にテキストで日付を書いとけば大丈夫です。

なかなか時間がかかりましたが、プレビューすると無事作動したので安心してブラウザごとの確認をすると、

悪魔の手が伸びたぜ

IEで見たら更新されてない、、、、
予想はしてましたよ。
なんかあるんじゃないかってね。

ここでGoogleさんに助けを乞うと出てきましたよエラーの原因。

日付の書き方でエラーになる

どういう了見か分かりませんがieだとハイフンつなぎの日付記法が通用しないらしい。
(参考サイトではIE8以下が対象って書いてあったけど自分が確認したIEは11でした)
という訳で以下のように書き換え。


<script>
	var nMoment = moment();
	var gMoment = moment("2017/4/9").add(7,'days');//日付のつなぎを-から/に変える

	function timecheck(){
		if(nMoment >= gMoment){
	document.getElementById ('timer').innerHTML = gMoment.add(7, 'days').format("YYYY年M月D日");
}
}
	setInterval("timecheck()",1000);
</script>

これで無事作動はしたのですが一つだけ懸念が。

IEのjavascriptハジき

プログラム設置が完了した後、ページを読み込む際にポップアップが出て「プログラムの読み込みを許可してください。」的な内容が表示されました。

調べてみるとieはjavascriptをブロックする(ブロック範囲は分かりません)
性質があるようで設定いかんで挙動が変わってしまうようなのです。
調べてみるとieはjavascriptをブロックする(ブロック範囲は分かりません)性質があるようで設定いかんで挙動が変わってしまうようなのです。

クライアントには説明の末、納得はしていただいたのですが、もし対応策があれば知りたいものですね。

しかしなんでそんな仕様にしてんだIE
悪魔の手が消えるのはいつになるんでしょうか、、、

こちらの記事も読まれています

ノンプログラマーがjavascript promiseを勉強してみた 後編... こんばんわ、taisonです。 さて、本日は前回の記事の続きであるjavascript promiseのコードを実際に書いていこうと思います。 Promiseコードを書いてみる 手始めにMDNのサンプルコードを紐解いてみます。 リンク先のページではコードを動かすスペースが記事の先頭にある...
ノンプログラマーがjavascript promiseを勉強してみた 前編... こんばんわ、taisonです。 先日pwa(プログレッシブウェブアプリ)を使ってみようと思って、pwaのチュートリアル記事を見て勉強していたんですが、自分自身プログラマーではない(webサイトとかwordpressに関わる言語を編集できるくらいの知識しかない)ので、色々とハマる部分がありました...
pwaとは?仕組みや使い方、ブログ運営に必要か考えてみる... こんばんはtaisonです! 今週末は天野嘉孝展が静岡で開催するということで、久しぶりに週末外出でございます。 今からワクワクが止まらない! ffでお馴染みの絵が間近で見られるかと思うと、テンションが上がってしまいます。 あ、ffってファイナルファンタジーの略です。って、皆知ってるか。 さて、...
使いどころが分かりにくいhtml要素の使いどころを考えてみる form編... このシリーズも残すところあと一つ。もうちょっと細切れに記事にしたら良かったと、今さらながらに後悔しております 笑 最後はform要素を掘り下げていきます。 前回分は前の記事でご確認下さい。 使いどころが分かりにくいhtml要素の使いどころを考えてみる 前編 使いどころが分かり...

htmlカテゴリの最新記事