Cambia la posizione di Datepicker all'interno della casella di testo Modelpopup

Question

Sto lavorando su un modulo Web ASP.Net che include AJAX Modelpoup Extender e jquery nepali-datepicker. Devo integrare nepali-datepicker in una casella di testo che si trova all'interno del mio secondo modelpopup, ad esempio con lo sfondo blu mostrato nell'immagine qui sotto. problema che sto affrontando è che io non sono in grado di posizionare datepicker in fondo textbox

Sulla base di risposte sul post (How to change the pop-up position of the jQuery DatePicker control) sono stato in grado di portare datepicker di fronte a seconda del modello pop-up. C'è un modo che posso usare per posizionare effettivamente DatePicker nella casella di testo.

Ecco il mio script e gli stili:

<script type="text/javascript">   
    function pageLoad() { 
     $('.nepali-calendar').nepaliDatePicker(); 
    } 

    $(document).ready(function() { 
     $('.nepali-calendar').nepaliDatePicker(); 

    }); 
</script>  

<style type="text/css"> 
    div#ndp-nepali-box 
    { 
     position:absolute; 
     z-index: 999999; 
    } 
</style> 

seguente immagine mostra come si è posizionato al momento.

Se utilizzo position come relative.

<style type="text/css"> 
    div#ndp-nepali-box 
    { 
     position: relative; 
     z-index: 999999; 
    } 
</style> 

Sembra

C'è un modo che posso usare per posizionare in realtà datepicker verso il basso della casella di testo.

Answer 1

Prova posizione relativa:

<style type="text/css"> 
    div#ndp-nepali-box 
    { 
     position: relative; 
     z-index: 999999; 
    } 
</style> 

Non so, qual è div # NDP-nepalese-box, ma provare a fare questo:

<style type="text/css"> 
    .ui-datepicker 
    { 
     position: relative; 
     z-index: 999999; 
    } 
</style> 

può essere importante

Answer 2

Poiché si utilizza jquery UI Datepicker dovrebbe avere la proprietà beforeShow e cambiare css all'interno di questa proprietà come di seguito.

Scegli questa fiddle

$('input.date').datepicker({ 
beforeShow: function(input, inst) { 
var cal = inst.dpDiv; 
var top = $(this).offset().top + $(this).outerHeight(); 
var left = $(this).offset().left; 
setTimeout(function() { 
    cal.css({ 
     'top' : top, 
     'left': left 
    }); 
}, 10); 
} 
}); 

Reference