Google Chromeでネイティブの日付ピッカーを無効にする


88

日付ピッカーがChrome 20に導入されましたが、それを無効にする属性はありますか?私のシステム全体はjQuery UI日付ピッカーを使用していて、それはクロスブラウザーなので、Chromeのネイティブ日付ピッカーを無効にしたいと思います。タグ属性はありますか?


回答:


140

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

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

そしてプロンプトを隠すには:

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}

3
::-webkit-input-placeholderはプレースホルダーではないため、「mm / dd / yyyy」テキストを非表示にせず、ネイティブに制御されます。
ジャスティンブル

1
また、セレクターがありません。参考までに:stackoverflow.com/a/11418704/229787
Justin Bull

私の知る限り、これはAndroid Chromeでは機能しません-fiddle.jshell.net/RgY3t/138
Seb Charrot

54

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

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

ロードしてテキスト入力に変換した後。最初にカスタム日付ピッカーをアタッチする必要があります。

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

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

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

5
簡単に私のお気に入りのソリューション。これはシンプルで、ブラウザ固有のCSSセレクタを実装していません。意図した結果であるIMOは、JavaScriptが有効になっている場合にネイティブコントロールを防止し、カスタムの日付ピッカーを可能にすることです。ただし、JavaScriptが無効になっている場合でも、ネイティブコントロールは機能します。正直なところ、これは受け入れられる答えになるはずです。
ジャスティンブル

2
@ travesty3これらのバージョンのIEはhtml5日付ピッカーをサポートしていますか、それとも単にテキストにフォールバックしますか?そうでなければ、それは問題ではありません。
rjmunro 2013年

2
日付フィールドに<input type = "date">を使用すると誤用される理由がわかりません。(この回答の最初の文)
スティーブ

3
Date of Birthのようなフィールドにカレンダーの日付ピッカーを必要とせず、ネイティブブラウザーによって検証されるフィールドを必要とすることは完全に有効です。
Duncanmoo 2017

1
@Duncanmoo生年月日について特別なことは何ですか?最大値を今日(赤ちゃんが生まれた日に入力できるようにする場合)、またはN年前に設定します(Nはサイトのユーザーの最小年齢です)。特にモバイルでは、カスタムのJSのものよりも、ブラウザのネイティブの日付ピッカーを使用して生年月日を入力したいと思います。また、検証をサポートしないカスタムJS日付ピッカー実装はいくつありますか?
rjmunro

15

あなたは使うことができます:

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();

3
jQuery> = 1.7を使用する場合:jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
yorch

この回答は、ネイティブスタイルを削除しません。stackoverflow.com/a/11418704/229787
ジャスティンブル

4
@JustinBullは真実ですが、質問はスタイリングを削除することではなく、jQuery日付ピッカーを代わりに使用できるようにすることで、この回答は実現しました。どのようにスタイリングを削除することもできますか?
神保

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();
}

3
これは、ネイティブの日付ピッカーが使用できないときにjQueryの日付ピッカーにフォールバックするのに非常に便利です。ただし、この質問はChromeの日付ピッカーを取り除くことに関するもののようです。そのため、私はあなたの回答に反対票を投じました。
Sam

7

これは私のために働いた

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

2

上記のコードはinput要素の値を設定せず、changeイベントを発生させません。以下のコードは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メソッドです(必須)。


1

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

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

(行51)から

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

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

フォームの使用で、テキストを入力し、varプラグを追加します。

<input type="text" plug="date" name="date" id="date" value="">

3
ローカルスクリプトデータのカスタム属性を追加する場合、有効な方法はdata-*attributesを使用することです。この場合、data-plugではなく属性を呼び出します。これによりplug、HTML6 / 7/8などで追加された新しい属性と衝突しないことが保証されます。
robertc 2013年

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);

1

これは私のために働きました:

// Hide Chrome datetime picker
$('input[type="datetime-local"]').attr('type', 'text');

// Reset date values
$("#EffectiveDate").val('@Model.EffectiveDate.ToShortDateString()');
$("#TerminationDate").val('@Model.TerminationDate.ToShortDateString()');

日付フィールドのはまだ残っていて正しいにもかかわらず、表示されませんでした。そのため、ビューモデルから日付値をリセットします。


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


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に表示されます。


0

Laravel5の場合

{!! Form :: input( 'date'、 'date_start'、null、['class' => 'form-control'、 'id' => 'date_start'、 'name' => 'date_start'])!!}

=> Chromeは日付ピッカーを強制します。=> cssでそれを取り除くと、通常のフォーマットエラーが発生します!! (指定された値は、必要な形式「yyyy-MM-dd」に準拠していません。)

解決:

$( 'input [type = "date"]')。attr( 'type'、 'text');

$("#date_start").datepicker({
    autoclose: true,
    todayHighlight: true,
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    viewMode: 'months'
});
$("#date_stop").datepicker({
    autoclose: true,
    todayHighlight: true,
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    viewMode: 'months'
});
$( "#date_start" ).datepicker().datepicker("setDate", "1d");
$( "#date_stop" ).datepicker().datepicker("setDate", '2d');
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.