Datepicker materialize - inserir data no mysql

Felipe Paz · 8 de março de 2017

E aí, gurizada. beleza? É o seguinte, não sei se alguém usa o framework da Google, mas independente disso, como eu pego os dados do datepicker e transfiro pro banco de dados? Como fazer essa conversão?

DiF · 8 de março de 2017

@Felipe Paz Não conheço esse plugin, mas já usei o datepicker do Jquery UI. Basicamente quando seleciona uma data, você insere ela em um campo input e envia ao php. lá o php você faz a conversão para o formato do banco de dados, que é invertido.

Sugestão: crie uma função php para pegar a data e inverter.

Aqui no fórum eu postei uma função destas só não lembro em qual tópico foi. Dá uma procurada.. Se não achar, aí eu procuro aqui nas minhas coisas e posto aqui.

Felipe Paz · 8 de março de 2017

@DiF , pois é. Ele envia o dados pro input ficando, como exemplo

Citação

8 março 2017

Setando os campos do plugin fica

$('.datepicker').pickadate({
	monthsFull: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
	monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
	weekdaysFull: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sabádo'],
	weekdaysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
	weekdaysLetter: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
	today: 'Hoje',
	clear: 'Limpar',
	close: 'Pronto',
	labelMonthNext: 'Próximo mês',
	labelMonthPrev: 'Mês anterior',
	labelMonthSelect: 'Selecione um mês',
	labelYearSelect: 'Selecione um ano',
	selectMonths: true,
	selectYears: 99
});

DiF · 8 de março de 2017

@Felipe Paz Poderia informar de onde você achou este plugin? É que existe centenas com o nome parecido.

Pelo que eu vi em um dos exemplo no google este pickdate() possui um atributo chamado formatSubmit

que envia no formato desejado:

Tenta assim:

$('.datepicker').pickadate({
	monthsFull: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
	monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
	weekdaysFull: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sabádo'],
	weekdaysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
	weekdaysLetter: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
	today: 'Hoje',
	clear: 'Limpar',
	close: 'Pronto',
	labelMonthNext: 'Próximo mês',
	labelMonthPrev: 'Mês anterior',
	labelMonthSelect: 'Selecione um mês',
	labelYearSelect: 'Selecione um ano',
	selectMonths: true,
	selectYears: 99,
    formatSubmit: 'yyyy/mm/dd' 
});

Felipe Paz · 8 de março de 2017

@DiF , tentei e não deu. O $("#expira").val() não pega o valor do input mesmo inserindo mais o parâmetro que tu me passou.

DiF · 8 de março de 2017

@Felipe Paz Não sei o que é esse campo que você postou que não tem a ver com o que tu mostrou ali acima.

Mas, o formatSubmit: 'yyyy/mm/dd' pelo que pesquisei(SE pesquisei certo, pois você não me informou a fonte de onde achou o plugin) Faria com que o valor do campo com pickadate, ao submeter ele converte de 8 março 2017 para 2017/03/08 que no caso no php você apenas subistitui a barra por "hífen" -

Foi o que eu tinha entendido rsrs Onde pesquisei foi este plugin: Pickdate Veja os exemplos, e lá você rola até encontrar "Formats" Pelo que entendi é o que permite que você envie a data pega no pickdate formatada. Então acho que você nem precisa tratar ela no php! Basta colocar a máscara dele ali em formats

Felipe Paz · 8 de março de 2017

6 minutos atrás, DiF disse:

@Felipe Paz Não sei o que é esse campo que você postou que não tem a ver com o que tu mostrou ali acima.

Mas, o formatSubmit: 'yyyy/mm/dd' pelo que pesquisei(SE pesquisei certo, pois você não me informou a fonte de onde achou o plugin) Faria com que o valor do campo com pickadate, ao submeter ele converte de 8 março 2017 para 2017/03/08 que no caso no php você apenas subistitui a barra por "hífen" -

Foi o que eu tinha entendido rsrs Onde pesquisei foi este plugin: Pickdate Veja os exemplos, e lá você rola até encontrar "Formats" Pelo que entendi é o que permite que você envie a data pega no pickdate formatada. Então acho que você nem precisa tratar ela no php! Basta colocar a máscara dele ali em formats

Ah, não me expliquei direito. Eu pego o input do date -> $("#expira").val() e envio via ajax para o php tratar e enviar para o servidor. Mas o php não reconhece o que foi passado, na verdade, mesmo fazendo um teste simples com alert para mostrar o que está no campo date não funciona.

Este plugin faz parte do materialize. Este script que postei, eu peguei em algum lugar da internet que agora não me lembro onde, para mudar a modalzinha do calendário do inglês para o português.

DiF · 8 de março de 2017

@Felipe Paz Deve ter algo implicando aí.. sugiro postar o trecho completo desde o seu ajax junto como pickdate e o formulário html. vamos fazer uma análise dele passo a passo.

Felipe Paz · 8 de março de 2017

Lá vai

<form action="" method="post" id="form-cad-vaga" name="form-cad-vaga">
	<span class="col s12 red lighten-4 red-text text-darken-2 center" id="input-obrigatori-curriculos">Todos os compos com " 			 * " são de preenchimento obrigatório.<br>
			Sua vaga será analisada pela administração e será publicada tão logo que possível.</span><br>

	<!-- Dados Gerais -->
	<span class="blue-text">Dados Gerais</span>
	<div class="row">
		<div class="input-field col s12 m4 l4">
			<input type="text" name="empresa" id="empresa" class="validate" required="">
			<label for="empresa">Empresa*</label>
		</div>
		<div class="input-field col s12 m4 l4">
			<input type="text" name="sup_imediato" id="sup_imediato" class="validate" required="">
			<label for="sup_imediato">Superior Imediato*</label>
		</div>
	</div>
	<div class="row margin-top-input-curriculo">
		<div class="input-field col s12 m4 l4">
			<input type="text" name="telefone" id="telefone" class="validate" required="">
			<label for="telefone">Telefone*</label>
		</div>
		<div class="input-field col s12 m4 l4">
			<input type="email" name="email" id="email" class="validate" required="">
			<label for="email">E-mail*</label>
		</div>
	</div>
	<div class="row margin-top-input-curriculo">
		<div class="input-field col s12 m4 l4">
			<input type="text" name="titulo" id="titulo" class="validate" required="">
			<label for="titulo">Vaga*</label>
		</div>
		<div class="input-field col s12 m4 l4">
			<input type="text" name="cargo" id="cargo" class="validate" required="">
			<label for="cargo">Cargo*</label>
		</div>
	</div>
	<div class="row margin-top-input-curriculo">				
		<div class="input-field col s12 m4 l4">
			<input type="date" name="expira" id="expira" class="datepicker" required="">
			<label for="expira">Data de expiração</label>
		</div>
		<div class="input-field col s12 m4 l4">
			<input type="text" name="remuneracao" id="remuneracao" class="validate" required="">
			<label for="remuneracao">Remuneração*</label>
		</div>
	</div>
	<div class="row margin-top-input-curriculo">
		<div class="input-field col s12 m8 l8">
			<textarea name="descricao" id="descricao" cols="30" rows="10" class="materialize-textarea"></textarea>
			<label for="descricao">Descrição*</label>
		</div>
	</div>
	<div class="row margin-top-input-curriculo">
		<div class="input-field col s12 m4 l4">
			<input type="text" name="requisitos" id="requisitos" class="validate">
			<label for="requisitos">Requisitos</label>
		</div>
		<div class="input-field col s12 m4 l4">
			<input type="text" name="quantidade" id="quantidade" class="validate" required="">
			<label for="quantidade">Quantidade*</label>
		</div>
	</div>
	<div class="row margin-top-input-curriculo">
		<div class="input-field col s12 m4 l4">
			<select name="sexo" id="sexo">
				<option selected></option>
				<option value="a">Ambos</option>
				<option value="m">Masculino</option>
				<option value="f">Feminino</option>
			</select>
			<label for="">Sexo*</label>
		</div>
		<div class="input-field col s12 m4 l4">
			<input type="text" name="idade" id="idade" class="validate">
			<label for="idade">Idade</label>
		</div>
	</div>
	<div class="row margin-top-input-curriculo">
		<div class="input-field col s12 m4 l4">
			<select name="escolaridade" id="escolaridade">
				<option selected></option>
				<option value="Ensino Superior">Ensino Superior</option>
				<option value="Ensino Médio">Ensino Médio</option>
				<option value="Ensino Fundamental">Ensino Fundamental</option>
			</select>
			<label>Escolaridade*</label>
		</div>
		<div class="input-field col s12 m4 l4">
			<input type="text" name="curso" id="curso" class="validate">
			<label for="curso">Curso</label>
		</div>
	</div>
	<div class="row margin-top-input-curriculo">
		<div class="input-field col s12 m8 l8">
			<input type="text" name="endereco" id="endereco" class="validate" required="">
			<label for="endereco">Endereço*</label>
		</div>
		<div class="input-field col s2 m2 l2">
			<input type="text" name="num_endereco" id="num_endereco" class="validate" required="">
			<label for="num_endereco">Número*</label>
		</div>
	</div>
	<div class="row margin-top-input-curriculo">
		<div class="input-field col s12 m4 l4">
			<input type="text" name="bairro" id="bairro" class="validate" required="">
			<label for="bairro">Bairro*</label>
		</div>
		<div class="input-field col s12 m4 l4">
			<input type="text" name="cidade" id="cidade" class="validate" required="">
			<label for="cidade">Cidade*</label>
		</div>
	</div>
	<div class="row">
		<div class="col s4">
			<button type="submit" name="btnCadVaga" id="btnCadVaga" class="btn waves waves-effect blue " style="margin-left: 10px;">Cadastrar<i class="material-icons right">send</i>
			</button>
	</div>
</div>
		<!-- Fim dados Gerais -->
</form>

$(document).ready(function(){
	$("#btnCadVaga").on("click", function(e){
		e.preventDefault();
		
		var empresa = $("#empresa").val();
		var sup_imediato = $("#sup_imediato").val();
		var telefone = $("#telefone").val();
		var email = $("#email").val();
		var titulo = $("#titulo").val();
		var cargo = $("#cargo").val();
		var expira = $("#expira").val();
		var remuneracao = $("#remuneracao").val();
		var descricao = $("#descricao").val();
		var quantidade = $("#quantidade").val();
		var sexo = $("#sexo").val();
		var idade = $("#idade").val();
		var requisitos = $("#requisitos").val();
		var escolaridade = $("#escolaridade").val();
		var curso = $("#curso").val();
		var endereco = $("#endereco").val();
		var num_endereco = $("#num_endereco").val();
		var bairro = $("#bairro").val();
		var cidade = $("#cidade").val();

		if ( empresa == "" || sup_imediato == "" || telefone == "" || email == "" || titulo == "" || cargo == ""
			|| remuneracao == "" || descricao == "" || quantidade == "" || sexo == "" || idade == "" ||
			escolaridade == "" || endereco == "" || bairro == "" || cidade == ""
			) 
		{

			alert("Todos os campos com * são obrigatórios!");

		} else {
			if(curso == "") {
				curso = escolaridade;
			}

			$.ajax({
				url: "controles/cad_vaga.php",
				method: "post",
				dataType: "html",
				data: 
				{
					empresa: empresa,
					sup_imediato: sup_imediato,
					telefone: telefone,
					email: email,
					titulo: titulo,
					cargo: cargo,
					expira: expira,
					remuneracao: remuneracao,
					descricao: descricao,
					quantidade: quantidade,
					sexo: sexo,
					idade: idade,
					requisitos: requisitos,
					escolaridade: escolaridade,
					curso: curso,
					endereco: endereco,
					num_endereco: num_endereco,
					bairro: bairro,
					cidade: cidade
				}

			}).done(function(retorno){
				if(retorno == "1") {

					alert("Vaga cadastrada com sucesso!");
					var empresa = $("#empresa").val("");
					var sup_imediato = $("#sup_imediato").val("");
					var telefone = $("#telefone").val("");
					var email = $("#email").val("");
					var titulo = $("#titulo").val("");
					var cargo = $("#cargo").val("");
					var remuneracao = $("#remuneracao").val("");
					var descricao = $("#descricao").val("");
					var quantidade = $("#quantidade").val("");
					var sexo = $("#sexo").val("");
					var idade = $("#idade").val("");
					var requisitos = $("#requisitos").val("");
					var escolaridade = $("#escolaridade").val("");
					var curso = $("#curso").val("");
					var endereco = $("#endereco").val("");
					var num_endereco = $("#num_endereco").val("");
					var bairro = $("#bairro").val("");
					var cidade = $("#cidade").val("");

					location.reload();
				} else {
					alert(retorno);
				}
			});
		}
	});
});

<?php
include "../dao/conection.php";

$empresa = utf8_decode(htmlspecialchars(addslashes(trim($_POST['empresa']))));
$sup_imediato = utf8_decode(htmlspecialchars(addslashes(trim($_POST['sup_imediato']))));
$telefone = htmlspecialchars(addslashes(trim($_POST['telefone'])));
$email = htmlspecialchars(addslashes(trim($_POST['email'])));
$titulo = utf8_decode(htmlspecialchars(addslashes(trim($_POST['titulo']))));
$url = str_replace(" ", "+", $titulo);
$cargo = utf8_decode(htmlspecialchars(addslashes(trim($_POST['cargo']))));
$expira = date_create($_POST['expira']);
$expira = date_format($expira, "Y-m-d");
$remuneracao = htmlspecialchars(addslashes(trim($_POST['remuneracao'])));
$descricao = utf8_decode(htmlspecialchars(addslashes(trim($_POST['descricao']))));
$quantidade = htmlspecialchars(addslashes(trim($_POST['quantidade'])));
$sexo = htmlspecialchars(addslashes(trim($_POST['sexo'])));
$idade = htmlspecialchars(addslashes(trim($_POST['idade'])));
$requisitos = utf8_decode(htmlspecialchars(addslashes(trim($_POST['requisitos']))));
$escolaridade = utf8_decode(htmlspecialchars(addslashes(trim($_POST['escolaridade']))));
$curso = utf8_decode(htmlspecialchars(addslashes(trim($_POST['curso']))));
$endereco = htmlspecialchars(addslashes(trim($_POST['endereco'])));
$num_endereco = htmlspecialchars(addslashes(trim($_POST['num_endereco'])));
$bairro = utf8_decode(htmlspecialchars(addslashes(trim($_POST['bairro']))));
$cidade = utf8_decode(htmlspecialchars(addslashes(trim($_POST['cidade']))));
$estatus = "inativa";
$visualizada = "nao";

$sql = "INSERT INTO vaga (empresa, sup_imediato, telefone, email, titulo, url, cargo, remuneracao, descricao, quantidade, sexo, idade, requisitos, escolaridade, curso, endereco, num_endereco, bairro, cidade, estatus, visualizada) VALUES('$empresa', '$sup_imediato', '$telefone', '$email', '$titulo', '$url', '$cargo', '$remuneracao', '$descricao', '$quantidade', '$sexo', '$idade', '$requisitos', '$escolaridade', '$curso', '$endereco', '$num_endereco', '$bairro', '$cidade', '$estatus', '$visualizada')";
$query = mysqli_query($mysqli, $sql);

if($query) {
	echo "1";
} else {
	echo "Falha na inclusão da vaga!";
}

$mysqli->close();

?>

DiF · 8 de março de 2017

@Felipe Paz Pelo que vi no código, no formulário o campo #expira é do tipo date. Pode ser que este tipo ainda seja incompatível com o plugin usado. Neste caso, tente substituir por "text". Teste a aplicação.

Se ainda não funcionar, no php, você usou a função date_create(). Remova e deixe apenas:

$expira = $_POST['expira']; Neste campo não precisa usar as funções de addslashes e outras. Pois o usuário não vai escrever nele porque vai usar plugin e selecionar a data( por sugestão deixe o campo apenas como read only.

PS: seu código está bom. pode melhorar um pouco mais reduzindo linhas de código!