モバイルの入力の日付のみ

私は自分のプロジェクトに時間と日付のピッカーを作ろうとしています。私は時間と日付のピッカーにしたい1つのプラグインを使用しますが、それはデスクトップブラウザのためだけであり、モバイルでブラウズするときには、モバイルネイティブの時間/日付ピッカーを起動します。私はそのタイプのプラグインを探していたが、私はまだそれを取得していない。あなたが知っているなら、私に知らせてください。私は画面のサイズに応じて何かを追加/削除することを試みた。クラスを追加したり削除したりしますが、起動しなかったプラグインは削除します。モバイルの入力の日付のみ

怒鳴るが、私のコード

https://codepen.io/pagol/pen/MOzVMP

HTML

<div class="datepicker test"> 
<input type="date" class="change" id="myinput"> 
</div>

JSあなたが0のカスタムビルドを使用することができ

jQuery(document).ready(function(){ 

    TinyDatePicker('.test input'); 

}); 

$(function(){ 

$(window).bind("resize",function(){ 
    console.log($(this).width()) 
    if($(this).width() <500){ 
    $('.datepicker').removeClass('test').addClass('red') 
    } 
    else{ 
    $('div').removeClass('red').addClass('test') 
    } 
}) 
})

出典

2017-12-06 pagol

クラスを追加した後、TinyDatePicker（私が知りません）を起動する必要があります。ここでは、TinyDatePickerを付けないでクラスを追加するだけです：

var dp = null; 
attachDatePicker = function(){ 
    if(dp === null || typeof dp === 'undefined') 
     dp = TinyDatePicker('.test input'); 
} 

$(function(){ 
    $(window).bind("resize",function(){ 
     console.log($(this).width()) 
     if($(this).width() <500){ 
      $('.datepicker').removeClass('test').addClass('red'); 
      //you should alsa remove TinyDatePicker here 
      if(dp !== null){ 
       dp.destroy(); 
       dp = null; 
      } 
     } 
     else{ 
      $('div').removeClass('red').addClass('test'); 
      attachDatePicker(); 
     } 
    }); 
}); 

jQuery(document).ready(function(){ 
    attachDatePicker(); 
});

出典

2017-12-06 08:41:56 Oulalahakabu

ありがとう...これはほとんど仕事です。実際にTinyDatePickerやその他のピッカーを計測するわけではありません。どこでもライブで試したい場合は、他のピッカーを使用することができます。私はデスクトップのような別のアイデアを持っています。私たちは入力タイプの日付をテキストとモバイルのビュータイプに変更することができます。あなたはどう思いますか？ – pagol

テストしていませんが、コードを更新しました（ここでdocを素早く読んだ後、https://github.com/chrisdavies/tiny-date-picker/blob/master/docs/tiny-date-picker.md）。この。 – Oulalahakabu

クールで超クールです。まだ動作していないものがあります。モバイルプラグインでロードされているのはまだ静止していますが、画面サイズがデスクトップになるとモバイルサイズにうまくいけばうまく動作します。私は実際の携帯電話でテストするつもりです。私は、携帯電話での読み込み時にプラグインも起動しないときのような何かをする必要があると思います。現在デフォルトで起動されています – pagol

です：

（入力フィールドのみを含める必要があります）

if (!Modernizr.inputtypes.date) { 
    jQuery(document).ready(function(){  
    TinyDatePicker('.test input');  
    }); 
}

ブラウザは入力type="date"をネイティブにサポートしている場合、これはチェックします。そうでなければ、あなたのカスタム日付ピッカーを使用します。

出典

2017-12-06 08:40:06 Obsidian

おかげで...実際に私が意図的にモバイルでネイティブ日付と時刻のピッカーを解雇したいです。なぜなら、モバイルユーザは、選択のために本来の日時の写真を使用するからである。だから私のアイデアは、モバイルユーザーのためのネイティブの日付/時間のピッカーのための彼らの施設を与えるとデスクトップ/ラップトップのユーザーのための任意のプラグインを使用して – pagol

うれしい私は助けることができます。 – Obsidian

最後に私がやりたいことを修正することができます。それでモバイルにロードするとネイティブのピッカーが起動し、デスクトップ/ラップトップのブラウザの場合は日付ピッカーjsを起動します。

ライブコードここcodepen.io/pagol/pen/MOzVMP

出典

2017-12-07 10:35:08 pagol

モバイルの入力の日付のみ

答えて

関連する問題