如果不添加 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 文件导入您的模态页面以使其工作。
我在使用模态和日期选择器时遇到了一些问题。 我已经尝试用谷歌搜索它并尝试了一些建议,但仍然没有解决我的问题。
我使用来自互联网的模板,并为边栏/页眉和页脚使用共享布局。 我将我所有的 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 文件导入您的模态页面以使其工作。