JSFiddle - React, Tailwind, and code Playground

by bilelz

HTML

<label for="calendar">Calendrier</label>
<input type="date" id="calendar" placeholder="Calendrier" min="2016-11-16" max="2017-02-13">
						
            
            <p id="value">
            
            </p>
            
<a href="mailto:?Subject=Carnet%20de%20voyage%20-%20Terres%20Australes%20et%20Antarctiques%20Fran%c3%a7aises&body=Carnet%20de%20voyage%20-%20Terres%20Australes%20et%20Antarctiques%20Fran%c3%a7aises%0d%0ahttp%3a%2f%2feboutique.local%3a9001%2f%2ftimbres%2c-beaux-timbres%2c-enveloppes-pre-affranchies%2fcommande-de-timbres%2flivres-timbres%2fcarnet-de-voyage-terres-australes-et-antarctiques-francaises%2fp%2f1313470" target="_parent" class="left bf-icon bf-icon-mail uppCase tagged" title="mail" data-tagc="{'event':'CLICK','param':{'NAME':'fiche_produit::partage::mail','LEVEL2':'6','TYPE':'exit', 'PRODUCTID':'1313470'}}">mail</a>

<br><br>
<a href="sms:?body=Carnet%20de%20voyage%20-%20Terres%20Australes%20et%20Antarctiques%20Fran%c3%a7aises%0d%0ahttp%3a%2f%2feboutique.local%3a9001%2f%2ftimbres%2c-beaux-timbres%2c-enveloppes-pre-affranchies%2fcommande-de-timbres%2flivres-timbres%2fcarnet-de-voyage-terres-australes-et-antarctiques-francaises%2fp%2f1313470" target="_parent" class="left bf-icon bf-icon-sms uppCase tagged" title="sms" data-tagc="{'event':'CLICK','param':{'NAME':'fiche_produit::partage::sms','LEVEL2':'6','TYPE':'exit', 'PRODUCTID':'1313470'}}">sms</a>

<p id="isIOS">

</p>

<input type="search" placeholder="Rechercher..."/>

CSS

body{
  font-size:16px;
}
label[for='calendar']{
  background : blue;
  color : white;
  padding: 5px 10px;
  font-size:1.2em;
  position: relative;
}

#calendar{
    position: absolute;
    left:0;
    opacity:0;
}

#calendar:focus{
    opacity:1;
}


@media (min-width: 544px) {
  body {
    max-width: 576px;
  }   
}

@media (min-width: 768px) {
  body {
    max-width: 720px;
  }

  article{
      width: 330px;
  }
}

@media (min-width: 992px) {
  body {
    max-width: 940px;
  }
}

@media (min-width: 1200px) {
  body {
    max-width: 1140px;
  } 
}

JavaScript

document.getElementById("calendar").addEventListener("change",function(){
	document.getElementById("value").innerHTML += "<br/>"+ this.value;
});

document.getElementById("calendar").addEventListener("blur",function(){
	document.getElementById("value").innerHTML += "<br/>blur :"+ this.value;
});

var isIOS = parseFloat(
	('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1])
	.replace('undefined', '3_2').replace('_', '.').replace('_', '')
) || false;

if(isIOS){
	document.getElementById("isIOS").innerHTML +="Yes IOS!";
}else{
	document.getElementById("isIOS").innerHTML +="NO ios";
}