92

日付ピッカーが Chrome 20 に搭載されました。無効にする属性はありますか? システム全体で jQuery UI の datepicker を使用しており、これはクロスブラウザーであるため、Chrome ネイティブの datepicker を無効にしたいと考えています。タグ属性はありますか？

4

13 に答える 13

145

矢印を非表示にするには：

input::-webkit-calendar-picker-indicator{
    display: none;
}

プロンプトを非表示にするには：

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}
于 2012-09-04T16:45:45.123 に答える
55

誤用し<input type="date" />た場合は、おそらく次を使用できます。

$('input[type="date"]').attr('type','text');

それらが読み込まれた後、それらをテキスト入力に変換します。最初にカスタムの日付ピッカーをアタッチする必要があります。

$('input[type="date"]').datepicker().attr('type','text');

または、クラスを与えることもできます。

$('input[type="date"]').addClass('date').attr('type','text');
于 2012-12-07T15:42:58.290 に答える
16

あなたが使用することができます：

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
于 2012-07-13T12:17:21.300 に答える
7

Modernizr ( http://modernizr.com/ ) を使用すると、その機能を確認できます。次に、それを返すブール値に結び付けることができます。

// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) { 
    $("#opp-date").datepicker();
}
于 2013-04-24T01:55:42.683 に答える
2

上記のコードは、入力要素の値を設定せず、変更イベントも発生させません。以下のコードは、Chrome と Firefox で動作します (他のブラウザーではテストされていません)。

$('input[type="date"]').click(function(e){
     e.preventDefault();
}).datepicker({
    onSelect: function(dateText){
        var d = new Date(dateText),
        dv = d.getFullYear().toString().pad(4)+'-'+(d.getMonth()+1).toString().pad(2)+'-'+d.getDate().toString().pad(2);
        $(this).val(dv).trigger('change');
    }
});

pad は、文字列にゼロを埋め込むシンプルなカスタム String メソッドです (必須)

于 2012-07-24T19:08:57.193 に答える
1

私はRobertcに同意します。最善の方法は、type = dateを使用しないことですが、私のJQueryMobileDatepickerプラグインはそれを使用します。だから私はいくつかの変更を加える必要があります：

私はjquery.ui.datepicker.mobile.jsを使用しており、次の変更を行いました。

から（51行目）

$( "input[type='date'], input:jqmData(type='date')" ).each(function(){

に

$( "input[plug='date'], input:jqmData(plug='date')" ).each(function(){

フォームuseにテキストを入力し、varプラグを追加します。

<input type="text" plug="date" name="date" id="date" value="">
于 2013-02-21T18:35:23.927 に答える
1

私は以下を使用します（coffeescript）：

$ ->
  # disable chrome's html5 datepicker
  for datefield in $('input[data-datepicker=true]')
    $(datefield).attr('type', 'text')
  # enable custom datepicker
  $('input[data-datepicker=true]').datepicker()

これはプレーンな JavaScript に変換されます。

(function() {
  $(function() {
    var datefield, _i, _len, _ref;
    _ref = $('input[data-datepicker=true]');
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      datefield = _ref[_i];
      $(datefield).attr('type', 'text');
    }
    return $('input[data-datepicker=true]').datepicker();
  }); 
}).call(this);
于 2013-10-26T17:11:53.693 に答える
0

これは私のために働く：

;
(function ($) {
    $(document).ready(function (event) {
        $(document).on('click input', 'input[type="date"], input[type="text"].date-picker', function (e) {
            var $this = $(this);
            $this.prop('type', 'text').datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: 'yy-mm-dd',
                showWeek: true,
                firstDay: 1
            });

            setTimeout(function() {
                $this.datepicker('show');
            }, 1);
        });
    });
})(jQuery, jQuery.ui);

以下も参照してください。

新しい Chrome HTML5 の日付入力を無効にするにはどうすればよいですか?

http://zizhujy.com/blog/post/2014/09/18/Add-date-picker-to-dynamically-generated-input-elements.aspx

于 2014-09-18T10:54:55.450 に答える
0

これは古い質問であることはわかっていますが、これに関する情報を探してここにたどり着いたので、他の誰かもそうかもしれません.

Modernizrを使用して、ブラウザが「日付」などの HTML5 入力タイプをサポートしているかどうかを検出できます。その場合、これらのコントロールはネイティブの動作を使用して、日付ピッカーなどを表示します。そうでない場合は、独自の日付ピッカーを表示するために使用するスクリプトを指定できます。私にとってはうまくいきます！

jquery-uiと Modernizr をページに追加し、次のコードを追加しました。

<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(initDateControls);
    initDateControls();

    function initDateControls() {
        //Adds a datepicker to inputs with a type of 'date' when the browser doesn't support that HTML5 tag (type=date)'
        Modernizr.load({
            test: Modernizr.inputtypes.datetime,
            nope: "scripts/jquery-ui.min.js",
            callback: function () {
                $("input[type=date]").datepicker({ dateFormat: "dd-mm-yy" });
            }
        });
    }

</script>

これは、ネイティブの日付ピッカーが Chrome に表示され、jquery-ui が IE に表示されることを意味します。

于 2014-11-07T17:12:04.497 に答える