Search the Community
Showing results for tags 'Datepicker'.
Found 10 results
-
Bootstrap datepicker (Mês e Ano) não fecha depois de selecionar a data
ghlevin posted a topic in Javascript
No site de um cliente, estou usando o Datepicker do Bootstrap (peguei nesse site - eyecon.ro/bootstrap-datepicker ). Contudo, em algumas páginas, eu configuro o datepicker pra mês e ano. Selecionados os dois, mudam os dados de uma tabela: $(".datepicker").datepicker( { format: "mm/yyyy", autoclose: true, viewMode: "months", minViewMode: "years", }).on('changeDate', function(ev){ montaTabela(); // $(this).datepicker('hide'); }); Tudo funciona, mas ele não fecha o datepicker depois da seleção do mês e do ano. O autoClose não funciona e nem colocando hide ou close pro datepicker dá certo. Curiosamente, o hide (que está comentado acima) funciona pra páginas que usam datepicker de data completa (dd/mm/yyyy). O que posso tentar pra resolver? -
Estou tendo problemas com o envio do valor de uma variavel javascript para outra pagina, obs: manjo muito pouco de javascript. No primeiro script um datapicker permite o usuario selecionar o dia, o ID do usuário nesse momento ja está armazenado em uma variavel PHP, pois veio de uma seleção anterior. Os dois scripts devem enviar as respectivas informações (dia e ID) para a função.js através do onclick. No onclick está dessa forma: var dados = "id_cate="+document.getElementById('client').value; dados = dados+"&nome="+document.getElementById('datepicker').value; porém o valor do ID do cliente nao está chegando até aqui, exibindo undefined na url. O que estária errado??
-
Bom dia a todos, estou tendo um problema em relação a pegar a variavel do javascript usando o plugin datepicker e passar pro php, pois quando faço o echo no php ele me retorna uma string muito grande pq está imprimindo todo o echo e nao apenas a variavel... alguem sabe uma forma de pegar apenas a variavel sem usar post, get... seguem os codigos abaixo $(function() { $("#datepicker").datepicker({ onSelect: function(dateText, inst) { $("#data").text(dataText); } }); }); $teste = "<input type=\"text\" id=\"datepicker\" name=\"datepicker\"/>"; echo $teste;
-
Boa tarde, gostaria de saber como faço para usar um datepicker dentro da janela modal. (html, javascript e bootstrap) Eis meu código <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <!-- Link Calendário --> <link href="jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" /> <!-- Scripts Jquery --> <script src="js/jquery-2.0.2.min.js"></script> <!-- Scripts Jquery UI --> <script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js"></script> <script> $(function() { $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy', dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'], dayNamesMin: ['D','S','T','Q','Q','S','S','D'], dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','---','Sáb','Dom'], monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'], monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'], minDate: -5, maxDate: "+1D" }); }); $( function() { $( "#datepicker2" ).datepicker({ dateFormat: 'dd/mm/yy', dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'], dayNamesMin: ['D','S','T','Q','Q','S','S','D'], dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','---','Sáb','Dom'], monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'], monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'], maxDate: "+3D" }); } ); $( function() { $( "#datepicker3" ).datepicker(); $( "#datepicker3").datepicker( "option", "showAnim", "clip" ); } ); $( function() { $( "#datepicker4" ).datepicker(); $( "#datepicker4").datepicker( "option", "showAnim", "slideDown" ); } ); $( function() { $( "#datepicker5" ).datepicker(); $( "#datepicker5").datepicker( "option", "showAnim", "fadeIn" ); } ); $( function() { $( "#datepicker6" ).datepicker(); $( "#datepicker6").datepicker( "option", "showAnim", "blind" ); } ); $( function() { $( "#datepicker7" ).datepicker(); $( "#datepicker7").datepicker( "option", "showAnim", "bounce" ); } ); $( function() { $( "#datepicker8" ).datepicker(); $( "#datepicker8").datepicker( "option", "showAnim", "drop" ); } ); $( function() { $( "#datepicker10" ).datepicker(); $( "#datepicker10").datepicker( "option", "showAnim", "slide" ); } ); </script> </head> <body> <div class="container"> <h2>Large Modal</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>This is a large modal.</p> <br/> <div class="rows"> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Máximo e mínimo de dias <div class="input-group date"> <input id="datepicker" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Máximo dias <div class="input-group date"> <input id="datepicker2" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Clip <div class="input-group date"> <input id="datepicker3" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Slide down <div class="input-group date"> <input id="datepicker4" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <div class="rows"> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Fade in <div class="input-group date"> <input id="datepicker5" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Blind (UI Effect) <div class="input-group date"> <input id="datepicker6" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Bounce (UI Effect) <div class="input-group date"> <input id="datepicker7" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Drop (UI Effect) <div class="input-group date"> <input id="datepicker8" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <div class="rows"> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Slide <div class="input-group date"> <input id="datepicker10" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> Até consigo fazer aparecer, mas não grava mais na caixa de texto e parece que fica no fundo
-
Gostaria de saber como posso listar os eventos setados no datepicker, que quando ao passar o mouse em cima dos mesmos , eles mudassem o hover ou algo assim diretamente no calendário. Código atual: codepen.io/abech/pen/VrWOLR Imagem de exemplo do código atual
-
Boa noite galera, alguém me tira do prego, estou precisando colocar em mais de um campo input um calendário do tipo datepicker, abaixo script que uso para o calendário, o problema e que para usar em mais de um campo funciona apenas no primeiro campo o resto não funciona, observação os campos são criados de acordo com uma pesquisa do banco, então pode ser uma,duas,três, etc... criado por um laço while. então preciso que todos os campos chame o calendário sem problemas. <script> $(function() { $("#calendario").datepicker({ dateFormat: 'dd-mm-yy', dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'], dayNamesMin: ['D','S','T','Q','Q','S','S','D'], dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','---','Sáb','Dom'], monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'], monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'] }); }); </script> while ($i < 5( por exmplo ) { <input name="de" type="text" size="15" id="calendario" > }
-
Boa tarde, estou usando o calendário do jquery ui o datepicker e funciona perfeitamente. estou usando assim: $("#data_vinculo_outorga").datepicker({ language: "pt-BR", format: "dd/mm/yyyy" }); O problema é que preciso usar data por extenso. algo como dia "03 de Março de 2017" tentei "dd 'de' MM 'de' yyyy" mas o resultado é: 03 '3e' Março 3e 2017 Alguém sabe como fazer isso? Agradeço desde já.
-
Utilizar vários datapickers em uma tabela carregada com ajax
Jorge Gomess posted a topic in Javascript
Boa noite! É o seguinte, a princípio, estou carregando uma tabela com dados mysql via ajax: function fetch_data() { $.ajax({ url: "docentes/select.php", method: "POST", success: function (data) { $('#live_data').html(data); } }); } E em seguida faço manipulações para atualizar os dados, com isso, tudo certo. Entretanto, existe um campo da tabela que é para data, resolvi utilizar o Datepicker para deixar o campo mais elegante com a utilização de um calendário, se deparei com um problema ao utilizar vários Datepickers na mesma página, entretanto, designei uma ID única para cada input e uma classe igual para todos os inputs, classe a qual serviria de seletor para chamar a função datepicker, só que outro problema surge nessa jornada, este acontece por não estar executando a chamada da função datepicker, contudo, o seletor está correto, tem o mesmo identificador que o das classes dos inputs, não compreendo o por quê desse problema, por favor, peço vossa ajuda para a solução de meu problema, seguem códigos logo abaixo: $(document).ready(function(){ $(".datepicker").datepicker({ dateFormat: "dd/mm/yy" }); )}; Já tentei pôr eventos no input do DatePicker: <div class="input-group"> <input type="text" id="date_'.$inc.'" class="form-control datepicker" onmouseover="acionaDatePicker(\'#date_'.$inc.'\')" data-id="' . $Docente['id'] . '" data-before="' . $date . '" value="'.$date.'"/> </div> e no javascript: function acionaDatePicker(seletor){ $(seletor).datepicker({ dateFormat: "dd/mm/yy" }); } É como se não executasse o código do javascript nos dois casos. Arquivos: Código gerador de tabela com informações do banco, mais tarde será carregada com auxilio do ajax via POST na div de id = "live_data": Página onde serão exibidos os dados: Página onde ficam os códigos JAVASCRIPT: Caso eu não tenha sido claro quanto a minha dúvida, por favor, informem. -
Boa tarde, Tenho alguns componentes datepicker criados e funcionando corretamente em um formulário principal conforme a imagem a seguir: Porém quando crio o mesmo componente para ser carregado em um formulário sobreposto ao principal o componente não funciona: Desde já agradeço.
-
Estou desenvolvendo um sistema de agendamento e estou utilizando o datetimepicker para fazer a marcação das horas. segue o código que estou utilizando: HTML <form action="agenda.php" method="POST"> <p> Nome </p> <input type="text" id="inputName" name="inputName" required> <p> Email </p> <input type="text" id="inputEmail" name="inputEmail" required> <p> Telefone </p> <input type="text" id="inputPhone" name="inputPhone" required> <p> Clinica </p> <select name="inputClinica"> <option value="Avenida Tiririca">Avenida Tiririca</option> </select> <p> Agenda </p> <input type="datetime" id="inputDatetime" name="inputDatetime" required> <input class="somebutton" type="submit" value="ENVIAR"> </form> <link rel="stylesheet" type="text/css" href="js/jquery.datetimepicker.css"> <script src="js/jquery.js"></script> <script src="js/jquery.datetimepicker.full.min.js"></script> <script src="http://momentjs.com/downloads/moment.min.js"></script> <script> $.datetimepicker.setLocale('pt-BR'); </script> <script> $('#inputDatetime').datetimepicker({ formatTime:'H:i', formatDate:'Y/m/d', inline:true, }); </script> PHP include('config.php'); $erro = false; if ( isset( $_POST ) && ! empty( $_POST ) ) { foreach ( $_POST as $chave => $valor ) { $chave = $valor; if ( empty ( $valor ) ) { $erro = 'Existem campos em branco.'; } } if ( empty( $inputName ) || empty( $inputEmail ) || empty( $inputPhone ) || empty( $inputClinica ) || empty( $inputDatetime ) ) { $erro = 'Existem campos em branco.'; } $pdo_verifica = $conexao_pdo->prepare('SELECT * FROM si_agendamento WHERE id_ag = ?'); $pdo_verifica->execute( array( $inputName ) ); $id_ag = $pdo_verifica->fetch(); $id_ag = $id_ag['id_ag']; if ( ! $erro ) { if ( ! empty( $id_ag ) ) { $pdo_insere = $conexao_pdo->prepare('UPDATE si_agendamento SET inputName_ag=?, inputEmail_ag=?, inputPhone_ag=?, inputClinica_ag=?, inputDatetime_ag=? WHERE id_ag=?'); $pdo_insere->execute( array( $inputName ,$inputEmail , $inputPhone , $inputClinica, $inputDatetime, $id_ag ) ); } else { $pdo_insere = $conexao_pdo->prepare('INSERT INTO si_agendamento (inputName_ag, inputEmail_ag, inputPhone_ag, inputClinica_ag, inputDatetime_ag) VALUES (?, ?, ?, ?, ?)'); $pdo_insere->execute( array( $inputName ,$inputEmail , $inputPhone , $inputClinica, $inputDatetime) ); } } } if (!$_POST['submit']) { $quebra_linha = "\n"; $emailsender = "contato@contato.o"; $nomeremetente = $_REQUEST['inputName']; $emaildestinatario = "contato@contato.o"; $assunto = "[AGENDA]"; $email = $_REQUEST['inputEmail']; $phone = $_REQUEST['inputPhone']; $clinica = $_POST['inputClinica']; $mensagem = $_REQUEST['inputMessage']; $agendamento = $_REQUEST['inputDatetime']; $mensagemHTML = 'Olá , '.$nomeremetente.' tem um recado para voce. Existe uma nova mensagem para voce diretamente ! Nome: '.$nomeremetente.' E-mail: '.$email.' Telefone: '.$phone.' Clinica: '.$clinica.' Mensagem: '.$mensagem.' Agendamento: '.$agendamento.''; $headers = "MIME-Version: 1.1".$quebra_linha; $headers = "Content-type: text/html; charset=UTF-8".$quebra_linha; $headers = "From: ".$emailsender.$quebra_linha; $headers = "Reply-To: ".$emailsender.$quebra_linha; if(mail($emaildestinatario, $assunto, $mensagemHTML, $headers, "-r". $emailsender)) { echo "<script>alert('Seu e-mail foi enviado com sucesso. Obrigado por entrar em contato!');</script>"; echo "<script>document.location.href='index.html'</script>"; } else { echo "<script>alert('Email não enviado, tente novamente mais tarde!');</script>"; } } Criei um arquivo config.php para a conexão com o banco, Gostaria de saber se é possivel linkar essas informações do banco com o datetimepicker para marcar os espaços de 1hora como ja reservados se aprovado. Andei pesquisando e acho que vou usar o $.ajax() para fazer a requisição dos dados do banco, porém não tenho muito conhecimento. Montei a requisição da seguinte maneira: $('.xdsoft_time_variant').change(function(){ $.ajax({ url : 'index.php', type : 'get', dataType: 'html', success: function(retorno){ $('.xdsoft_time').html(retorno); } }) }); As classes xdsoft_time_variant e xdsoft_time se refere as divs criadas pela função jquery. time_variant é a div principal do script para mostrar o time e a xdsoft_time é a classe das horas.
