在谷歌浏览器中禁用本地数据采集器

小开

You could use:

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

小开

The code above doesn't set the value of the input element nor does it fire a change event. The code below works in Chrome and Firefox (not tested in other browsers):

$('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 is a simple custom String method to pad strings with zeros (required)

小开

最佳答案

To hide the arrow:

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

And to hide the prompt:

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

小开

If you have misused <input type="date" /> you can probably use:

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

after they have loaded to turn them into text inputs. You'll need to attach your custom datepicker first:

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

Or you could give them a class:

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

小开

I agree with Robertc, the best way is not to use type=date but my JQuery Mobile Datepicker plugin uses it. So I have to make some changes:

I'm using jquery.ui.datepicker.mobile.js and made this changes:

From (line 51)

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

to

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

and in the form use, type text and add the var plug:

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

小开

With Modernizr (http://modernizr.com/), it can check for that functionality. Then you can tie it to the boolean it returns:

// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) {
$("#opp-date").datepicker();
}

小开

I use the following (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()

which gets converted to plain 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);

小开

This works for me:

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

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

小开

I know this is an old question now, but I just landed here looking for information about this so somebody else might too.

You can use Modernizr to detect whether the browser supports HTML5 input types, like 'date'. If it does, those controls will use the native behaviour to display things like datepickers. If it doesn't, you can specify what script should be used to display your own datepicker. Works well for me!

I added jquery-ui and Modernizr to my page, then added this code:

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

This means that the native datepicker is displayed in Chrome, and the jquery-ui one is displayed in IE.

小开

This worked for me

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

小开

For Laravel5 Since one uses

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

=> Chrome will force its datepicker. => if you take it away with css you will get the usual formatting errors!! (The specified value does not conform to the required format, "yyyy-MM-dd".)

SOLUTION:

$('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');

小开

This worked for me:

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


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

Even though the value of the date fields was still there and correct, it did not display. That's why I reset the date values from my view model.

小开

in HTML use prop "min"

    <input type="date" class="form-control" [min]="getDate()">

and in-class use this fun to get today's date.

   getDate(): string {
return new Date().toISOString().split('T')[0];
}