Ho avuto questa richiesta da parte di un cliente.
Visualizzare una coppia di date (Data da e Data a) sotto forma di calendario con la possibilità di scegliere esclusivamente il mese.
Oltre a questo il requisito prevedeva anche di impostare per il campo Data da il primo giorno del mese mentre per il campo Data a la fine del mese.
Speravo e credevo di trovare molte librerie javascript che facessero al caso mio e invece ne ho trovata soltanto una, la

jQuery.mtz.monthpicker

disponibile qui
Un grazie all'autore, Luciano Costa!!

La libreria si appoggia a jquery, ed importa i 3 seguenti js (tutte scaricabili dall'url sopra linkata):

jquery.min.js (versione 1.7.2);
jquery-ui.min.js (versione 1.8.18);
jquery.mtz.monthpicker.js .

Occorre anche importare una libreria di css, il jqueri-ui css framework 1.8.18.

Ho dovuto soltanto modificare lievemente la libreria jquery.mtz.monthpicker.js , per aggiungere una validazione che scrivesse la data da e data a secondo quanto richiesto. La versione di default infatti si limita a scrivere mm/aaaa, a me invece serviva la data per esteso.
Ho aggiunto la mia funzione (chiamata checkData()) di formattazione nel metodo della libreria associato al click sull'elemento del calendario.


container.find('.mtz-monthpicker-month').bind('click', function () {
             
                var m = parseInt($(this).data('month'));
                if ($.inArray(m, settings.disabledMonths) < 0 ) {
                    settings.selectedMonth = $(this).data('month');
                    settings.selectedMonthName = $(this).text();
                    monthpicker.trigger('monthpicker-click-month', $(this).data('month'));
                    checkData();
                }
            });

La funzione checkData è la seguente:


function checkData(){
     var dataDa=document.getElementById("dataDa").value;
     if(dataDa.length==7){
     var dataDaFormattata="01/"+dataDa.substring(0);
     document.getElementById("dataDa").value=dataDaFormattata;
     }
     else
     {
      document.getElementById("dataDa").value="01"+dataDa.substring(2);
     }
     var dataA=document.getElementById("dataA").value;
     var mese="01";
     var anno="0000";
    if (dataA.length == 7) {
   mese = dataA.substring(0, 2);
   anno = dataA.substring(3, 7);
  } else {
    mese=dataA.substring(3,5);
    anno=dataA.substring(6,10);
  }
     var giorno='01';
     if(mese=='04' || mese=='06' || mese=='09' || mese=='11'){
      
      giorno='30';
     }
     else if(mese=='02'){
      if(isleap(anno)==true){
       giorno='29';
      }
      else
       {
      giorno='28';
       }
     }
     else
      {
        giorno='31';
      }
     
     document.getElementById("dataA").value=giorno+"/"+mese+"/"+anno;
    }

    function isleap(year)
    {
     var yr=year;
     if ((parseInt(yr)%4) == 0)
     {
      if (parseInt(yr)%100 == 0)
      {
        if (parseInt(yr)%400 != 0)
        {
      
        return false;
        }
        if (parseInt(yr)%400 == 0)
        {
       
        return true;
        }
      }
      if (parseInt(yr)%100 != 0)
      {
      
        return true;
      }
     }
     if ((parseInt(yr)%4) != 0)
     {
       
        return false;
     } 
    }

Un'ultima particolarità è che le due date devono essere precaricate con un valore che gli arriva dalla sessione e quindi ogni data ha una sua lista di caricamento diversa.
Ecco la jsp:


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test sulle date</title>
  <script src='js/jquery.min.js'></script> 
    <script src='js/jquery-ui.min.js'></script>
    <script type="text/javascript" src="js/jquery.mtz.monthpicker.js"></script>
    <link rel='stylesheet' href='css/jquery-ui.css'>
</head>

  <style type="text/css">
      td.mtz-monthpicker-month {
        text-align:center;
      }
      select.mtz-monthpicker:focus {
        outline: none;
      }
    </style>
<body>
<%
   String dataDa=(String)request.getSession().getAttribute("DATA_DA");
   String dataA=(String)request.getSession().getAttribute("DATA_A");
%>
<table align="center">
<tr>
<td>
Data da:
</td>
<td>
<input id="dataDa" class="mtz-monthpicker-widgetcontainer" value="<%=dataDa %>" readonly="readonly" type="text">
<img border="0"  src="images/calendar.gif" onclick="javascript:document.getElementById('dataDa').focus();" >
</td>
<td>Data a: </td>
<td>
<input id="dataA" class="mtz-monthpicker-widgetcontainer" value="<%=dataA%>" readonly="readonly" type="text">
<img border="0"  src="images/calendar.gif" onclick="javascript:document.getElementById('dataA').focus();">
</td>
</tr>
</table>

<script>
optionsDa = {
    pattern: 'mm/yyyy', 
    selectedYear: <%=Integer.parseInt((String)request.getSession().getAttribute("ANNO_DA"))%>,
    startYear: 2008,
    finalYear: 2050,
    monthNames: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic']
};
optionsA = {
     pattern: 'mm/yyyy', 
     selectedYear: <%=Integer.parseInt((String)request.getSession().getAttribute("ANNO_A"))%>,
     startYear: 2008,
     finalYear: 2050,
     monthNames: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic']
 };
$('#dataDa').monthpicker(optionsDa);
$('#dataA').monthpicker(optionsA);
</script>
</body>
</html>

Miscellanea

sabato 26 gennaio 2013

Calendario con visualizzazione solo dei mesi

jQuery.mtz.monthpicker

Nessun commento:

Posta un commento