如果不添加 js 代码 (.Net MVC4),日期选择器无法在模式页面中工作

Datepicker didn't work in modal page without adding js code (.Net MVC4)

我在使用模态和日期选择器时遇到了一些问题。 我已经尝试用谷歌搜索它并尝试了一些建议,但仍然没有解决我的问题。

我使用来自互联网的模板,并为边栏/页眉和页脚使用共享布局。 我将我所有的 css/js 渲染脚本放在我的共享布局中。 我为我的模式使用了另一个文件,所以 1 个页面有 3 个 cshtml 文件(共享布局、主页、模式页面)

这是我用于日期选择器的代码:

<input type="text" id="datepicker" data-plugin-datepicker class="form-control">

这段代码在主页上运行良好,无需添加任何 js 代码,但是当模态弹出时,如果我不在模态文件中放入 js 脚本,它不会显示任何内容。

我必须使用此代码才能使日期选择器在我的模式页面中工作:

<script>
        $(function () {
              $("#datepicker").datepicker();
        });
</script>

这有什么问题吗?

而且我无法将日期格式从 mm/dd/yyyy 更改为 dd-mm-yyyy。

我已经在使用这个代码了:

<script>
        $(function () {
              $("#datepicker").datepicker({
                  dateFormat: 'dd-mm-yy'});
        });
</script>

有人知道为什么格式不起作用吗?

谢谢 菲利克斯

如果我理解你的问题,我认为你的问题是对应的javascript代码只有一个匹配的id。也就是说你的id="datepicker"只能使用一次

<input type="text" id="datepicker" data-plugin-datepicker class="form-control">

使用此代码:

<script>
    $(function () {
          $("#datepicker").datepicker();
    });
</script>

要使其正常工作,您应该再做一个 javascript 并为您页面上的另一个日期选择器使用另一个 id 值:

<input type="text" id="datepicker2" data-plugin-datepicker class="form-control">

<script>
    $(function () {
          $("#datepicker2").datepicker();
    });
</script>

或者您可以将下面的代码放入您的 javascript 文件中:

$(function() {

  for (i = 0; i <= 100000; i++) {
    $( "#datepicker"+i ).datepicker();
  }
});

然后在不同的 html 页面上使用下面这些:

<input type="text" id="datepicker3" data-plugin-datepicker class="form-control">
<input type="text" id="datepicker4" data-plugin-datepicker class="form-control">
<input type="text" id="datepicker5" data-plugin-datepicker class="form-control">

依此类推,直到 100000:

<input type="text" id="datepicker100000" data-plugin-datepicker class="form-control">

html id 是唯一的,不能重复使用。

只有满足以下条件,您的日期选择器才会在页面上工作: 1) 在该页面上导入包含日期选择器 javascript 代码的 javascript 文件 2)你把 javascript 代码放在页面上,就像你在问题中说的那样。

在您的主页上,我假设日期选择器可以正常工作,因为有一个 javascript 文件 (something.js) 通过这样的行导入到您的主页:

<script src="something.js"></script>

在这个 something.js 中,有相同的 javascript 代码可以使您的日期选择器正常工作。所以这就是为什么您不需要在主页上执行 2) 选项的原因。

但是在你的模态页面上,没有这样的一行,所以这就是为什么你需要把

<script>
  $(function () {
      $("#datepicker").datepicker();
  });
</script>

使其工作,或者您可以将 javascript 文件导入您的模态页面以使其工作。