javascript - 让 Datepicker 在 cshtml 中工作-6ren

javascript - 让 Datepicker 在 cshtml 中工作

转载作者：行者123 更新时间：2023-11-29 14:50:38

我想弄清楚为什么日期选择器不适合我。这是在 cshtml View 中。我正在为 datepicker 函数提供正确的 id，但它不起作用。

页面来源:

<div class="editor-label">
        <label for="EFFECTIVE_DATE1">EFFECTIVE_DATE1</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="EFFECTIVE_DATE1" name="EFFECTIVE_DATE1" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="EFFECTIVE_DATE1" data-valmsg-replace="true"></span>
    </div>
 <script>
     $(function () {
         $("#EFFECTIVE_DATE1").datepicker();
     });
</script>

查看代码

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<head/>

 <div class="editor-label">
        @Html.LabelFor(model => model.EFFECTIVE_DATE1)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.EFFECTIVE_DATE1)
        @Html.ValidationMessageFor(model => model.EFFECTIVE_DATE1)
    </div>
 <script>
     $(function () {
         $("#EFFECTIVE_DATE1").datepicker();
     });
</script>

更新:这是整个页面

@model BillingApp.Models.EFT_INFORMATION

@{
ViewBag.Title = "Create";
Layout = "../Shared/Layout2.cshtml";
}
@section featured2 {
<!DOCTYPE HTML>
<html><head><title>Combined App</title><meta name="description" content="website description">        <meta name="keywords" content="website keywords, website keywords"><meta http-equiv="content-type" content="text/html; charset=windows-1252"><link rel="stylesheet" type="text/css" href="../../Content/themes/style.css" title="style">
<div id="logo"><a href="@Url.Action("Index", "Home")">
<img src="@Url.Content("\\Content\\images\\logo.jpg")"/></a></div>
    <div class="hidden">
<script type="text/javascript">
    <!--//--><![CDATA[//><!--
var images = new Array()
function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
        images[i] = new Image()
        images[i].src = preload.arguments[i]
    }
}
preload(
    "\\Content\\images\\logo.jpg"
)
//--><!]]>
</script>
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head><body>
<div id="main">
<div id="header">
  <div id="logo">
    <div id="logo_text">
      <h1><a href="index.html"><span class="logo_colour"></span></a></h1>
      <h2></h2>
    </div>
  </div>
  <div id="menubar">
    <ul id="menu">
   <li>@Html.ActionLink("Home", "Index", "Home")</li>
   <li>@Html.ActionLink("About", "About", "Home")</li>
   <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
   <li>@Html.ActionLink("Help", "Help", "Home")</li> 
    </ul></div>
</div>
<div id="site_content">     
  <div id="content">

<style type="text/css">
p { display: inline }
p.msg {
    color: red;
    display: inline;
}
</style>
<h1>Welcome to the EFT Information Creation Page!</h1>
      <p>&#8202Please fill out the fields below to create a new entry and row of data.</p><br />    <br />

@using (Html.BeginForm())
{
@Html.ValidationSummary(true){
@*
    <div class="editor-label">
        @Html.LabelFor(model => model.EEID)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.EEID)
        @Html.ValidationMessageFor(model => model.EEID)
    </div>*@

    <div class="editor-label">
        @Html.LabelFor(model => model.TABLE_NUMBER1)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.TABLE_NUMBER1)
        @Html.ValidationMessageFor(model => model.TABLE_NUMBER1)
    </div>

     <div class="editor-label">
        @Html.LabelFor(model => model.PNTR_MAX)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PNTR_MAX)
        @Html.ValidationMessageFor(model => model.PNTR_MAX)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.BANK_ROUTING_NUMBER)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.BANK_ROUTING_NUMBER)
        @Html.ValidationMessageFor(model => model.BANK_ROUTING_NUMBER)
    </div>
<div class="editor-label">
@Html.LabelFor(model => model.EFFECTIVE_DATE1)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.EFFECTIVE_DATE1)
@Html.ValidationMessageFor(model => model.EFFECTIVE_DATE1)
</div>
<script>
 $(function () {
     $("#EFFECTIVE_DATE1").datepicker();
 });
</script>
    <div class="editor-label">
        @Html.LabelFor(model => model.TAX_ID)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.TAX_ID)
        @Html.ValidationMessageFor(model => model.TAX_ID)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.BANK_NAME)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.BANK_NAME)
        @Html.ValidationMessageFor(model => model.BANK_NAME)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.COMPANY_NAME1)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.COMPANY_NAME1)
        @Html.ValidationMessageFor(model => model.COMPANY_NAME1)
    </div><br />
    <p>
        <input type="submit" value=" Create "/>   

    </p><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div>
@Html.ActionLink("Back to List", "EFTInformation", "Billing")
</div>
}
<img class="logo" src="../../Content/images/logo.jpg">
<style type="text/css">
img.logo {
display: block;
margin-top: -24px;
margin-left: 351px;
margin-right: 351px;
height: 50px;
width: 135px;
}
</style>
      <style type="text/css">
#username {
    position: absolute;
    top:172px;
    left: calc(50% + 268px);
}
</style>
<div id="username"><p style="color: rgb(255,251,241);">Hello, @User.Identity.Name!</p></div>
</div></div>
<div id="content_footer"></div>
<div id="footer">
</div>
</body></html>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

更新:除日期选择器工作所需的元素外，注释掉了大部分 View 。它仍然无法正常工作。

@model BillingApp.Models.EFT_INFORMATION

@{
ViewBag.Title = "Create";
Layout = "../Shared/Layout2.cshtml";
}
@section featured2 {

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head><body>

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)


 <div class="editor-label">
        @Html.LabelFor(model => model.TABLE_NUMBER1)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.TABLE_NUMBER1)
        @Html.ValidationMessageFor(model => model.TABLE_NUMBER1)
    </div>

     <div class="editor-label">
        @Html.LabelFor(model => model.PNTR_MAX)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PNTR_MAX)
        @Html.ValidationMessageFor(model => model.PNTR_MAX)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.BANK_ROUTING_NUMBER)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.BANK_ROUTING_NUMBER)
        @Html.ValidationMessageFor(model => model.BANK_ROUTING_NUMBER)
    </div>
<div class="editor-label">
@Html.LabelFor(model => model.EFFECTIVE_DATE1)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.EFFECTIVE_DATE1)
@Html.ValidationMessageFor(model => model.EFFECTIVE_DATE1) 
</div>
<script>
 $(function () {
     $("#EFFECTIVE_DATE1").datepicker({ format: 'yyyy-MM-dd' });
 });
</script>
    <div class="editor-label">
        @Html.LabelFor(model => model.TAX_ID)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.TAX_ID)
        @Html.ValidationMessageFor(model => model.TAX_ID)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.BANK_NAME)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.BANK_NAME)
        @Html.ValidationMessageFor(model => model.BANK_NAME)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.COMPANY_NAME1)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.COMPANY_NAME1)
        @Html.ValidationMessageFor(model => model.COMPANY_NAME1)
    </div><br />
    <p>
        <input type="submit" value=" Create "/>   

    </p><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div>
@Html.ActionLink("Back to List", "EFTInformation", "Billing")
</div>
}
}
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

最佳答案

你的 HEAD 配置错误 -

<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<head/>  <----- This line

 <div class="editor-label">
        @Html.LabelFor(model => model.EFFECTIVE_DATE1)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.EFFECTIVE_DATE1)
        @Html.ValidationMessageFor(model => model.EFFECTIVE_DATE1)
    </div>
 <script>
     $(function () {
         $("#EFFECTIVE_DATE1").datepicker();
     });
</script>

那一行应该是</head>

我的工作代码

索引.cshtml

@model JqueryUIProject.Models.FakeModel

@{
    ViewBag.Title = "title";
}
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>

<div class="editor-label">
    @Html.LabelFor(model => model.EFFECTIVE_DATE1)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.EFFECTIVE_DATE1)
    @Html.ValidationMessageFor(model => model.EFFECTIVE_DATE1)
</div>
<script>
    $(function () {
        $("#EFFECTIVE_DATE1").datepicker();
    });
</script>

假模型.cs

using System;

namespace JqueryUIProject.Models
{
    public class FakeModel
    {
        public DateTime EFFECTIVE_DATE1;
    }
}

HomeController.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Linq;
using System.Web.Mvc;

namespace JqueryUIProject.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
    }
}

关于javascript - 让 Datepicker 在 cshtml 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26361876/

文章推荐： javascript __proto__ 不会产生与 "prototype"继承相同的效果

文章推荐： php - ExtJS 网格表单与 MySQL 中的文档

文章推荐： mysql - 不同的 MySQL 结果

文章推荐：数学库的 Javascript 精度

angularjs - Angular DatePicker - 多个指令 > [datepicker, datepicker]
我正在尝试使用 720Kb 日期选择器。 https://github.com/720kb/angular-datepicker 使用简单示例时: 我收到打击错误: angular.js:1
datepicker - 没有初始值的react-datepicker
我开始使用react-datepicker组件。 https://github.com/Hacker0x01/react-datepicker 我运行了该示例，现在我想对其进行调整，使其没有初始值。示
angularjs - Angular-ui datepicker datepicker 的初始状态未按 datepicker-popup 格式化
我正在使用 Angular-ui 日期选择器，除了日期选择器的初始状态外，一切实际上都工作正常。我选择日期后，看起来不错。见下文: 初始状态在选择器中选择日期后所以，显然我在第一种情况下得到了日期
javascript - 如何通过 jquery datepicker 或 bootstrap datepicker 设置 hijri datepicker？
我需要为回历日期设置日期选择器。我可以使用 jquery datepicker 或 bootstrap datepicker。但是我写了这段代码
javascript - 如何在 jquery UI datepicker 中创建日期范围，而无需在主 datepicker 函数内再次调用 datepicker？
在选择范围时，我遇到了 jquery UI datepicker 的一个奇怪问题。在提出问题之前，我正在研究许多其他人编写的代码。他们以优化的顺序包含了 jquery 工具和 UI，因此所有功能都可以
datepicker - 剑道 DatePicker 最大日期问题
我有两个剑道 DatePickers 来选择工作的开始和结束日期。作业由多个任务组成，其中包含自己的完成日期(任务在网格中列出，每条记录使用 kendo DatePicker 选择完成日期) 当用户设
datepicker - mat datepicker angular6中的周选择
我想将功能添加到 Material 日期选择器，以便能够选择周.. 因此，当我从一行中选择一个日期时，我希望它输出从一周开始到一周结束的日期范围。我之前在常规 jquery 日历上这样做过--检查照
datepicker - 修复来自 DatePicker 的数百行警告重新布局约束
在 SwiftUI 中使用新的 (iOS 14) DatePicker，它按预期工作并且在模拟器和设备上看起来很好，但是一旦日历弹出，我会在输出窗口中收到几行警告。这有点烦人! 虽然日志贴在下面，但看
datepicker - 奏鸣曲管理包 : DatePicker range
我将如何创建 doctrine_orm_datetime_range使用 jQuery UI 日期选择器的 Sonata Admin Bundle 中的过滤器？我尝试了以下方法，但不起作用: pro
datepicker - 如何设置 bootstrap-datepicker-rails？
有人知道如何设置 gem bootstrap-datepicker-rails 吗？我按照 http://rubydoc.info/gems/bootstrap-datepicker-rails/0.
datepicker - Yii2 Kartik DatePicker - 日期不应超过当前日期
在 kartik DatePicker Yii2 中有没有办法 - 我可以禁用大于当前日期的日期？例如:如果今天是 2016 年 3 月 14 日，则应禁用 2016 年 3 月 15 日的日历日期
datepicker - SwiftUI:DatePicker 是否可以在当前的其他时区显示日期/时间？
在 UIDatePicker 我们可以做这样的事情 datePicker.timeZone = TimeZone(secondsFromGMT: 5*60*60) 为了指定日期选择器的时区。但是如何
datepicker - 在 FullCalendar/自定义按钮单击中添加 datePicker
我在 FullCalendar ( http://www.eyecon.ro/datepicker/ ) 页面正下方添加了一个 datePicker ( http://fullcalendar.io
datepicker - Vaadin-Datepicker 最小/最大限制不起作用
我在一个 Polymer 项目中有两个 Vaadin-datepickers。一个有开始日期，一个有结束日期。我想确保结束日期总是在开始日期之后。我阅读了 API 文档，他们说您可以使用 min ma
datepicker - Angular 6的阿拉伯语/Hijri DatePicker
我正在Angular 6中搜索Datepicker，它可以显示基于回历日历的阿拉伯日期。似乎找不到一个。是否有可用的东西，或者我们需要从头开始构建它。最佳答案 Ng bootstrap或angul
datepicker - JavaFX8 有没有一种方法可以在代码中选择 DatePicker 中的文本而无需单击它？
JavaFX8 中是否有一种方法可以从 Java 代码中选择 DatePicker 中的日期(作为文本)？我想以这样一种方式激活带有 DatePicker 的控件，用户可以在不使用鼠标的情况下编辑日期
datepicker - Vaadin-Datepicker 最小/最大限制不起作用
我在一个 Polymer 项目中有两个 Vaadin-datepickers。一个有开始日期，一个有结束日期。我想确保结束日期总是在开始日期之后。我阅读了 API 文档，他们说您可以使用 min ma
Jquery datepicker 验证不起作用(不通过编辑文本框使用 datepicker)
我正在尝试验证datepicker，因为startDate应始终小于EndDate。如果我手动更改日期，则 StartDate 有效，但 EndDate 无效。我的JavaScript代码: $(d
javascript - datepicker:显示数据库中的值但允许用户更改；页面上有多个 datepicker()
我是 jquery 和 javascript 的菜鸟。因此，虽然我看过很多解决我的问题的 SO 帖子，但我无法将各种解决方案“组装”成适合我的东西。我的上下文:查询结果显示在表单中。在每一行中，其中
c# - 从 DatePicker DatePicked 事件设置按钮内容
我正在开发 Windows Phone 8.1 应用程序。我正在尝试使用 DatePickerFlyout 但没有取得适当的成功。我正在选择日期并尝试用选定的日期设置按钮内容，但它没有设置。当我调试以

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 让 Datepicker 在 cshtml 中工作

我的工作代码