Question

在模态对话框中显示datepicker似乎有问题。

我正在使用：

    $(".dpicker").datepicker({
        numberOfMonths: 2,
        dateFormat: 'd M yy',
        showButtonPanel: true
    });

在给定的输入字段上启用日期选择器。

请检查小提琴：

http://jsfiddle.net/ozjyu9k5/3/

除非在模态对话框中渲染，否则它正在工作。

有什么建议让datepicker在对话框中工作吗？

在我搜索整个互联网寻找有效的解决方案时，请不要将其标记为重复，并且它们似乎都没有工作。

Answer 1

为什么不使用像this one这样的弹出窗口。您可以在official API page上看到完整的API。

看起来像这样：

datepicker

当您在输入字段中单击时，它将显示如下对话框

datepicker open

您的代码将是这样的：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

Answer 2

通过以下方式替换您包含的jQuery UI JS和CSS文件（外部资源），我能够让日期选择器在小提琴中工作：

// code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css

// code.jquery.com/ui/1.11.4/jquery-ui.js

Answer 3

尝试使用JQuery UI datepicker。请参阅以下代码段（ JsFiddle Demo ）：

HTML代码：

<p>HTML5 Date: <input type="date" placeholder="html5 date:" /></p>

<p><input id="Button1" type="button" value="Get DatePicker Value" title="Get DatePicker Value" /></p>

<强>脚本

// Insert placeholder as prefix in the value, when user makes a change.
$(".datepicker").datepicker({
    onSelect: function(arg) {
        $(this).val($(this).attr("placeholder") + arg);
    }
});

// Display value of datepicker
$("#Button1").click(function() {
    alert('call val(): {' + $("input").val() + '}');
});

谢谢，

<强>〜CHANDAN

在jQuerymodal对话框中显示jQuery日期选择器

3 个答案: