jQueryでinput type="date" の入力判定

###前提・実現したいこと
jQueryで日付input type="date"を入力判定してクラスを付与。日付が入力されていなければクラスを除去したい。

###発生している問題・エラーメッセージ
当初valueの有無で判定しようとしましたが、HTML5のデフォルトのプレースホルダーによる> 年/月/日がvalueの中身と判定されてしまうため、この方法ではダメでした。

###該当のソースコード
これだとうまくいきません。

html
1<input type="date" value="" data-target="#hoge">

javascript
1$(function () {
2  var $date = $('input[type="date"][data-target^="#hoge"]')
3	$date.on('change', function () {
4            var flag = ($(this).val().length > 0) ? "selected" : "";
5            $($(this).attr('data-target')).attr("class", flag);
6        });
7});

###試したこと
これもダメ

javascript
1var $date = $('input[type="date"][data-target^="#hoge"]')
2	$date.on("change", function () {
3		var flag = false;
4	    $date.blur(function () {
5			flag = $(this).val().length > 0;
6			return !flag;
7		});
8		$($(this).attr('data-target')).toggleClass("selected", flag);
9	});

何卒よろしくお願いいたします。

行動規範の内容に同意します

回答4件

ベストアンサー

この方法ではダメでした。

動くサンプル：https://jsfiddle.net/h0k90bbq/

とりあえず Chromeでは動きました。（年月日を埋めるまでchangeイベントは起きませんが）

対応していないブラウザも結構あるので、どのブラウザでの挙動でしょうか。

【Can I use... Support tables for HTML5, CSS3, etc】
http://caniuse.com/#feat=input-datetime

投稿2016/10/03 10:01

kei344

総合スコア69400

hibikikudo

2016/10/03 10:16

ブラウザはchromeです。動くサンプルは問題なく表示されるのですが、私のコードでは下記の問題が出てしまいます。現状の問題をまとめると、・日付を選択するとクラス付与→出来てる・日付を削除するとクラス除去→出来てる・ページ表示時、何も選択していない状態で何故かクラス付与されている。

行動規範の内容に同意します

問題の原因は全く別のところで、長いコードの中でグローバル変数の汚染が起こっていました。kei344さんの記載の通り、このコードで問題なく動きます。回答いただいた皆様どうもありがとうございました。（また今後は、ケアレスミスをなくしていかなくてはと改めて思いました…）

投稿2016/10/03 10:22

hibikikudo

総合スコア238

valueの中身の判定の書き方はあってますが、クラスの設定方法が正しくないようです。
下記のコードで実現したいことができると思います。

html
1<html>
2<head>
3<title></title>
4</head>
5<style>
6.selected {
7	background-color:#ccc;
8}
9</style>
10<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
11<script>
12$(function () {
13	
14  var $date = $('input[type="date"][data-target^="#hoge"]');
15	$date.on('change', function () {
16		var flag = ($(this).val().length > 0) ? true : false;
17
18		if (flag) {
19			$($(this).data('target')).addClass('selected');
20		} else {
21			$($(this).data('target')).removeClass('selected');
22		}
23	});
24});
25
26</script>
27<body>
28	<input type="date" value="" data-target="#hoge">
29	<div id="hoge">aaaa</div>
30</body>
31</html>

投稿2016/10/03 09:53

編集2016/10/03 09:56

masayoshi0222

総合スコア162

こんにちは。

addClass , removeClass を使ってみるのはいかがでしょうか？

たとえば元のコードで、

javascript
1var flag = ($(this).val().length > 0) ? "selected" : "";
2$($(this).attr('data-target')).attr("class", flag);

としているところを、

javascript
1if ( $(this).val().length )
2  $($(this).attr('data-target')).addClass("selected");
3else
4  $($(this).attr('data-target')).removeClass("selected");