logo

jTimepicker | time picker | jQuery Plugin

Categoria: Plugin em 06/10/2009 | 17 Opa :)
logo

jTimepicker é um plugin jquery que serve para selecionar horas e minutos separadamente através de um time picker com o jQuery UI Slider

Como?

$(document).ready(function() {
     $('#timepicker').jtimepicker();
});

<div id="timepicker"></div>

 

 

 

Site

Bookmark and Share

17 marcas, uhull to “jTimepicker | time picker | jQuery Plugin”

  1. kjelder disse:
    7 de abril de 2010 às 8:35

    nao me arranjas o executavel disso pois estou com um problema que isso nao executa

    Responder
  2. Ana disse:
    12 de maio de 2010 às 14:55

    olá!!
    Primeiro parabéns pelo post.
    Mas estou com 1 dúvida, qual a maneira para a barra que aparece ao clicar no relógio, aparecer logo em baixo do mesmo.
    Porque a mim, ao clicar, essa barra vai até ao cimo da página e não sai + de lá…

    Responder
    • Ruan Carlos disse:
      12 de maio de 2010 às 15:02

      Você precisa adicionar o CSS, provavelmente você esqueceu. É algo como:

      .combo {
    float:left;
}
.clock {
    display:block;
    cursor:pointer;
    float:left;
    margin-left:2px;
}
.sliderWrap {
    width:250px;
    position:absolute;
    z-index:100;
    top:30px;
    left:40px;
    padding-right:10px;
    background:#fff;
    border:1px solid #ccc;
    display:none;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    *padding-top:10px; /* IE */
}
.sliderWrap div {
    width:100%;
}

.sliderWrap label {
    display:block;
    width:30px;
    height:20px;
    float:left;
    text-align:right;
    font-size:11px;
    font-family:sans-serif;
}

.sliderWrap p {
    font-size:70%;
    margin-left:40px;
}
#timepicker {
    position:relative;
    float:left;
}

      Você pode baixar todo o css usado neste exemplo aqui: http://ruancarlos.com.br/Blog/wp-content/themes/CherryTruffle/post/jtimepicker/style.css

      Responder
  3. Ana disse:
    12 de maio de 2010 às 17:30

    Pois, faltava mesmo o css…
    Obrigada pela dica… :)
    Já agora se não for abusar muito, você sabe como extrair a hora escolhida, de modo a colocar numa data base?
    Pois pelo id do div não dá…

    Responder
    • Ruan Carlos disse:
      12 de maio de 2010 às 17:41

      Bom nunca fiz isso, mas neste caso você poderia criar um campo hidden e quando você for dar o post você colocaria o valor dos combos nele, você pode pegar eles pelas classes “hourcombo” “mincombo”.

      Responder
  4. Gustavo Jungthon disse:
    13 de maio de 2010 às 11:37

    Olá, eu não entendi como obter os dados desse campo…
    Eu fiz o seguinte:

    Daí eu tentei, na hora de salvar, pegar o value do id “timepicker”, mas ele não reconhece o valor.

    Será que pode me ajudar?

    Abraço, Gustavo

    Responder
    • Gustavo Jungthon disse:
      13 de maio de 2010 às 11:39

      Ops, coloquei o código, mas esqueci que ele desaparece..hehe.
      Eu criei o div com id=”timepicker”, e dentro do div criei um input com o nome do campo que preciso.

      Responder
    • Ruan Carlos disse:
      13 de maio de 2010 às 11:41

      A princípio você teria que dar um post para verificar se ele está enviando algo para sua tela, mas como já havia falado para a ana no comentário anterior.

      “Bom nunca fiz isso, mas neste caso você poderia criar um campo hidden e quando você for dar o post você colocaria o valor dos combos nele, você pode pegar eles pelas classes “hourcombo” “mincombo”.”

      Responder
  5. Ana disse:
    13 de maio de 2010 às 18:24

    Olá novamente!
    Infelizmente não tenho boas noticias. Depois de algumas tentativas não consegui retirar os valores de que preciso… :(
    Mais alguma sugestão para tentar resolver o meu problema?
    Ou mesmo algum exemplo…
    Já agora Gustavo Jungthon você conseguiu extrair os valores?

    Responder
  6. Ana disse:
    13 de maio de 2010 às 21:04

    Bem depois de muitas horas de navegação pelo Google, encontrei a resposta ao meu problema…
    Deixo aqui o site para o caso de alguém precisar!!
    http://keith.dev-x.net/

    Responder
  7. Ana disse:
    13 de maio de 2010 às 21:24

    Sim…
    Simplesmente isso…
    Para que complicar? :P

    Responder
    • Gustavo Jungthon disse:
      17 de maio de 2010 às 10:10

      Olá,
      Vocês me desculpem, mas não entendi onde devo colocar “selectType: false”. Alguém pode colocar um exemplo aqui?
      Abraço

      Responder
      • Ruan Carlos disse:
        17 de maio de 2010 às 11:22

        Nas configurações do plugin.

        <script type="text/javascript">
    $(document).ready(function() {
        $('#timepicker').jtimepicker({
            // Configuration goes here
            selectType: false
        });
    });
</script>
        Responder

logo
logo
Hospedado no Djalma | Ruan Carlos.