JQueryUI datepicker jako menu
October 21st, 2009
Prosty przykład jak można wykożystać element JQueryUI, datepicker jako nawigację na stronie tak aby po kliknięciu na konkretną datę zostać przekierowanym np. na URL http://moja.domena?n=12/10/2009.
Trzeba pobrać element datepicker i wstawić jego wartość do URL i przekierować na konkretny adres za pomocą window.location.replace(“http://moja.domena”); poniżej kodzik, do którego potrzebujemy oczywiście jquery-1.3.2.min.js oraz jquery-ui-1.7.1.custom.min.js a ja wykożystałem przykład datepicker wprost ze strony jqueryui wraz ze stylami css jquery-ui-1.7.1.custom.css
sam JS
<script type="text/javascript">
$(function(){
// Accordion
// Datepicker
$('#datepicker').datepicker({
inline: true
});
// Slider
});
$().ready(function()
{
$('#datepicker').click
( function()
{
window.location.replace("http://www.mysite.com/?date=" + $('#datepicker').val());
}
);
}
);
</script>
a całość w pliku html wygląda tak:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/black-tie/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
// Datepicker
$('#datepicker').datepicker({
inline: true
});
// Slider
});
$().ready(function()
{
$('#datepicker').click
( function()
{
window.location.replace("http://www.mysite.com/?date=" + $('#datepicker').val());
}
);
}
);
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
<body>
<!-- Datepicker -->
<h2 class="demoHeaders">Datepicker</h2>
<div id="datepicker"></div>
<div class="ui-datepicker">
<p>Date: <input id="datepicker" type="text"></p>
</div><!-- End demo -->
</body>
</html>
