<input type="date"/>
をアンカー内に入れたいのは、リスト項目をクリック可能にしたいからです。考えてみましょう:Chrome:アンカーの中で入力日付を使用すると狂気が発生する
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
<body>
<ul class="container list-group">
<a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a>
<a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a>
<a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a>
<a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a>
<a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a>
</ul>
</body>
<script>
$('input').click(function(ev) {
//return false;
//ev.stopPropagation();
ev.preventDefault();
});
</script>
</html>
https://jsfiddle.net/qvatd8f1/
を私の問題は、アンカーに伝播するクリックを避けるために、つまり、私はイベントの伝播を停止する必要があります。しかし、少なくとも自分のChromium 51では、カレンダー(フィールドの右側)を示す入力日付の矢印が機能しなくなります。
(コードは、ブートストラップを使用しているが、それは関係ありません。問題は簡単にそれなしに複製することができます。)
提案を? :)
ところで、私はちょうど<input type="date"/>
がクロム固有であることを最近気づいた。私たちはこの製品でこれを変更したいと考えています。しかし、現時点では、クライアントを表示するのはプロトタイプだけなので、これを回避する簡単な方法があれば、それは素晴らしいことです。あなたはデフォルトの動作を停止するので、私はクロームが日付セレクタを開いていないと思います
<li data-href="https://google.com">...</li>
$(".container li").click(function() {
window.location.href = $(this).data("href")
})
::) – Moritur