Question

我正在尝试使用html在chrome和firefox中显示当前周的开始日期和当前日期，并且它运行良好但在safari中它没有显示。这是我的代码

<label>From Date</label>
<input  type="date" id="dtp"  required>

<label>To Date</label>
<input  type="date" id="dtf"  required>

这些是我的html日期选择器，下面是我的脚本

function getMondayOfCurrentWeek(d){
    var day = d.getDay();
    return new Date(d.getFullYear(), d.getMonth(), d.getDate() + (day == 0?-6:1)-day )

}

function Datep(){      
  document.getElementById("dtp").valueAsDate = new Date();
  document.getElementById("dtf").valueAsDate = getMondayOfCurrentWeek(new Date());

}

所以这里页面加载我在页面加载时插入此功能它将显示当前日期和星期开始日期。这是在chrome和firefox中工作但不在safari中工作..

Answer 1

属性 valueAsDate 可能未定义。如果您使用ie11或FF 48在Windows 10中测试代码，您将发现此属性未定义。

您可以添加Polyfill来解决您的问题：

＆＃13;

if(!("valueAsDate" in HTMLInputElement.prototype)){
  Object.defineProperty(HTMLInputElement.prototype, "valueAsDate", {
    get: function(){
      var d = this.value.split(/\D/);
      return new Date(d[0], --d[1], d[2]);
    },
    set: function(d){
      var day = ("0" + d.getDate()).slice(-2),
          month = ("0" + (d.getMonth() + 1)).slice(-2),
          datestr = d.getFullYear()+"-"+month+"-"+day;
      this.value = datestr;
    }
  });
}

function getMondayOfCurrentWeek(d){
  var day = d.getDay();
  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + (day == 0?-6:1)-day )

}

function Datep(){
  document.getElementById("dtp").valueAsDate = new Date();
  document.getElementById("dtf").valueAsDate = getMondayOfCurrentWeek(new Date());

}

Datep();

＆＃13;

<form>
  <label>From Date</label>
  <input  type="date" id="dtp"  required>

  <label>To Date</label>
  <input  type="date" id="dtf"  required>
</form>

＆＃13;

Answer 2

Safari不支持required属性，您需要使用JavaScript。
这个页面包含一个解决方案，但它只是一种补丁。

您可以在此页面上找到相关解决方案here。

如果你使用jQuery，那么下面的代码要好得多。只需将此代码放在jquery.min.js文件的底部，它就适用于每个表单。

只需将此代码放在您的常用.js文件中，然后嵌入此文件jquery.js或jquery.min.js

$("form").submit(function(e) {

    var ref = $(this).find("[required]");

    $(ref).each(function(){
        if ( $(this).val() == '' )
        {
            alert("Required field should not be blank.");

            $(this).focus();

            e.preventDefault();
            return false;
        }
    });  return true;
});

这项工作适用于所有那些不支持html5代码的required属性的浏览器。

如何在safari浏览器中显示当前周的开始日期和当前日期

2 个答案: