Is it possible to block clients that are using the Safari desktop browser?

Question

Because the desktop version of Safari doesn't support <input type="date">, I want to tell the clients that use the desktop version of Safari that they should switch to another browser.

I've tried the following function, but it unfortunately returns Safari even if I use Chrome.

function getBrowser() { 
    if((navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR')) != -1 ) 
    {
        return 'Opera';
    }
    else if(navigator.userAgent.indexOf("Edge") != -1 )
    {
        return 'Edge';
    }
    else if(navigator.userAgent.indexOf("Samsung") != -1) {
        return 'Samsung Browser';
    }
    else if(navigator.userAgent.indexOf("Safari") != -1)
    {
        return 'Safari';
    }
    else if (navigator.userAgent.indexOf("Chrome") != -1) {
        return 'Chrome';
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
        return 'Firefox';
    }
    else if(navigator.userAgent.indexOf("MSIE") != -1 )
    {
        return 'IE';
    }  
    else 
    {
        return 'unknown';
    }
}

Is there another way how I can detect just if the client is using Safari? And if there is, is it possible to detect a user that's using the desktop version of it? Because on iPhone and iPad the <input type="date"> tags do work.

Instead of checking against individual browsers, you should check which features are supported, if at all possible. There seem to be some hacks available for checking if the browser provides a date picker for a date input: https://stackoverflow.com/questions/10193294/how-can-i-tell-if-a-browser-supports-input-type-date — vlumi, Jun 18 '19 at 14:13

score 0 · Answer 1 · answered Jun 18 '19 at 14:15

You shouldn't check for specific browser types in this case. Instead, you should check to see if the date input type is supported, and then react accordingly if not. https://diveinto.html5doctor.com/detect.html#input-types

The basic approach is that unrecognized input types are converted to "text" by most browsers, so you can create an input, set its type to "date", and then see if it's been changed to "text":

const testInput = document.createElement('input');
testInput.setAttribute('type', 'date');
if (testInput.type !== 'date') {
    // The date input type is not supported by this browser.
}

Thanks, I think that's more like what I need. I'll accept the answer once I can. — Yoshie2000, Jun 18 '19 at 14:17

score 0 · Answer 2 · answered Jun 18 '19 at 14:19

Try like this to find the browser name. for more information refer this code

var objAgent = navigator.userAgent;
var objbrowserName  = navigator.appName;
var objOffsetName,objOffsetVersion;

// In Chrome 
if ((objOffsetVersion=objAgent.indexOf("Chrome"))!=-1) {
 objbrowserName = "Chrome";
}
// In Microsoft internet explorer
else if ((objOffsetVersion=objAgent.indexOf("MSIE"))!=-1) {
 objbrowserName = "Microsoft Internet Explorer";
}

// In Firefox
else if ((objOffsetVersion=objAgent.indexOf("Firefox"))!=-1) {
 objbrowserName = "Firefox";
}
// In Safari 
else if ((objOffsetVersion=objAgent.indexOf("Safari"))!=-1) {
 objbrowserName = "Safari";
}
// For other browser "name/version" is at the end of userAgent 
else if ( (objOffsetName=objAgent.lastIndexOf(' ')+1) < 
          (objOffsetVersion=objAgent.lastIndexOf('/')) ) 
{
 objbrowserName = objAgent.substring(objOffsetName,objOffsetVersion);
 if (objbrowserName.toLowerCase()==objbrowserName.toUpperCase()) {
  objbrowserName = navigator.appName;
 }
}

document.write('Browser name  = '+objbrowserName)

Is it possible to block clients that are using the Safari desktop browser?

2 Answers2