Ogni tanto bisogna cambiare… stufo del solito calendario mi sono messo a cercare qualcosa di carino e semplice e dopo breve ricerca è saltato fuori MooTools Date Picker.
Alla pagina del progetto ( http://www.styledisplay.com/mootoolsdatepicker/) potete trovare i vari js che occorrono per far funzionare il tutto (a dire il vero ne manca uno che potete trovare qui), l’unica cosa che rimane da fare è la pagina per richiamarli.
Eccone qui un esempio.
Nell’head della pagina bisogna aggiungere:
<script type="text/javascript" src="mootools.v1.11.js"></script>
<script type="text/javascript" src="DatePicker.js"></script>
<script type="text/javascript">
// The following should be put in your external js file,
// with the rest of your ondomready actions.
window.addEvent('domready', function(){
$$('input.DatePicker').each( function(el){
new DatePicker(el);
});
});
</script>
<style type="text/css">
/* ---- calendar and input styles ---- */
input.DatePicker{
display: block;
width: 150px;
padding: 3px 3px 3px 24px;
border: 1px solid #0070bf;
font-size: 13px;
background: #fff url(date.gif) no-repeat top left;
cursor: pointer;
}
input:focus.DatePicker{
background: #fffce9 url(datefocus.gif) no-repeat top left;
}
.dp_container{
position: relative;
padding: 0;
z-index: 500;
}
.dp_cal{
background-color: #fff;
border: 1px solid #0070bf;
position: absolute;
width: 177px;
top: 24px;
left: 0;
margin: 0px 0px 3px 0px;
}
.dp_cal table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.dp_cal select{
margin: 2px 3px;
font-size: 11px;
}
.dp_cal select option{
padding: 1px 3px;
}
.dp_cal th,
.dp_cal td{
width: 14.2857%;
text-align: center;
font-size: 11px;
padding: 2px 0;
}
.dp_cal th{
border: solid #aad4f2;
border-width: 1px 0;
color: #797774;
background: #daf2e6;
font-weight: bold;
}
.dp_cal td{
cursor: pointer;
}
.dp_cal thead th{
background: #d9eefc;
}
.dp_cal td.dp_roll{
color: #000;
background: #fff6bf;
}
/* must have this for the IE6 select box hiding */
.dp_hide{
visibility: hidden;
}
.dp_empty{
background: #eee;
}
.dp_today{
background: #daf2e6;
}
.dp_selected{
color: #fff;
background: #328dcf;
}
/* ---- just to pretty up this page ---- */
body{
font-family: Tahoma, Geneva, sans-serif;
}
.yep{
width: 450px;
margin: 50px auto;
text-align: center;
}
h1{
margin: 20px 0;
color: #60bf8f;
font: normal 28px Georgia, serif;
}
h2{
margin: 20px 0;
color: #60bf8f;
font: normal 22px Georgia, serif;
}
p{
float: left;
display: inline;
width: 180px;
margin: 20px;
text-align: left;
}
label{
color: #797774;
display: block;
font-size: 12px;
font-weight: bold;
margin: 8px 0 3px 0;
}
dl,dt,dd,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
ul{
clear: both;
}
li{
font-size: 10px;
}
li a{
color: #004a7f;
text-decoration: none;
}
li a:hover{
color: #328dcf;
border-bottom: 1px solid #328dcf;
}
dl{
font-size: 12px;
text-align: left;
}
dt, dd.default{
font-family: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace;
font-weight: bold;
}
dt{
clear: left;
float: left;
width: 140px;
padding: 5px;
text-align: right;
}
dd{
margin: 5px 0 30px 160px;
padding: 5px;
}
.default{
margin: 0 0 0 160px;
background: #eee;
}
</style>
Nel body della pagina bisogna aggiungere:
<div class="yep">
<p>
<label for="birthday">default calendar</label>
<input id="birthday" name="birthday" type="text" class="DatePicker" tabindex="1" value="<?php echo date('Y-m-d'); ?>" />
</p>
<p>
<label for="new_day">calendar with all options</label>
<input id="new_day" name="new_day" type="text" class="DatePicker" alt="{
dayChars:3,
dayNames:['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'],
daysInMonth:[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
format:'yyyy-mm-dd',
monthNames:['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
startDay:1,
yearOrder:'desc',
yearRange:90,
yearStart:2007
}" tabindex="1" value="<?php echo date('Y-m-d'); ?>" />
</p>
</div>
Ovviamente sono solo un paio delle possibili personalizzazioni…
