web-dev-qa-db-ja.com

アイコンをクリックしてHTML5日付ピッカーを開く

HTML5の日付ピッカーがあります。
日付ピッカーテキストボックスをクリックすると開きます。

トド：

  • イベントをアイコンに変更する必要がありますが、これを実現する方法がわかりません。
    カレンダーアイコンをクリックすると、日付ピッカーを開く必要があります。

ここに私のdatepickerのHTMLコードがあります：

<img src="date.png" alt="Date Picker" id="datepickericon" />
<input name="calendarselect{ContactID}" class="timeselect" type="date" id="calendar">
<script>
document.getElementById("datepickericon").onclick = function(e){
console.log('inside click');
    document.getElementById("calendar").style.visibility="visible";
    // document.getElementById("calendar").focus();
    // You could write code to toggle this
}

enter image description here

アイコンをクリックすると、次の画像のような開いているカレンダービューを取得する必要があります enter image description here

javascriptextjssencha-touchhtml5-canvas
22
Dibish

HTML5 <input> with type='date'は、 少数のブラウザ でのみ機能します。また、プログラマーとしては、その外観やその他の側面（表示や非表示など）を制御することはできません（ 入力タイプの日付に関するクイックFAQ ）

したがって、これを行う必要がある場合、HTML5 <input type='date'>タグはオプションではありません。 jQuery UI や Bootstrap 日付ピッカーなど、JavaScriptでビルドしたものを使用する必要があります。

古い答え

アイコンのクリックにイベントを添付する必要があります。 HTMLが次のようになっていると仮定します。

<img src="date.png" alt="Date Picker" id="datepickericon" />
<input name="calendarselect{ContactID}" class="timeselect" type="date" id="calendar">

アイコンのonclickイベントを確認し、カレンダーを表示または非表示にする必要があります。

document.getElementById("datepickericon").onclick = function(e){
    document.getElementById("calendar").focus();
    // You could write code to toggle this
}
8
prtksxna

日付入力フィールド内にカレンダーアイコンを表示してもかまわない場合は、クロスブラウザの代替手段として、三角形のカレンダーピッカーインジケーターの上にカレンダーアイコンを配置し、カレンダーアイコンをpointer-events: noneこれにより、すべてのクリックイベントがその下の三角形のカレンダーピッカーインジケーターに渡されます。カレンダーピッカーインジケーターの位置がさまざまなブラウザーでどれだけ一貫しているかはわかりませんが、かなり似ているはずです。以下の例を参照してください。

.sd-container {
  position: relative;
  float: left;
}

.sd {
  border: 1px solid #1cbaa5;
  padding: 5px 10px;
  height: 30px;
  width: 150px;
}

.open-button {
  position: absolute;
  top: 10px;
  right: 3px;
  width: 25px;
  height: 25px;
  background: #fff;
  pointer-events: none;
}

.open-button button {
  border: none;
  background: transparent;
}
<form>
  <div class="sd-container">
    <input class="sd" type="date" name="selected_date" />
    <span class="open-button">
      <button type="button">????</button>
    </span>
  </div>
</form>

また、日付入力フィールドの外観を変更することも可能です（ただし、カレンダーの日付ピッカーは変更できません）。テキスト入力フィールドと同様のスタイルです。さらに、ここで説明されているWebKit CSSプロパティがいくつかあります HTML5日付ピッカーのスタイルオプションはありますか？

8
Simon Watson

私はこれに答えています、新しい誰かがそれが役立つと思うことを望んでいます：私のhtmlは次のようでした：

<div class='child_dob input-group <?php echo $user->parent_type>2 ?'hidden':''?>'>
  <input type='date' class='form-control hidden' name='dob[]' value='<?php echo $dob?>'>
  <div class='form-control datedisplay'>
     <?php echo date('m/d/Y',strtotime($dob))?>
  </div>
  <input type='hidden' value='<?php echo $id?>' name='id[]'>
  <div class='input-group-addon'>
     <span class='cursor glyphicon glyphicon-remove remove_child_dob'></span>
  </div>
</div>

$(function()
{
 $(document).on('click','.datedisplay',function()
 {
    $(this).siblings('[type="date"]').removeClass('hidden').focus().click();
    $(this).remove();
 });
});

chromeシミュレーターとAndroidデバイスでテストしました。完全に正常に動作します。ただし、iOSデバイスでテストする必要があります。

3
Sayed

アイコンの上に日付の要素を貼り付け、不透明度：0を入力できます。そして、アイコンが日付までの大きさのフォントサイズを指定すると、それが機能します

2
Yishai Stern

ユーザーが対応するlabelタグをクリックした場合、すべてではないにしても、ほとんどのブラウザーはフォームコントロールにフォーカスします。考えられる解決策の1つは、次のようにアイコンをlabelタグに入れることです。

<label for="dateinput">Birthday:</label>
<input type="date" id="dateinput">
<label for="dateinput">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA80lEQVRIie2SzQqCQBDHe5/w1kXt1qUFo6NP1Melp8geIvxgyzbJoIJ6gQ1SA6V6AJ1OG0SsaQkWOPCHPfxmf8wwtVoZZcyXKx0TJwe/0TFZZxaYtgOm7UDhvD8aDD0VxazBV5qZwnhPbcfeqNfnCk4qSiiSHg0USW8/p0h84k8qSvgTKE04tBpgTjSwNA0OrcZbAePN8fjBpwookmAhC0BkAY5IzDDBK58qKCJcARbrUES4gvB6gyJSvoCd3Sfv3xBUK6pW9LngHEZfrycII77A3e1vwReSIIzA3e4vXIFuka4xW57ZyHljYBJMsd3hCv6y7o9Nby8uLYYvAAAAAElFTkSuQmCC" style="vertical-align: middle;" alt="Calendar" title="Set focus on birthday field">
</label>

ただし、次の点に注意してください。

  • labelタグは、フォームコントロールの説明をフォームコントロール自体に接続するためにも使用されるため、支援技術（スクリーンリーダーなど）はユーザーが選択したフォームコントロールと通信できます。したがって、アイコンを表示するためだけにlabelタグを誤用することはおそらく推奨されません。したがって、同じフォームコントロールにリンクされている2つのlabelタグを使用します。1つはそれを記述し、もう1つはカレンダーアイコン用です。
  • このソリューションでは、ユーザーがクリックしたかのように日付フィールドにフォーカスします。特に、デスクトップ（現時点ではバージョン66）のChromeでは、ユーザーがカレンダーを展開するために少し下向き矢印をクリックする必要があります。Firefox、EdgeおよびChrome on Androidでもうまくいくようです
1
Tekki