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

how to display start date and current date of current week in safari browser

本文关键字：当前日期 日期 开始 safari 浏览器 显示      更新时间：2023-09-26

我试图使用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..

属性valueAsDate可能没有定义。如果你在ie11或FF 48下测试你的代码，你会发现这个属性是未定义的。

你可以添加一个Polyfill来解决你的问题:

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();
<form>
  <label>From Date</label>
  <input  type="date" id="dtp"  required>
  <label>To Date</label>
  <input  type="date" id="dtf"  required>
</form>

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

您可以在本页找到相关解决方案。

如果你使用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属性的浏览器

相关文章：