JQuery Datepicker + PHP + SQL Server

Essa semana aconteceu um episodio curioso, enfrentei um problema de formatação de datas, na qual demorei a resolver, o fato é que o JQuery oferece um plugin de Calendário, e juntamente extensões de formatação de datas de Diversos idiomas, pois bem, se aproveitando disso, fui logo buscando em meu script o nosso “pt-BR”, assim exibe “bonito” para os clientes, porem o problema veio ao tentar dar um insert no SQL Server, que não aceitava a variável string como data, ou seja a data dd/mm/yy não grava, pois o SQL Server tem formato yy/mm/dd. Meu objetivo neste tutorial de hoje é ajudar a mais pessoas que estão passando por esta mesma dificuldade, então vamos lá.

1º Baixe o Jquery Datepicker em : http://jqueryui.com/demos/datepicker/

Reparem no menu a sua direita, existem diversos tipo de datepiker, o que utilizei foi “Dates in other months”, que ao clicar no campo text aparece um calendário pequeno para clicar no dia de escolha, esse exemplo fica em : http://jqueryui.com/demos/datepicker/#other-months  veja na imagem abaixo:

2º em seu código Javascript, dentro da tag <head> acrescente o arquivo jquery na qual fez o download, segue abaixo um exemplo, pois os caminhos do arquivo variam de acordo com o local onde o deixou.

--css(é o css do calendário)

<link href="../JavaScriptData/css/ui-lightness/jquery-ui-1.8.17.custom.css"
rel="stylesheet" type="text/css" />

--jquery

<script type="text/javascript"
src="../JavaScriptData/js/jquery-1.7.1.min.js"></script>

--jquery

<script type="text/javascript"
src="../JavaScriptData/js/jquery-ui-1.8.17.custom.min.js"></script>

3º Como ja foi citado anteriormente o arquivo também com as datas de acordo com o idioma, mas isto dificulta a formatação de data, segue abaixo um exemplo de como seria o arquivo de data no formato do Brasil.

<script type="text/javascript"
src="../JavaScriptData/development-bundle/ui/i18n/jquery.ui.datepicker-pt-BR.js">

4º Em seguida basta apenas acrescentar as funçoes necessárias, passando a forma de exibição da data e a forma de gravação, comigo ficou mais ou menos assim:

<script type="text/javascript">

  $(function() {   

            $("#datepicker").datepicker( { <!--linha
fatal -->

            <!--FORMATO PARA EXIBIR -->                       

                        closeText: 'Fechar',

                        prevText:
'&#x3c;Anterior',

                        nextText: 'Pr&oacute;ximo&#x3e;',

                        currentText: 'Hoje',

                        monthNames:
['Janeiro','Fevereiro','Mar&ccedil;o','Abril','Maio','Junho',

                        'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],

                        monthNamesShort:
['Jan','Fev','Mar','Abr','Mai','Jun',

                        'Jul','Ago','Set','Out','Nov','Dez'],

                        dayNames: ['Domingo','Segunda-feira','Ter&ccedil;a-feira','Quarta-feira','Quinta-feira','Sexta-feira','S&aacute;bado'],

                        dayNamesShort:
['Dom','Seg','Ter','Qua','Qui','Sex','S&aacute;b'],

                        dayNamesMin:
['Dom','Seg','Ter','Qua','Qui','Sex','S&aacute;b'],

                        weekHeader:
'Sm',

                        dateFormat:
'dd/mm/yy', altField: '#dbDate', altFormat: 'yy-mm-dd', 

                        firstDay:
0,

                        isRTL:
false,

                        showMonthAfterYear:
false,

                        yearSuffix: '',                

    });

  });       

  </script>

Para facilitar sua visualização e entendimento segue abaixo uma imagem do código.

Em seguida, na sua tag text onde insere a data e chama o calendário, acrescente uma linha, que ficara mais ou menos como está na imagem abaixo:

Explicação: na linha onde o tipo é igual a text (type:”Text”) o id é o nome da formatação original do datapicker ou seja ele mostra como (dd/mm/yy), e na linha abaixo onde o tipo é igual hidden, o id passa a ser dbDate, ou seja, no código javascript o altFormat da data recebeu o nome de dbDate, e é nesta linha que ele grava no formato do banco de dados (yy-mm-dd).

Para inserir os dados no banco de Dados SQL Server 2008 utilizei as funções :

mssql_init  responsável por iniciar a procedure

mssql_bind que passar os parâmetros, variáveis, e o tipo da variável.

E por fim utilizei o mssql_query que faz o insert na procedure.

Segue abaixo o exemplo utizado para gravar a data:

$sql = mssql_init('S_INSERE_USUARIO'); // stored proc name

mssql_bind($sql, "@DataCadastro", $DataCadastro, SQLCHAR, FALSE, FALSE, 19);

$sql = mssql_query(" EXEC S_INSERE_USUARIO                                                                                                                  @DataCadastro = '$DataCadastro' ", $link);

Repare que na função mssql+blind a variável está sendo passada como SQLCHAR (tipo char) e não como SQLDATE(tipo data), pois essa função não é aceita, então é substituída por char ou varchar, o false é para informar se o parâmetro @DataCadastro é de saída, e 19 é o tamanho do campo.

Espero poder ter ajudado a quem precisa, não foi nada fácil, Boa Sorte!!!