Hide jquery datepicker und zeigen native in mobilen

Question

Ich benutze datepicker von jquery-ui. Meine Eingabe ist type=text. Ich möchte Datepicker nur anzeigen, wenn ich auf dem Desktop bin, aber wenn ich im mobilen Browser bin, möchte ich den nativen Datepicker zeigen. Wenn ich type=date setze und ich Datepicker aktiviere, wird es offenbar zusammen mit dem nativen Datepicker gezeigt.

Wie kann ich jquery-datepicker in Desktop und native in Mobile zeigen?

Answer 1

Sie können nicht direkt überprüfen, ob ein Gerät ein Mobiltelefon oder ein Desktop ist. Sie können jedoch überprüfen, ob der aktuelle Browser einen nativen Datumszeiger hat.

Verwenden Sie modernizer, um zu überprüfen, ob der Zielbrowser einen nativen Datumszeiger hat. Verwenden Sie dann nur den jakuery-UI-Datapicker, wenn Sie keinen nativen Datumszeiger haben. Sie können es wie folgt erreichen:

<label>Date <input type="date"></label> 

<script> 
if(!Modernizr.inputtypes.date){ 
    $(’input[type=date]’).datepicker({ 
     // Consistent format 
     dateFormat: ’yy-mm-dd’ 
    }); 
} 
</script> 

Wenn ein Browser eine native Datepicker hat, dann ist das Format immer YYYY-MM-DD (siehe Is there any way to change input type="date" format?), deshalb sollte man das Format von jQuery UI Datepicker eingestellt auch YYYY-MM-DD .

Ich empfehle auch, einen Blick auf diese article zu werfen.

Beachten Sie, dass Sie auch mit Modernizr überprüfen können, ob das Zielgerät ein Touch-Gerät mit !Modernizr.touch ist. Dies ist jedoch nicht sinnvoll, da es Touch-Geräte ohne nativen Datumsauswahl gibt (Realistisches Szenario: Desktop-Computer mit Touchscreen mit Firefox).