Utilizando um html simples foi feito um exemplo de um datepicker, (para escolher uma data) com a imagem de um ícone de calendário. Clique no ícone acima para ver o efeito.
Importar a classe css recebida no download. Isso é necessário para informar o estilo visual usado.
O css é importadao com a tag link, definindo o atributo rel. Veja o código para importação.
<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.10.4.custom.css" />
/*Obs. O estilo nesse caso é lightness*/
Importar o javaScript da biblioteca jQuery
<script type= "text/javascript" src= "/js/jquery-1.10.2.js"></script>
Importar o arquivo da jQuery UI, que está dentro de js.
<script type= "text/javascript" src= "js/jquery-ui-1.10.4.custom.min.js"> </script>
Lembrete: os exemplos feitos com uso da jQuery UI são simples e podem ser colocados no cabeçalho do html.
O Código está pronto para ser usado
<html>
<head>
<title>JQuery Core - Introdução a jQueryUI)</title>
<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.10.4.
custom.css" />
/*Obs. O estilo nesse caso é lightness*/
<script type= "text/javascript" src= "/static/js/jquery.min.js"></script>
<script type= "text/javascript" src= "/static/js/jquery-ui.min.js"></script>
<script type= "text/javascript">
$(function(){
$("#date").datepicker({
showOn:"button",
buttonImage:"/static/img/calendario.gif",
buttonImageOnly: true
});
});
</script>
</head>
<body>
No Html:
Date: <head>input type="text" id="date" />
</body>
</html>