Question

我有一个HTML页面，它使用来自github的Bootstrap3对话框：

页面有一个按钮，当你点击它时会显示一个带有输入的表单，我想在该输入中添加一个日期选择器，但它是动态生成的，输入上的点击不显示日期选择器。 / p>

从下面的代码中可以看到当输入具有焦点时显示“console.log（）”消息，因此datepicker应该显示正常。

你能帮我弄清楚我的代码有什么问题吗？

感谢。

const int numOfIterations = 1; //this value takes memory access out of the game
const int numOfRepetitions = 500000000; //CPU bound application
Random rand = new Random();
double[] Operand1 = new double[numOfIterations];
double[] Operand2 = new double[numOfIterations];
double[] Operand3 = new double[numOfIterations];

long[] Int64Operand1 = new long[numOfIterations];
long[] Int64Operand2 = new long[numOfIterations];
long[] Int64Operand3 = new long[numOfIterations];

for (int i = 0; i < numOfIterations; i++)
{
    Operand1[i]=(rand.NextDouble() * 100);
    Operand2[i]=(rand.NextDouble() * 80);
    Operand3[i]=(rand.NextDouble() * 17);
    Int64Operand1[i] = (long)Operand1[i];
    Int64Operand2[i] = (long)Operand2[i]+1;
    Int64Operand3[i] = (long)Operand3[i]+1;
}

double[] StdResult = new double[numOfIterations];
long[] NewResult = new long[numOfIterations];

TimeSpan begin = Process.GetCurrentProcess().TotalProcessorTime;

for (int j = 0; j < numOfRepetitions; j++)
{
    for (int i = 0; i < numOfIterations; i++)
    {
        double result = Operand1[i] / Operand2[i];
        result = result / Operand3[i];
        StdResult[i]=(result);
    }

}

TimeSpan end = Process.GetCurrentProcess().TotalProcessorTime;
Console.WriteLine("Test_DivOperator Float arithmetic measured time: " + (end - begin).TotalMilliseconds + " ms.");

begin = Process.GetCurrentProcess().TotalProcessorTime;

for (int j = 0; j < numOfRepetitions; j++)
{
    for (int i = 0; i < numOfIterations; i++)
    {
        long result =    Int64Operand1[i] / Int64Operand2[i];
        result = result / Int64Operand3[i];
        NewResult[i]=(result);
    }

}

end = Process.GetCurrentProcess().TotalProcessorTime;
Console.WriteLine("Test_DivOperator Integer arithmetic measured time: " + (end - begin).TotalMilliseconds + " ms.");

	$(function() {
	  $("body").on("focus", "#date", function() {
	    console.log("Supposed to show the datepicker"); //This is working so the datepicker should work too.
	    $('#date').datepicker();
	    $('#date').datepicker('show');
	  });
	  $("body").on("click", "#modal", function() {
	    BootstrapDialog.show({
	      message: '<div class="input-group"><span class="input-group-addon"><strong>Schedule date</strong></span><input value="" type="text" id="date" class="form-control">',
	      buttons: [{
	        icon: 'glyphicon glyphicon-send',
	        label: 'Save changes',
	        cssClass: 'btn-primary',
	        autospin: true,
	        action: function(dialogRef) {
	          dialogRef.enableButtons(false);
	          dialogRef.setClosable(false);
	          dialogRef.getModalBody().html('Dialog closes in 5 seconds.');
	          setTimeout(function() {
	            dialogRef.close();
	          }, 5000);
	        }
	      }, {
	        label: 'Close',
	        action: function(dialogRef) {
	          dialogRef.close();
	        }
	      }]
	    });
	  });
	});

Answer 1

日期选择器隐藏在模态的叠加层上。您需要设置更高的z-index才能显示。

.ui-datepicker {
  z-index: 2000; 
}

Answer 2

你厌倦了吗：

  $("#date").on("click", function(){
        console.log("Supposed to show the datepicker");//This is working so the datepicker should work too.
        $('#date').datepicker();
        $('#date').datepicker('show');
    });

Answer 3

在动态显示任何模态时初始化datepicker：

$(document).on('shown.bs.modal', function() {
    $('.datetimepicker').datetimepicker();
});

在动态生成的输入上显示jquery datepicker

3 个答案: