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

Question

i am trying to display the start date and current date of the current week in date picker using html and in chrome and firefox it is working well but in safari it is not displaying .Here is my code

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

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

these are my html date pickers and below is my script

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

}

so here page load i am inserting this function when ever the page loads it will display the current date and week start date. this is working in chrome and firefox but not working in safari..

score 2 · Answer 1 · answered Sep 19 '16 at 13:31

The property valueAsDate may be undefined. If you test your code in windows 10 with ie11 or FF 48 you will discover this property is undefined.

You may add a Polyfill to solve your problem:

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>

hey thanks gaetanoM can u help me a little i mean how to get the date format as yyyy-mm-dd and getting month starting date and current date in month and year starting date and current date in the year. — Madpop, Sep 21 '16 at 05:24
@Madpop For the date format you may take a look to [this question](http://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format). For the remaining part of your comment could you clarify (i.e.: create an example) better what you are looking for? Thanks so much. — gaetanoM, Sep 21 '16 at 13:39
hi gaetanoM my requirement is there will be 2 datepickers in html from date and to date and like week start date and week current date i want month startdate and current date ,year start date and current date and on page load this has to be loaded in datepicker — Madpop, Sep 22 '16 at 03:02

score 0 · Answer 2 · edited May 23 '17 at 10:34

Safari does not support required attribute, you need to use JavaScript.
This page contains a solution, but it is just kind of patch.

you can find related solution here on this page.

If you go with jQuery then below code is much better. Just put this code bottom of the jquery.min.js file and it works for each and every form.

Just put this code on your common .js file and embed after this file jquery.js or 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;
});

this work for all those browser, which doesn't support required attribute of html5 code.

@Madpop, is there any confusion or doubt? – yash Sep 20 '16 at 05:35 — yash, Sep 20 '16 at 05:35

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

2 Answers2