如何在Safari瀏覽器中顯示當前星期的開始日期和當前日期

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

} 

所以這裏的網頁加載我正在將這一功能時曾經在頁面加載它會顯示當前日期和星期開始日期。這是在鉻和Firefox的工作，但不在safari工作..

Answer 1

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屬性。

Answer 2

屬性valueAsDate可能是未定義的。如果你用ie11或FF 48在windows 10中測試你的代碼，你會發現這個屬性是未定義的。

您可以添加填充工具來解決問題：

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>