日付ピッカーがChrome 20に導入されましたが、それを無効にする属性はありますか?私のシステム全体はjQuery UI日付ピッカーを使用していて、それはクロスブラウザーなので、Chromeのネイティブ日付ピッカーを無効にしたいと思います。タグ属性はありますか?
回答:
矢印を非表示にするには:
input::-webkit-calendar-picker-indicator{
display: none;
}
そしてプロンプトを隠すには:
input[type="date"]::-webkit-input-placeholder{
visibility: hidden !important;
}
誤用した<input type="date" />
場合は、おそらく以下を使用できます。
$('input[type="date"]').attr('type','text');
ロードしてテキスト入力に変換した後。最初にカスタム日付ピッカーをアタッチする必要があります。
$('input[type="date"]').datepicker().attr('type','text');
または、クラスを与えることもできます。
$('input[type="date"]').addClass('date').attr('type','text');
あなたは使うことができます:
jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
Modernizr(http://modernizr.com/)を使用すると、その機能を確認できます。次に、それをブール値に関連付けることができます。
// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) {
$("#opp-date").datepicker();
}
上記のコードは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メソッドです(必須)。
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="">
data-*
attributesを使用することです。この場合、data-plug
ではなく属性を呼び出します。これによりplug
、HTML6 / 7/8などで追加された新しい属性と衝突しないことが保証されます。
私は以下を使用しています(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);
これは私のために働きました:
// Hide Chrome datetime picker
$('input[type="datetime-local"]').attr('type', 'text');
// Reset date values
$("#EffectiveDate").val('@Model.EffectiveDate.ToShortDateString()');
$("#TerminationDate").val('@Model.TerminationDate.ToShortDateString()');
日付フィールドの値はまだ残っていて正しいにもかかわらず、表示されませんでした。そのため、ビューモデルから日付値をリセットします。
これは私にとってはうまくいきます:
;
(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
私はこれが古い質問であることを知っていますが、私はこれについての情報を探してここにたどり着いたため、他の誰かもそうかもしれません。
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に表示されます。
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');