Produto
PRODUTO
Time-picker
O time-picker oferece ao usuário a opção de selecionar um horário específico.
Estados de interação
Usado quando é permitido apenas a escolha de um item. Não devem ser usados para multipla seleção de itens, nesses casos deve-se usar Checkbox.
Normal
Hover
Focus
Filled
Disabled
Mobile
Na exibição mobile, o date-picker deve carregar o componente padrão de cada OS.
Android 
iOS 
Código
Esse componente utiliza o plugin jQuery Timepicker.
HTML 
Exibir código
Copiar código
Exibir código
<div class="time-picker">
<input type="text" id="file1" placeholder="Hora" class="text-input">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a" d="M18.7 9.7l-6 6c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3l-6-6c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l5.3 5.3 5.3-5.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<mask id="b" fill="#fff">
<use xlink:href="#a"></use>
</mask>
<use fill="none" fill-rule="nonzero" transform="rotate(-90 12 12)" xlink:href="#a"></use>
<g id="chevron" fill="#9b9b9b" mask="url(#b)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</span>
</div>
SASS Exibir código
Copiar código
Exibir código
.time-picker{
position: relative;
max-width: 300px;
width: 100%;
transition: .4s;
box-sizing: border-box;
input{
-webkit-appearance: none;
width: 100%;
height: 60px;
border-radius: 4px;
background-color: #fff;
border: 1px solid #9b9b9b;
padding: 0 30px 0 20px;
box-sizing: border-box;
font-size: 1em;
font-family: Lato;
font-weight: bold;
letter-spacing: normal;
color: #1e2a54;
transition: .4s;
+ .icon,
~.icon
{
#chevron{
transition: .4s;
}
}
&::placeholder {
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #9b9b9b;
opacity: 1;
}
&:-ms-input-placeholder {
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #9b9b9b;
opacity: 1;
}
&::-ms-input-placeholder {
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #9b9b9b;
opacity: 1;
}
&:hover,
&.hovered{
border: solid 1px #3153f5;
+ .icon,
~.icon
{
#chevron{
fill: #3153f5;
}
}
}
&:focus,
&.focused{
border: solid 2px #0a51fb;
box-shadow: none;
outline: none;
padding-left: 19px;
+ .icon,
~.icon
{
#chevron{
fill: #0a51fb;
}
}
}
}
.icon{
width: 24px;
height: 24px;
position: absolute;
top: 20px;
right: 20px;
pointer-events: none;
}
&.disabled{
pointer-events: none;
input{
background-color: #ebebeb;
border-color: #ebebeb;
+ .icon,
~.icon
{
#chevron{
fill: #ccc;
}
}
}
}
}
.ui-timepicker-container {
border: none;
box-sizing: border-box;
height: auto!important;
padding-bottom: 20px!important;
text-align: right;
background-color: transparent;
.ui-timepicker {
border: none;
display: inline-block;
background-color: #ffffff;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
box-sizing: border-box;
height: auto!important;
max-width: 170px;
text-align: left;
padding-bottom: 7px;
padding-top: 7px;
margin-top: 5px;
padding-right: 7px;
> ul {
border-radius: 4px;
border: none!important;
width: 100%!important;
height: 355px!important;
box-sizing: border-box;
margin: 0;
padding: 5px;
&::-webkit-scrollbar {
width: 5px;
border-radius: 1.5px;
margin-right: 10px;
transition: .4s;
}
&::-webkit-scrollbar-track {
background: #fff;
}
&::-webkit-scrollbar-thumb {
background: #ebebeb;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb:hover {
background: #ebebeb;
}
li {
max-width: 100%;
a {
font-family: Lato;
font-size: 0.875em!important;
font-weight: normal!important;
line-height: 1.5;
letter-spacing: normal;
color: #9b9b9b;
background-color: transparent!important;
border: none!important;
cursor: pointer;
padding-left: 20px;
transition: color .4s;
&:hover{
color: #3153f5!important;
}
}
}
}
}
}
JS Exibir código
Copiar código
Exibir código
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(width>767){
$('.time-picker:not(.disabled) input').timepicker({
timeFormat: 'H:mm',
interval: 30,
startTime: new Date(0,0,0,0,0,0)
});
}else
$('.time-picker input').attr('type','time');