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

【问题标题】：Show jQuery date picker in jQuerymodal dialog在 jQuerymodal 对话框中显示 jQuery 日期选择器
【发布时间】：2015-04-01 10:37:31
【问题描述】：

在模式对话框中显示日期选择器似乎有问题。

我正在使用：

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

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

请检查小提琴：

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

除了在模态对话框中呈现时，它可以正常工作。

有什么建议可以让日期选择器在对话框中工作？

请不要标记为重复，因为我在整个互联网上搜索了一个可行的解决方案，但它们似乎都没有工作。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-datepicker jquery-dialog

【解决方案1】：

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

看起来像这样：

当你点击输入框时，它会显示这样的对话框

你的代码应该是这样的：

<!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>

【讨论】：

是的，但我的问题是在 Jquery UI 模式窗口中显示 Jquery UI 日期选择器不起作用。否则它正在工作。

【解决方案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

【讨论】：

【解决方案3】：

尝试使用 JQuery UI 日期选择器。见下 sn-p (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() + '}');
});

谢谢，

~陈丹

【讨论】：

这不是我想要的。我需要让它显示在模态对话框中，否则很容易。检查我的小提琴，已经做了你所做的。
@Liviuvalentyn 或使用 Bootstrap 在 modal 中显示 datepicker，参考此链接：codepen.io/Sinetheta/pen/Ftjwi
我需要使用 jquery UI 模态对话框和日期选择器，而不是 Bootstrap。