Question

我在弹出窗口中遇到了datetimepicker的问题。 datetimepicker日历工作正常，当我在一个简单的文本输入领域使用它（使用onfocus），在这种情况下，我能够选择所有的日期和时间，日历将保持可见，直到我选择日期和＆amp;时间和点击完成。我还为这个测试人员提供了两个必需的jqueries，但由于日历工作正常所以我认为你不需要它们（如果需要说我的话）。工作案例代码如下：

Html ：

<form name="deliveryform" id="deliveryform" action="<?php echo $_restaurant->getMerchantMenuUrl(); ?>" method="post" >
<div id="timenew" style="float:left; width:44%; display:block;margin-top:7px;"><input type="text" name="example12" id="example12" value="click here" onfocus="return showdatetimes();" size="18" />
</form>

脚本

function showdatetimes()
{

$('#example12').datetimepicker({
minDate: 0
});

$('#ui-datepicker-div').css({"z-index":'15'});

}

如您所见： enter image description here

然后压光机工作得非常好。当我点击输入字段时打开，但在我点击完成之前保持可见。现在问题是我想在弹出窗口中输入现在或以后的选项，在这种情况下，当我点击日历选择日期或时间时，它会在点击时消失，所以我无法选择时间，或另一个约会。我使用的代码是这样的：

Html

<div id="fade" class="black_overlay"></div>
<div id="light" class="white_content">
<div>
<?php 
if ($language_settings == "francais")
{
?>
<form name="deliveryform" action="<?php echo $_restaurant->getMerchantMenuUrl(); ?>"     method="post" onSubmit="return ckeckvalueofform('francais');" >
<div style="margin-left:30px;"><b>SVP choisir votre service?</b></div>
<div style="margin-left:-10px;margin-top:20px;"><input type="radio" name="deliverytype"    id="pickup" value="Pick up">&nbsp;&nbsp;Ramassage au magasin &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="deliverytype" id="delivery" value="delivery">&nbsp;&nbsp;Livraison</div>
<div style="margin-left:90px;margin-top:15px;"><input type="submit" name="submitdlform"  id="submitdlform" value="Soumettre" class="view-all" style="background- color:#851811;color:#FFFFFF;width:80px;height:33px;" /></div>
</form>
<?php
}
else
 {
?>
<form name="deliveryform" action="<?php echo $_restaurant->getMerchantMenuUrl(); ?>"   method="post" onSubmit="return ckeckvalueofform('english');" >
<input id="currenttime" name="currenttime" value="<?php echo $currenttime ?>" type="hidden" />
<input id="operational_hr_fr" name="operational_hr_fr" value="<?php echo $operational_hr_fr ?>"   type="hidden" />
<input id="operational_hr_to" name="operational_hr_to" value="<?php echo $operational_hr_to ?>" type="hidden" />
<div style="margin-left:10px;"><b>Please select your delivery type?</b></div>
<div style="border-top:2px solid #CCCCCC;"> 
<div style="margin-left:47px;margin-top:10px;"><input type="radio" name="deliverytype" id="pickup" value="Pick up">&nbsp;&nbsp;Pick up &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input  type="radio" name="deliverytype" id="delivery" value="delivery">&nbsp;&nbsp;Delivery</div>
</div>
<div style="margin-left:10px;margin-top:10px;"><b>
<?php if ($language_settings == "francais")
{echo 'Quand voulez-vous votre commande?';}else{ echo 'when do you want your order?';}?></b>
</div>
<div style="border:1px solid #CCCCCC;">
<div style="float:left; width:51%; padding:10px 0 0 10px;">
<?php if ($language_settings == "francais")
{echo 'Maintenant';}else{ echo 'Now';}?>&nbsp;<input type="radio" name="ordtimesel" value="n"     id="ordtimeseln" checked="checked" onchange="showhidetimes(this.value);" />&nbsp;<?php if        ($language_settings == "francais")
{echo 'ou Tantot';}else{ echo 'or Later';}?>&nbsp;<input type="radio" name="ordtimesel" value="l"  id="ordtimesell" onchange="showhidetimes(this.value);" />    
</div>
<div id="timenew" style="float:left; width:44%; display:none;margin-top:7px;"><input type="text"  name="example12" id="example12" value="click here" onfocus="showdatetimes();" size="18" /></div>
</div>
<div style="margin-left:80px;margin-top:60px;"><input type="submit" name="submitdlform" id="submitdlform" value="Submit" class="view-all" style="background-color:#851811;color:#FFFFFF;width:80px;height:33px;" /></div>
</form>
<?php 
}
?>
<a href = "javascript:void(0)" onclick =  "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="<?php echo $this->getSkinUrl('images/deliveryclose.png'); ?>" style="margin-top:-171px;margin-left:257px;"></a>
</div> 
</div>

弹出式样式

                       .black_overlay{
                        display: none;
                        position: absolute;
                        top: 0%;
                        left: 0%;
                        width: 100%;
                        height: 2500px;
                        background-color: black;
                        z-index:1001;
                        -moz-opacity: 0.8;
                        opacity:.80;
                        filter: alpha(opacity=80);
                    }
                    .white_content {
                        display: none;
                        position: fixed;
                        top: 20%;
                        left: 45%;
                        width: auto;
                        height: auto;
                        padding: 16px;
                        border: 2px solid #f19317;
                        background-color: white;
                        z-index:1002;
                        overflow: auto;
                        margin:0  0  0  -120px;

                    }

脚本

 function showdatetimes()
{

$('#example12').datetimepicker({
minDate: 0
});

$('#ui-datepicker-div').css({"z-index":'15'});

}


 function showhidetimes(val)
 {
 if(val == 'l') 
 {
 document.getElementById("timenew").style.display = 'block';    
$('#example12').datetimepicker({
minDate: 0
});

$('#ui-datepicker-div').css({"z-index":'15'});
$('#ui-datepicker-div').css({"top":'152.6px'});
$('#ui-datepicker-div').attr('id', 'white_content');

 }
if(val == 'n') 
{
document.getElementById("timenew").style.display = 'none';  
 }
}

我在magento中做了这一切，在第二种情况下我的日历消失了，但是这个文件中有很多其他代码，我粘贴了我发现的相关内容，如果你发现那么你可以查看整个代码在这里（http://pastebin.com/JgcE9f1P）.. Goodluck解决我的问题，希望任何人肯定会查找我错过的内容：P 我希望它像这样： enter image description here

Datetimepicker日历在选择日期或时间时消失。

0 个答案: