如何禁用新的Chrome HTML5日期输入？

4 回答

• 2

  要删除箭头和旋转按钮：

  .unstyled::-webkit-inner-spin-button,
  .unstyled::-webkit-calendar-picker-indicator {
      display: none;
      -webkit-appearance: none;
  }
  

  您仍然可以通过按Alt向下箭头（在Windows 10上选中）激活日历 .

  要禁用，您需要添加一些JavaScript：

  dateInput.addEventListener('keydown', function(event) {
      if (event.keyIdentifier == "Down") {
          event.preventDefault()
      }
  }, false);
  

  回复于 2024-04-16T12:01:37+08:00
• 0

  你有几个不同的选择 .

  您可以通过嗅探用户代理字符串并阻止点击事件来检测用户是否正在使用Chrome .

  if (navigator.userAgent.indexOf('Chrome') != -1) {
      $('input[type=date]').on('click', function(event) {
          event.preventDefault();
      });
  }
  

  User agent sniffing is a bad idea，但这会奏效 .

  在我看来，理想的方法是检测浏览器是否支持本机日期选择器，如果它确实使用它，如果不使用jQuery UI .

  if (!Modernizr.inputtypes['date']) {
      $('input[type=date]').datepicker({
          // Consistent format with the HTML5 picker
          dateFormat: 'yy-mm-dd'
      });   
  }​
  

  示例 - http://jsfiddle.net/tj_vantoll/8Wn34/

  当然，由于Chrome支持本机日期选择器，用户会看到而不是jQuery UI . 但至少你不会有功能冲突，UI可用于最终用户 .

  这引起了我的兴趣，所以我写了一些关于使用jQuery UI的datepicker和本机控件的内容 - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/ .

  编辑

  如果您有兴趣，我最近就使用jQuery UI的小部件和HTML5表单控件进行了讨论 .

  • Slides

  • Video

  回复于 2024-04-16T12:01:37+08:00
• 40

  这对我有用：

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

  回复于 2024-04-16T12:01:37+08:00
• 0

  我完全同意TJ .

  如果您还需要知道截至2013年7月3日Chrome only honors the ISO standard date format (yyyy-mm-dd) . 它将以本地格式显示给用户的日期（美国为'mm/dd/yy'），但将忽略HTML中设置的非ISO标准格式的任何值 .

  要转换页面加载，您可以使用TJ的用户代理嗅探器并执行以下操作：

  if (navigator.userAgent.indexOf('Chrome/2') != -1) {
      $('input[type=date]').each(function(){
          var d = trim(this.getAttribute('value'));
          if (d){
              d = new Date(d);
              var dStr = d.toISOString().split('T')[0];
              this.value = dStr; 
          }
      });
  }
  

  例如，如果您选择禁用本机日期选择器并使用jQuery，则还需要设置日期格式以匹配Chrome的日期字段，否则它将不显示jQuery日期选择器发送它的输入：

  $('#myDate').datepicker({dateFormat: 'yy-mm-dd'});
  

  将这两个内容添加到TJ答案中的第一个选项中，您可以在Chrome中使用jQuery的datepicker而不会出现错误！

  依靠原生日期采摘器是理想的最佳解决方案 . 但是当你需要支持遮光日期，日期范围的东西，或者你只是希望它看起来更漂亮时，这将起作用 .

  回复于 2024-04-16T12:01:37+08:00