javascript - ネイティブの日付ピッカー - JavaScript を介してそれをトリガーする方法はありますか

Question

JavaScript を使用してブラウザでネイティブの日付ピッカーをトリガーする方法はありますか。

使いたい

<input type="date" />

入力フィールドにフォーカスがない場合は独自のスタイルで表示し、ネイティブの日付ピッカー カレンダー/スクロール ホイールを使用します (フォーカスがある場合)。

それはできないと確信していますが、アイデアや提案は素敵です

Answer 1

昔は、入力の下に派手な画像がありました。ユーザーがファイル入力をクリックしたり、タブで入力したりすると、それはまだ魅力のように機能しました。

あなたはこれを試すことができますが、私は何も保証しません.

 type="text/css">
  .date_picker {
    position: relative;
    background:  grey /* your fancy background andstyle here */;
    width: 180px;
    height: 2em;
    display: inline-block;
  }
  .date_picker input[type="date"] {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;    
    opacity: 0;
  }

</style>
  <script >
    document.addEventListener('change', function(event){
      console.log(event);
      if (event.target.nodeName.toLowerCase() == 'input' && event.target.type == 'date') {
        var datePicker = event.target;
        var span = datePicker.previousSibling; 
        while (span.nodeName.toLowerCase() != 'span') {
          span = span.previousSibling;
        } 
        span.innerHTML = datePicker.value;
      }
    }, false);
  </script>   
<label class="date_picker">
    <span class="chosen_date">2013-03-04</span>
    <input type="date" value="2013-03-04"/>  
</label>

クロムで動作します。他の場所ではテストできず、時間もありません。

主な問題 - フォーカスが日付フィールドにあるときにカーソルが表示されない。2 つ目 - ボックスの右側に画像が表示されるため、ユーザーはどこをクリックしてカレンダーをドロップダウンすればよいかがわかるため、スタイリングは自分で行う必要があります。