Bộ chọn ngày đã hạ cánh trên Chrome 20, có thuộc tính nào để tắt nó không? Toàn bộ hệ thống của tôi sử dụng trình chọn ngày giao diện người dùng jQuery và đó là trình duyệt chéo, vì vậy, tôi muốn tắt trình chọn ngày gốc của Chrome. Có thuộc tính thẻ nào không?
Câu trả lời:
Để ẩn mũi tên:
input::-webkit-calendar-picker-indicator{
display: none;
}Và để ẩn lời nhắc:
input[type="date"]::-webkit-input-placeholder{
visibility: hidden !important;
}Nếu bạn đã sử dụng sai, <input type="date" />bạn có thể sử dụng:
$('input[type="date"]').attr('type','text');sau khi chúng đã tải để biến chúng thành đầu vào văn bản. Trước tiên, bạn cần đính kèm bộ chọn ngày tùy chỉnh của mình:
$('input[type="date"]').datepicker().attr('type','text');Hoặc bạn có thể cho họ một lớp học:
$('input[type="date"]').addClass('date').attr('type','text');Bạn đã có thể sử dụng:
jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
Với Modernizr ( http://modernizr.com/ ), nó có thể kiểm tra chức năng đó. Sau đó, bạn có thể buộc nó vào boolean mà nó trả về:
// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) {
$("#opp-date").datepicker();
}Đoạn mã trên không đặt giá trị của phần tử đầu vào cũng như không kích hoạt sự kiện thay đổi. Mã dưới đây hoạt động trong Chrome và Firefox (không được thử nghiệm trong các trình duyệt khác):
$('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 là một phương thức Chuỗi tùy chỉnh đơn giản để đệm các chuỗi bằng số không (bắt buộc)
Tôi đồng ý với Robertc, cách tốt nhất là không sử dụng type = date mà là plugin JQuery Mobile Datepicker của tôi sử dụng nó. Vì vậy, tôi phải thực hiện một số thay đổi:
Tôi đang sử dụng jquery.ui.datepicker.mobile.js và đã thực hiện các thay đổi này:
Từ (dòng 51)
$( "input[type='date'], input:jqmData(type='date')" ).each(function(){đến
$( "input[plug='date'], input:jqmData(plug='date')" ).each(function(){và trong biểu mẫu sử dụng, hãy nhập văn bản và thêm trình cắm var:
<input type="text" plug="date" name="date" id="date" value="">data-*thuộc tính . Trong trường hợp này, hãy gọi thuộc tính của bạn data-plugthay vì plug, sau đó nó được đảm bảo sẽ không bao giờ đụng độ với bất kỳ thuộc tính mới nào được thêm vào HTML6 / 7/8 / v.v.
Tôi sử dụng như sau (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()được chuyển đổi thành javascript đơn giản:
(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);Điều này đã làm việc cho tôi:
// Hide Chrome datetime picker
$('input[type="datetime-local"]').attr('type', 'text');
// Reset date values
$("#EffectiveDate").val('@Model.EffectiveDate.ToShortDateString()');
$("#TerminationDate").val('@Model.TerminationDate.ToShortDateString()');Mặc dù giá trị của các trường ngày vẫn ở đó và chính xác, nó không hiển thị. Đó là lý do tại sao tôi đặt lại các giá trị ngày từ mô hình chế độ xem của mình.
Điều này phù hợp với tôi:
;
(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);Xem thêm:
Làm cách nào để tắt tính năng nhập ngày HTML5 mới của Chrome?
http://zizhujy.com/blog/post/2014/09/18/Add-date-picker-to-dynamently-generated-input-elements.aspx
Tôi biết đây là một câu hỏi cũ bây giờ, nhưng tôi vừa hạ cánh ở đây để tìm kiếm thông tin về điều này, vì vậy ai đó cũng có thể.
Bạn có thể sử dụng Modernizr để phát hiện xem trình duyệt có hỗ trợ các loại đầu vào HTML5, chẳng hạn như 'ngày tháng' hay không. Nếu có, những điều khiển đó sẽ sử dụng hành vi gốc để hiển thị những thứ như bộ chọn ngày. Nếu không, bạn có thể chỉ định tập lệnh nào sẽ được sử dụng để hiển thị trình chọn ngày của riêng bạn. Hoạt động tốt cho tôi!
Tôi đã thêm jquery-ui và Modernizr vào trang của mình, sau đó thêm mã này:
<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>Điều này có nghĩa là trình chọn ngày gốc được hiển thị trong Chrome và trình chọn jquery-ui được hiển thị trong IE.
Đối với Laravel5 Kể từ khi một sử dụng
{!! Biểu mẫu :: input ('date', 'date_start', null, ['class' => 'form-control', 'id' => 'date_start', 'name' => 'date_start']) !!}
=> Chrome sẽ buộc người chọn ngày của nó. => nếu bạn lấy nó đi bằng css bạn sẽ bị lỗi định dạng thông thường !! (Giá trị đã chỉ định không tuân theo định dạng bắt buộc, "yyyy-MM-dd".)
GIẢI PHÁP:
$ ('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');