Datepicker inline

Jayr Alencar ADS · Fevereiro 5, 2013

Galera estou tentando usar o datepicker UI na forma inline, mas quiria que quando uma data for selecionada ele mande a data para uma variavel PHP, para que eu possa fazer a sql pra trazer o conteudo do banco. Não fiz nada ainda,pois não sei, mas o código do datepicker é esse ai:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Display inline</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.8.3.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker();
	});
	</script>
</head>
<body>

Date: <div id="datepicker"></div>

<div class="demo-description">
<p>Display the datepicker embedded in the page instead of in an overlay.  Simply call .datepicker() on a div instead of an input.</p>
</div>
</body>
</html>

Espero que alguém possa me ajudar!

Master_Cyber · Fevereiro 7, 2013

Pow galera, estou precisando fazer exatamente isso também e não sei como..

Vi na documentação o evento:

onChangeMonthYearType: Function( Integer year, Integer month, Object inst )

Default: null

Called when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. this refers to the associated input field.

Mas não entendi o que colocar nos paramentros.

Vocês podem ajudar agente??

William Bruno · Fevereiro 7, 2013

isso ai é um callback amigo, vc tem q declarar o teu ajax dentro dele ai sim vc vai conseguir mandar para o php:

$( "#datepicker" ).datepicker({
    onChangeMonthYear: function( year, month, inst){
         alert( 'year:' + year + 'month:' + month );
    }
});

entendeu ?

no lugar desse alert, vc tem q colocar um $.ajax

Master_Cyber · Fevereiro 7, 2013

William, consegui da o alert pegando os valores do datepicker, mas eu conseguirei mudar o conteudo da pagina conforme o mes for mudado?

Isso ocorrerá com ou sem refresh?

William Bruno · Fevereiro 7, 2013

é oque eu disse: para mudar sem refresh vc precisa usar ajax

http://api.jquery.com/jQuery.ajax/

Master_Cyber · Fevereiro 7, 2013

Aeeeeeeeeeeeeee conseguiii..

Obrigado William, você é o cara

Fiz da seguinte forma:

 $("#periodo").datepicker({
            monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
            dateFormat: 'mm/yy',
            nextText: 'Próximo',
            prevText: 'Anterior',
            onClose: function() { 
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
            },
             onChangeMonthYear: function (year, month, inst) {
                $.ajax({
                          type: "POST",
                          url: "lista.php",
                          data: { ano: year,
                              mes: month
                          }
                      }).done(function(msgRetorno){
                          $('#listaDespesa').html(msgRetorno);
                          
                });
            }
        });

E no HTML:

 <div id="listaDespesa"></div>

No arquivo lista.php, fiz assim:

<table id="listaDespesa" width="489" align="center" cellpadding="0">

    <?php
    $ano = get('ano');
    $mes = get('mes');
    
    echo $mes;
   ?> 
   
</table>

Me tira mais uma dúvida:

Quando entro na página que tem o datepicker, ele só tras os dados da lista.php, após eu mudar de mês e ocorrer o post...

Tem como quando eu entrar ele já da o post com o mês atual?

William Bruno · Fevereiro 7, 2013

tem sim cara, algo assim por exemplo:

 <div id="listaDespesa">
<?php
include 'lista.php';
?>
</div>

e ai vc alteraria as variaveis, para pegar as atuais, caso não tenha nada no get:

    $ano = get('ano') ? get('ano') : date('y');
    $mes = get('mes') ? get('mes') : date('m');

acho q dessa forma já vai funcionar.

Jayr Alencar ADS · Fevereiro 7, 2013

É, praeledeu certo, mas pra mim não, pois quero somente jogar a data em uma variavel e usar a variavel pra fazer uma SQL.

Master_Cyber · Fevereiro 7, 2013

É, praeledeu certo, mas pra mim não, pois quero somente jogar a data em uma variavel e usar a variavel pra fazer uma SQL.

Man, então você não entendeu o que o William explicou e nem o que eu fiz, porque eu vou fazer exatamente isso.. vou te ajudar agora:

No meu caso, no arquivo lista.php, eu pego a data e o ano vindo do datepicker:

<table id="listaDespesa" width="489" align="center" cellpadding="0">

    <?php
    $ano = get('ano');
    $mes = get('mes');
    
    ?> 
   
</table>

get é uma função que fiz para pegar os dados, vindos por get, post, session... depende..

no seu caso você pode usar assim:

$ano = $_POST['ano'];

Com a variavel $ano e $mes, você monta sua sql..

Sacou?

Master_Cyber · Fevereiro 7, 2013

O valor do mês ta vindo assim: 1 , 2 , 3...

Tem algum propriedade do datepicker que eu possa colocar: 01, 02, 03..???

William Bruno · Fevereiro 8, 2013

Master_Cyber, não conheço cara.. talvez não.

Master_Cyber · Fevereiro 8, 2013

Master_Cyber, não conheço cara.. talvez não.

Tudo bem, então eu coloco o 0 na frente no php.

Obrigado William.

Jayr Alencar ADS · Fevereiro 8, 2013

Cara continua não dando certo. Olha ai o codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Display inline</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.8.3.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$("#datepicker").datepicker({
            monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
            dateFormat: 'mm/yy',
            nextText: 'Próximo',
            prevText: 'Anterior',
            onClose: function() { 
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
            },
             onChangeMonthYear: function (year, month, inst) {
                $.ajax({
                          type: "POST",
                          url: "inline.php",
                          data: { ano: year,
                              mes: month
                          }
                      }).done(function(msgRetorno){
                          $('#listaDespesa').html(msgRetorno);
                          
                });
            }
        });
		
        
	});
	
	</script>
</head>
<body>
    
Date: <div id="datepicker"></div>
<table id="listaDespesa" width="489" align="center" cellpadding="0">

    <?php
	
    $ano = $_POST['ano'];
    
    echo $ano;
   ?> 
   
</table>
<div class="demo-description">


</div>
</body>
</html>

Cara continua não dando certo. Olha ai o codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Display inline</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.8.3.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$("#datepicker").datepicker({
            monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
            dateFormat: 'mm/yy',
            nextText: 'Próximo',
            prevText: 'Anterior',
            onClose: function() { 
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
            },
             onChangeMonthYear: function (year, month, inst) {
                $.ajax({
                          type: "POST",
                          url: "inline.php",
                          data: { ano: year,
                              mes: month
                          }
                      }).done(function(msgRetorno){
                          $('#listaDespesa').html(msgRetorno);
                          
                });
            }
        });
		
        
	});
	
	</script>
</head>
<body>
    
Date: <div id="datepicker"></div>


    <?php
	
    $ano = $_POST['ano'];
    
    echo $ano;
   ?> 
   

<div class="demo-description">


</div>
</body>
</html>

Master_Cyber · Fevereiro 8, 2013

Man tira essa parte:

<?php
	
    $ano = $_POST['ano'];
    
    echo $ano;
   ?>

Isso vai ficar no arquivo inline.php:

<table id="listaDespesa" width="489" align="center" cellpadding="0">

    <?php
    $ano = $_POST['ano'];
       
    ?> 
   
</table>

O id da tabela, vai ser o que você vai chamar la no done do ajax

Jayr Alencar ADS · Fevereiro 8, 2013

Deu certo aqui só tive que fazer isso:

 <?php
	if(empty($_POST['ano'])){
		$ano= date("Y");
		}else{
    $ano = $_POST['ano'];}
     echo $ano;  
    ?>

Valew Irmãos!!!

Jayr Alencar ADS · Fevereiro 8, 2013

Só tem um probleminha... ele não atualiza quando eu mudo de dia,mes ou ano!

Ah, e como fazer pra ele pegaro dia também?

Arquivado

Datepicker inline

Recommended Posts

Jayr Alencar ADS 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Master_Cyber 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Master_Cyber 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Master_Cyber 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jayr Alencar ADS 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Master_Cyber 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Master_Cyber 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Master_Cyber 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jayr Alencar ADS 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Master_Cyber 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jayr Alencar ADS 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jayr Alencar ADS 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante