Visualizzazione dei risultati da 1 a 5 su 5

Discussione: script calendario

  1. #1

    script calendario

    Salve Vi inoltro questa pagina :

    http://www.mediacasaitalia.it/testcalendar/


    ho un grosso problema e non so come risolverlo anche perche dobbiamo per forza utilizzare questo script .

    Se provate ad andare indietro con i mesi Vi accorgerete di questo :

    oggi è novembre 2013 se si va di un mese indietro cliccando < sulla sinistra anzichè andare a ottobre 2013 si va ad ottobre 2012.

    Posso inviarvi l'intero script attendo notizie.

    Ciao

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    L'ho provato sia con firefox e qualche volta in effetti da il problema segnalato (ritengo sia un problema di css allargando il calendario e definendo meglio le frecce si dovrebbe risolvere) che con safari che invece va benissimo anche adesso, se non ti va di provare a "sistemare" i css cercane un altro di calendari datepicker in rete si trova parecchio.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    L'ho provato sia con firefox e qualche volta in effetti da il problema segnalato (ritengo sia un problema di css allargando il calendario e definendo meglio le frecce si dovrebbe risolvere) che con safari che invece va benissimo anche adesso, se non ti va di provare a "sistemare" i css cercane un altro di calendari datepicker in rete si trova parecchio.

    Ciao Andrea Grazie della tua risposta

    Per me i css non valgono come ti posso testimoniare di seguito.

    Se Ti interessa ho aggiornato la pagina http://www.mediacasaitalia.it/testcalendar/

    Sotto il 1 esempio puoi costatare che il 2 è perfetto l'unica cosa è che esce tramite popup

    Ho cosi linkato il 1 script che contiene l'errore .

    Il 2 script si riferisce al 2 esempio quello giusto.

    Fammi sapere
    Ciao

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Ci ho capito il giusto, ma comunque non avrei tempo per debug(are) lo script, cercane un altro secondo me fai prima.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Tempo fa avevo scritto questo:

    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>ZDatePicker</title>
    <script type="text/javascript">
    (function () {
    
        function DatePicker (oTarget) {
    
            var
    
                oTable = document.createElement("table"), nId = aInstances.length, oTH,
                oHRow = document.createElement("tr"), oTHead = document.createElement("thead"),
                oCapt = document.createElement("caption"), oDecrYear = document.createElement("div"),
                oIncrYear = document.createElement("div"), oDecrMonth = document.createElement("div"),
                oIncrMonth = document.createElement("div");
    
            this.target = oTarget;
            this.display = document.createElement("div");
            this.current = new Date();
            this.container = oTable;
            this.display.className = "zdp-current-month";
            this.id = nId;
            oTable.className = "zdp-calendar";
            oTable.id = "zdp-cal-" + nId;
            oDecrYear.className = "zdp-decrease-year";
            oDecrMonth.className = "zdp-decrease-month";
            oIncrMonth.className = "zdp-increase-month";
            oIncrYear.className = "zdp-increase-year";
            oDecrYear.innerHTML = "\u00AB";        /* &laquo; */
            oDecrMonth.innerHTML = "\u003C";    /* &lt; */
            oIncrMonth.innerHTML = "\u003E";    /* &gt; */
            oIncrYear.innerHTML = "\u00BB";        /* &raquo; */
            oDecrYear.id = "zdp-decr-year-" + nId;
            oDecrMonth.id = "zdp-decr-month-" + nId;
            oIncrMonth.id = "zdp-incr-month-" + nId;
            oIncrYear.id = "zdp-incr-year-" + nId;
            oDecrYear.onclick = oIncrYear.onclick = oDecrMonth.onclick = oIncrMonth.onclick = onHeadClick;
    
            for (var nThId = 0; nThId < 7; nThId++) {
                oTH = document.createElement("th");
                oTH.innerHTML = sDays[nThId];
                oHRow.appendChild(oTH);
            }
    
            oTHead.appendChild(oHRow);
            oCapt.appendChild(oDecrYear); oCapt.appendChild(oDecrMonth); oCapt.appendChild(oIncrYear); oCapt.appendChild(oIncrMonth);
            oCapt.appendChild(this.display); this.container.appendChild(oCapt); this.container.appendChild(oTHead);
    
            this.current.setDate(1);
            this.writeDays();
    
            oTarget.onclick = function () {
                if (oTable.parentNode) {
                    oTable.parentNode.removeChild(oTable);
                    return;
                }
                oTable.style.zIndex = nZIndex++;
                oTable.style.position = "absolute";
                oTable.style.left = oTarget.offsetLeft + "px";
                oTable.style.top = (oTarget.offsetTop + oTarget.offsetHeight) + "px";
                oTarget.parentNode.insertBefore(oTable, oTarget);
            };
    
            aInstances.push(this);
    
        }
    
        DatePicker.prototype.writeDays = function () {
    
            var oTD, oTR;
    
            if (this.oTBody) { this.container.removeChild(this.oTBody); }
    
            this.oTBody = document.createElement("tbody");
    
            for (
    
                var
    
                    nDay, oDay, nIter = 0, nEndBlanks = (this.current.getDay() + bZeroIsMonday * 6) % 7,
                    nEnd = aMonthLengths[this.current.getMonth()] + nEndBlanks, nTotal = nEnd + ((7 - nEnd % 7) % 7);
    
                nIter < nTotal;
    
                nIter++
    
            ) {
    
                if (nIter % 7 === 0) {
                    oTR = document.createElement("tr");
                    this.oTBody.appendChild(oTR);
                }
                nDay = nIter - nEndBlanks + 1;
                oTD = document.createElement("td");
                if (nIter + 1 > nEndBlanks && nIter < nEnd) {
                    oDay = document.createElement("span");
                    oDay.className = "zdp-day-number";
                    oDay.id = "zdp-day-" + this.id;
                    oDay.innerHTML = nDay;
                    oDay.onclick = onDayClick;
                    oTD.appendChild(oDay);
                }
                oTR.appendChild(oTD);
    
            }
    
            this.display.innerHTML = sMonthsNames[this.current.getMonth()] + " " + this.current.getFullYear();
            this.container.appendChild(this.oTBody);
    
        };
    
        function onDocClick (oPssEvt) {
            var bOutside = true, oEvt = oPssEvt || /* IE */ window.event;
            for (var oNode = oEvt.target || /* IE */ oEvt.srcElement; oNode; oNode = oNode.parentNode) {
                if (oNode.className === "zdp-calendar" || oNode.className === "date-field") {
                    bOutside = false;
                    break;
                }
            }
            if (bOutside) { return; }
            aInstances[oNode.id.replace(/^\D+/, "")].container.style.zIndex = nZIndex++;
        }
    
        function onHeadClick () {
            var bIsMonth = /\-month\-/.test(this.id), nDelta = /^zdp\-decr\-/.test(this.id) ? -1 : 1, oThisCal = aInstances[this.id.replace(/^\D+/, "")];
            oThisCal.current[bIsMonth ? "setMonth" : "setYear"](oThisCal.current[bIsMonth ? "getMonth" : "getFullYear"]() + nDelta);
            oThisCal.writeDays();
        }
    
        function onDayClick () {
            var oThisCal = aInstances[this.id.replace(/^\D+/, "")];
            oThisCal.target.value = (this.innerHTML / 100).toFixed(2).substr(-2) + "\/" + (oThisCal.current.getMonth() + 1) + "\/" + oThisCal.current.getFullYear();
            oThisCal.container.parentNode.removeChild(oThisCal.container);
        }
    
        function buildCalendars () {
            for (var aFields = document.getElementsByClassName("date-field"), nLen = aFields.length, nItem = 0; nItem < nLen; new DatePicker(aFields[nItem++]));
        }
    
        var
    
            aInstances = [],
            sMonthsNames = ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"],
            sDays = ["L", "M", "M", "G", "V", "S", "D"],
            aMonthLengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
            bZeroIsMonday = true,
            nZIndex = 1000;
    
        window.addEventListener ? addEventListener("load", buildCalendars, false) : window.attachEvent ? attachEvent("onload", buildCalendars) : (onload = buildCalendars);
    
        document.addEventListener ? document.addEventListener("mousedown", onDocClick, false) : document.attachEvent ? document.attachEvent("onmousedown", onDocClick) : (document.onmousedown = onDocClick);
    
    })();
    </script>
    
    <style type="text/css">
        table.zdp-calendar {
            border: 1px solid #000000;
            border-collapse: collapse;
            background-color: #ffff00;
            cursor: default;
            font-family: verdana;
            font-size: 12px;
        }
    
        table.zdp-calendar caption {
            background-color: #0000ff;
        }
    
        table.zdp-calendar th {
            border: 1px solid #000000;
            font-weight: bold;
            background-color: green;
        }
    
        table.zdp-calendar td {
            border: 1px solid #000000;
            text-align: center;
        }
    
        div.zdp-current-month {
            width: auto;
            height: auto;
            margin: 0 auto;
            background-color: #aaaaaa;
        }
    
        div.zdp-decrease-month, div.zdp-decrease-year {
            float: left;
            margin-right: 4px;
        }
    
        div.zdp-increase-month, div.zdp-increase-year {
            float: right;
            margin-left: 4px;
        }
    
        div.zdp-increase-month, div.zdp-increase-year, div.zdp-decrease-month, div.zdp-decrease-year {
            background-color: #0000ff;
            cursor: pointer;
            padding: 0 2px;
        }
    
        span.zdp-day-number {
            color: #ff0000;
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
    
    </head>
    <body>
    
    <p>Campo data: <input type="text" readonly class="date-field" name="campo1" /> Altro campo data: <input type="text" readonly class="date-field" name="campo2" /></p>
    
    </body>
    </html>
    È semplice e intuitivo. Il CSS fa volutamente schifo ma è facilmente personalizzabile.
    Tutto ciò che fai con jQuery puoi farlo meglio e con la metà del codice in puro JavaScript.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.