none
Problema quanto Calendário em Javascript e CSS em asp.net RRS feed

  • Pergunta

  •   Oi galera! Estou com um problema meio tenso de resolver (eu sou leigo em javascript) eu peguei um calendário em javascript no modelo DatatimePicker. Eu adicionei ele no meu sistema sem dificuldades, ele abre o calendário normalmente, porém não no lugar que deveria. Quando eu o chamo ele aparece abaixo do roda-pé. Gostaria que ele aparece-se bem abaixo da textBox que recebe a data... Segue um print.

    Segue o meu Script na página:

    <script type="text/javascript">
            var oldLink = null;
            // code to change the active stylesheet
            function setActiveStyleSheet(link, title) {
                var i, a, main;
                for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
                    if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
                        a.disabled = true;
                        if (a.getAttribute("title") == title) a.disabled = false;
                    }
                }
                if (oldLink) oldLink.style.fontWeight = 'normal';
                oldLink = link;
                link.style.fontWeight = 'bold';
                return false;
            }
    
            // This function gets called when the end-user clicks on some date.
            function selected(cal, date) {
                cal.sel.value = date; // just update the date in the input field.
                if (cal.dateClicked && (cal.sel.id == "txtSaida" || cal.sel.id == "txtRetorno"))
                // if we add this call we close the calendar on single-click.
                // just to exemplify both cases, we are using this only for the 1st
                // and the 3rd field, while 2nd and 4th will still require double-click.
                    cal.callCloseHandler();
            }
    
            // And this gets called when the end-user clicks on the _selected_ date,
            // or clicks on the "Close" button.  It just hides the calendar without
            // destroying it.
            function closeHandler(cal) {
                cal.hide();                        // hide the calendar
                //  cal.destroy();
                _dynarch_popupCalendar = null;
            }
    
            // This function shows the calendar under the element having the given id.
            // It takes care of catching "mousedown" signals on document and hiding the
            // calendar if the click was outside.
            function showCalendar(id, format, showsTime, showsOtherMonths) {
                var el = document.getElementById(id);
                if (_dynarch_popupCalendar != null) {
                    // we already have some calendar created
                    _dynarch_popupCalendar.hide();                 // so we hide it first.
                } else {
                    // first-time call, create the calendar.
                    var cal = new Calendar(1, null, selected, closeHandler);
                    // uncomment the following line to hide the week numbers
                    // cal.weekNumbers = false;
                    if (typeof showsTime == "string") {
                        cal.showsTime = true;
                        cal.time24 = (showsTime == "24");
                    }
                    if (showsOtherMonths) {
                        cal.showsOtherMonths = true;
                    }
                    _dynarch_popupCalendar = cal;                  // remember it in the global var
                    cal.setRange(1900, 2070);        // min/max year allowed.
                    cal.create();
                }
                _dynarch_popupCalendar.setDateFormat(format);    // set the specified date format
                _dynarch_popupCalendar.parseDate(el.value);      // try to parse the text in field
                _dynarch_popupCalendar.sel = el;                 // inform it what input field we use
    
                // the reference element that we pass to showAtElement is the button that
                // triggers the calendar.  In this example we align the calendar bottom-right
                // to the button.
                _dynarch_popupCalendar.showAtElement(el.nextSibling, "Br");        // show the calendar
    
                return false;
            }
    
            var MINUTE = 60 * 1000;
            var HOUR = 60 * MINUTE;
            var DAY = 24 * HOUR;
            var WEEK = 7 * DAY;
    
            // If this handler returns true then the "date" given as
            // parameter will be disabled.  In this example we enable
            // only days within a range of 10 days from the current
            // date.
            // You can use the functions date.getFullYear() -- returns the year
            // as 4 digit number, date.getMonth() -- returns the month as 0..11,
            // and date.getDate() -- returns the date of the month as 1..31, to
            // make heavy calculations here.  However, beware that this function
            // should be very fast, as it is called for each day in a month when
            // the calendar is (re)constructed.
            function isDisabled(date) {
                var today = new Date();
                return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
            }
    
            function flatSelected(cal, date) {
                var el = document.getElementById("preview");
                el.innerHTML = date;
            }
    
            function disabled(control) {
                alert('aaa');
            }
    
            function btn_excluir() {
                var msgScript = document.getElementById('lblMensagemAnotacaoScript').id;
                return (window.confirm(document.getElementById(msgScript).innerText));
            }
    
            function fcnExcluir() {
                var LenCheck = document.getElementsByName("check1").length;
                var url;
                var strVariaveis;
                var strValores;
                strValores = "";
                if (parseInt(LenCheck) > 0) {
                    var i;
                    for (i = 0; i < LenCheck; i++) {
                        if (document.getElementsByName("check1")[i].checked) {
                            if (strValores == "") {
                                strValores += document.getElementsByName("check1")[i].value;
                            } else {
                                strValores += "," + document.getElementsByName("check1")[i].value;
                            }
                        }
                    }
                }
                if (strValores.length == 0) {
                    alert("Selecione um registro !");
                    return;
                }
    
                document.form1.hdnValues.value = strValores;
    
    
    
    
            }
    
            function fcnCheckAll() {
                var LenCheck = document.getElementsByName("check1").length;
    
                if (parseInt(LenCheck) > 0) {
                    var CheckValue;
                    if (document.getElementsByName("checkall")[0].checked) {
                        CheckValue = true;
                    }
                    else {
                        CheckValue = false;
                    }
    
                    var i;
                    for (i = 0; i < LenCheck; i++) {
                        document.getElementsByName("check1")[i].checked = CheckValue;
                    }
                }
            }
    
            function fcnAlterar() {
    
                var LenCheck = document.getElementsByName("check1").length;
                var url;
                var strVariaveis;
                var strValores;
                strValores = "";
    
                if (parseInt(LenCheck) > 0) {
                    var i;
                    for (i = 0; i < LenCheck; i++) {
                        if (document.getElementsByName("check1")[i].checked) {
                            if (strValores == "") {
                                strValores += document.getElementsByName("check1")[i].value;
                            } else {
                                strValores += "," + document.getElementsByName("check1")[i].value;
                            }
                        }
                    }
    
                }
                if (strValores.length == 0) {
                    alert("Selecione um registro !");
                    return;
                }
                url = "Con_AuditGen_PoP.aspx";
                strVariaveis = "?strValores=" + strValores;
    
                window.showModalDialog(url + strVariaveis, '', 'location:no; menubar:no; status:no; toolbar:no; scrollbars:yes; resizable:no; dialogWidth:700px; dialogHeight:358px');
                
            }            
        </script>

    e o meu CSS:

    DIV.calendar {
    	POSITION: relative
    }
    .calendar {
    	BORDER-RIGHT: #bdb2bf 1px solid; BORDER-TOP: #bdb2bf 1px solid; FONT-SIZE: 11px; BACKGROUND: url(../Img/normal-bg.gif); BORDER-LEFT: #bdb2bf 1px solid; CURSOR: default; COLOR: #000; BORDER-BOTTOM: #bdb2bf 1px solid; FONT-FAMILY: "trebuchet ms",verdana,tahoma,sans-serif
    }
    .calendar TABLE {
    	BORDER-RIGHT: #bdb2bf 1px solid; BORDER-TOP: #bdb2bf 1px solid; FONT-SIZE: 11px; BACKGROUND: url(../Img/normal-bg.gif); BORDER-LEFT: #bdb2bf 1px solid; CURSOR: default; COLOR: #000; BORDER-BOTTOM: #bdb2bf 1px solid; FONT-FAMILY: "trebuchet ms",verdana,tahoma,sans-serif
    }
    .calendar {
    	BORDER-LEFT-COLOR: #797979; BORDER-BOTTOM-COLOR: #797979; BORDER-TOP-COLOR: #797979; BORDER-RIGHT-COLOR: #797979
    }
    .calendar .button {
    	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; BACKGROUND: url(../Img/title-bg.gif) repeat-x 0px 100%; PADDING-BOTTOM: 2px; COLOR: #000; PADDING-TOP: 2px; TEXT-ALIGN: center
    }
    .calendar .nav {
    	FONT-FAMILY: verdana,tahoma,sans-serif
    }
    .calendar .nav DIV
    {
    	background: url(../Img/menuarrow.gif) no-repeat 100% 100%;
    }
    .calendar THEAD TR {
    	BACKGROUND: url(../Img/title-bg.gif) repeat-x 0px 100%; COLOR: #000
    }
    .calendar THEAD .title {
    	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; BACKGROUND: url(../Img/title-bg.gif) repeat-x 0px 100%; PADDING-BOTTOM: 2px; COLOR: #000; PADDING-TOP: 2px; TEXT-ALIGN: center
    }
    .calendar THEAD .headrow {
    	
    }
    .calendar THEAD .name {
    	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; COLOR: #000; PADDING-TOP: 2px; BORDER-BOTTOM: #797979 1px solid; TEXT-ALIGN: center
    }
    .calendar THEAD .weekend {
    	COLOR: #c44
    }
    .calendar THEAD .hilite {
    	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; BACKGROUND: url(../Img/hover-bg.gif); PADDING-BOTTOM: 1px; PADDING-TOP: 2px; BORDER-BOTTOM: #797979 1px solid
    }
    .calendar THEAD .active {
    	PADDING-RIGHT: 1px; PADDING-LEFT: 3px; BACKGROUND: url(../Img/active-bg.gif); PADDING-BOTTOM: 0px; COLOR: #fff; PADDING-TOP: 3px; BORDER-BOTTOM: #797979 1px solid
    }
    .calendar THEAD .daynames {
    	BACKGROUND: url(../Img/dark-bg.gif)
    }
    .calendar TBODY .day {
    	PADDING-RIGHT: 4px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; WIDTH: 2em; COLOR: #000; PADDING-TOP: 2px; FONT-FAMILY: verdana,tahoma,sans-serif; TEXT-ALIGN: right
    }
    .calendar TBODY .othermonth {
    	FONT-SIZE: 80%; COLOR: #999
    }
    .calendar TBODY .oweekend {
    	COLOR: #f99
    }
    .calendar TABLE .wn {
    	BORDER-RIGHT: #797979 1px solid; PADDING-RIGHT: 3px; PADDING-LEFT: 2px; BACKGROUND: url(../Img/dark-bg.gif); PADDING-BOTTOM: 2px; PADDING-TOP: 2px
    }
    .calendar TBODY .rowhilite TD {
    	BACKGROUND: url(../Img/rowhover-bg.gif)
    }
    .calendar TBODY .rowhilite TD.wn {
    	BACKGROUND: url(../Img/rowhover-bg.gif)
    }
    .calendar TBODY TD.today {
    	FONT-WEIGHT: bold
    }
    .calendar TBODY TD.hilite {
    	BORDER-RIGHT: #bbb 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #bbb 1px solid; PADDING-LEFT: 1px; BACKGROUND: url(../Img/hover-bg.gif); PADDING-BOTTOM: 1px; BORDER-LEFT: #bbb 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #bbb 1px solid
    }
    .calendar TBODY TD.active {
    	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; PADDING-TOP: 2px
    }
    .calendar TBODY TD.weekend {
    	COLOR: #c44
    }
    .calendar TBODY TD.selected {
    	BORDER-RIGHT: #797979 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #797979 1px solid; PADDING-LEFT: 1px; FONT-WEIGHT: bold; BACKGROUND: url(../Img/active-bg.gif); PADDING-BOTTOM: 1px; BORDER-LEFT: #797979 1px solid; COLOR: #fff; PADDING-TOP: 1px; BORDER-BOTTOM: #797979 1px solid
    }
    .calendar TBODY .disabled {
    	COLOR: #999
    }
    .calendar TBODY .emptycell {
    	VISIBILITY: hidden
    }
    .calendar TBODY .emptyrow {
    	DISPLAY: none
    }
    .calendar TFOOT .footrow {
    	BACKGROUND: #565; COLOR: #fff; TEXT-ALIGN: center
    }
    .calendar TFOOT .ttip {
    	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; BACKGROUND: url(../Img/status-bg.gif) repeat-x 0px 0px; PADDING-BOTTOM: 2px; COLOR: #000; PADDING-TOP: 2px
    }
    .calendar TFOOT .hilite {
    	BORDER-RIGHT: #084 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #084 1px solid; PADDING-LEFT: 1px; BACKGROUND: #afa; PADDING-BOTTOM: 1px; BORDER-LEFT: #084 1px solid; COLOR: #000; PADDING-TOP: 1px; BORDER-BOTTOM: #084 1px solid
    }
    .calendar TFOOT .active {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 2px; BACKGROUND: #7c7; PADDING-BOTTOM: 0px; PADDING-TOP: 2px
    }
    .calendar .combo {
    	BORDER-RIGHT: #797979 1px solid; BORDER-TOP: #797979 0px solid; DISPLAY: none; FONT-SIZE: 90%; Z-INDEX: 100; BACKGROUND: url(../Img/normal-bg.gif); LEFT: 0px; BORDER-LEFT: #797979 1px solid; WIDTH: 4em; CURSOR: default; COLOR: #000; BORDER-BOTTOM: #797979 1px solid; POSITION: absolute; TOP: 0px
    }
    .calendar .combo .label {
    	PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; TEXT-ALIGN: center
    }
    .calendar .combo .label-IEfix {
    	PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; TEXT-ALIGN: center
    }
    .calendar .combo .label-IEfix {
    	WIDTH: 4em
    }
    .calendar .combo .hilite {
    	BACKGROUND: url(../Img/hover-bg.gif); COLOR: #000
    }
    .calendar .combo .active {
    	FONT-WEIGHT: bold; BACKGROUND: url(../Img/active-bg.gif); COLOR: #fff
    }
    .calendar TD.time {
    	PADDING-RIGHT: 0px; BORDER-TOP: #797979 1px solid; PADDING-LEFT: 0px; BACKGROUND: url(../Img/dark-bg.gif); PADDING-BOTTOM: 1px; PADDING-TOP: 1px; TEXT-ALIGN: center
    }
    .calendar TD.time .hour {
    	PADDING-RIGHT: 5px; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(../Img/normal-bg.gif); PADDING-BOTTOM: 0px; COLOR: #000; PADDING-TOP: 0px
    }
    .calendar TD.time .minute {
    	PADDING-RIGHT: 5px; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(../Img/normal-bg.gif); PADDING-BOTTOM: 0px; COLOR: #000; PADDING-TOP: 0px
    }
    .calendar TD.time .ampm {
    	PADDING-RIGHT: 5px; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(../Img/normal-bg.gif); PADDING-BOTTOM: 0px; COLOR: #000; PADDING-TOP: 0px
    }
    .calendar TD.time .hour {
    	FONT-FAMILY: monospace
    }
    .calendar TD.time .minute {
    	FONT-FAMILY: monospace
    }
    .calendar TD.time .ampm {
    	TEXT-ALIGN: center
    }
    .calendar TD.time .colon {
    	PADDING-RIGHT: 2px; PADDING-LEFT: 3px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
    }
    .calendar TD.time SPAN.hilite {
    	BACKGROUND: url(../Img/hover-bg.gif); COLOR: #000
    }
    .calendar TD.time SPAN.active {
    	BACKGROUND: url(../Img/active-bg.gif); COLOR: #fff

    Agradeço o apoio!!


    Assunto = dúvida

    segunda-feira, 5 de novembro de 2012 13:16

Respostas

  • Bom dia Claudio!!!

    Você precisa postar (ou verificar por sí mesmo) como você está chamando o método 'showCalendar'...

    veja que o primeiro parâmetro do método showCalendar é o id do elemento ao qual você quer atrelar o calendário

    showCalendar(id, format, showsTime, showsOtherMonths) 

    e logo na primeira linha você pega o objeto document dá página (que contém todos os elementos da página) para retornar o elemento onde vai ser mostrado o calendário:

    var el = document.getElementById(id);

    Por fim, no final da sua função showCalendar, você tenta mostrar o calendário logo abaixo do elemento que foi passado pelo id

    // the reference element that we pass to showAtElement is the button that
                // triggers the calendar.  In this example we align the calendar bottom-right
                // to the button.
                _dynarch_popupCalendar.showAtElement(el.nextSibling, "Br");        // show the calendar

    Então verifica se você está passando na chamada da sua função showCalendar o id da sua textbox e se você declarou uma property 'id' para a textbox...

    Gefferson Librelato

    Asp.net/Vb.Net/Ext.net/ExtJs

    quarta-feira, 14 de novembro de 2012 10:57

Todas as Respostas

  • Cara,

    Porque você não trabalha com AjaxToolKit?

    Atenciosamente,

    Samuel dos Anjos


    Atenciosamente, Samuel dos Anjos

    segunda-feira, 12 de novembro de 2012 23:42
  •   Não consegui usar o calendário do AjaxtollKit

    Assunto = dúvida

    terça-feira, 13 de novembro de 2012 14:04
  • Gerou algum erro para você?

    Se quiser posso postar um código de exemplo.

    Atenciosamente,

    Samuel dos Anjos


    Atenciosamente, Samuel dos Anjos

    terça-feira, 13 de novembro de 2012 23:45
  • Então, não consegui nem usar o recurso. Procurei o tutorial, mas não consegui usar... Se puder postar exemplos vai ajudar muito ^^

    Assunto = dúvida

    quarta-feira, 14 de novembro de 2012 01:56
  • Bom dia Claudio!!!

    Você precisa postar (ou verificar por sí mesmo) como você está chamando o método 'showCalendar'...

    veja que o primeiro parâmetro do método showCalendar é o id do elemento ao qual você quer atrelar o calendário

    showCalendar(id, format, showsTime, showsOtherMonths) 

    e logo na primeira linha você pega o objeto document dá página (que contém todos os elementos da página) para retornar o elemento onde vai ser mostrado o calendário:

    var el = document.getElementById(id);

    Por fim, no final da sua função showCalendar, você tenta mostrar o calendário logo abaixo do elemento que foi passado pelo id

    // the reference element that we pass to showAtElement is the button that
                // triggers the calendar.  In this example we align the calendar bottom-right
                // to the button.
                _dynarch_popupCalendar.showAtElement(el.nextSibling, "Br");        // show the calendar

    Então verifica se você está passando na chamada da sua função showCalendar o id da sua textbox e se você declarou uma property 'id' para a textbox...

    Gefferson Librelato

    Asp.net/Vb.Net/Ext.net/ExtJs

    quarta-feira, 14 de novembro de 2012 10:57