Как показать дату начала и текущую дату текущей недели в браузере Safari

Question

Я пытаюсь показать дату начала и текущую дату текущей недели в подборщике даты с помощью html, а в chrome и firefox он работает хорошо, но в сафари это не отображается .Здесь мой код

<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, но не работает в сафари.

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

эту работу для всех тех, браузер, который не поддерживает required атрибут html5 кода.

Answer 2

Собственность valueAsDate может быть не определено. Если вы проверите свой код в Windows 10 с помощью 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>