Javascript 让Datepicker在cshtml中工作
我想知道为什么datepicker不适合我。这是在cshtml视图中。我正在为datepicker函数提供正确的id,但它不起作用 页面来源:Javascript 让Datepicker在cshtml中工作,javascript,jquery,razor,Javascript,Jquery,Razor,我想知道为什么datepicker不适合我。这是在cshtml视图中。我正在为datepicker函数提供正确的id,但它不起作用 页面来源: <div class="editor-label"> <label for="EFFECTIVE_DATE1">EFFECTIVE_DATE1</label> </div> <div class="editor-field"> <input
<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>
生效日期1
$(函数(){
$(“#生效日期1”).datepicker();
});
视图代码
<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>
@LabelFor(model=>model.EFFECTIVE_DATE1)
@EditorFor(model=>model.EFFECTIVE_DATE1)
@Html.ValidationMessageFor(model=>model.EFFECTIVE_DATE1)
$(函数(){
$(“#生效日期1”).datepicker();
});
更新:这是整个页面
@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> Please 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")
}
@model BillingApp.Models.EFT\u信息
@{
ViewBag.Title=“创建”;
Layout=“../Shared/Layout2.cshtml”;
}
@截面特征2{
组合应用程序
- @ActionLink(“主页”、“索引”、“主页”)
- @ActionLink(“关于”、“关于”、“主页”)
- @ActionLink(“联系人”、“联系人”、“主页”)
- @Html.ActionLink(“帮助”、“帮助”、“主页”)
p{display:inline}
p、 味精{
颜色:红色;
显示:内联;
}
欢迎来到EFT信息创建页面!
请填写以下字段以创建新的条目和数据行。
@使用(Html.BeginForm())
{
@Html.ValidationSummary(true){
@*
@LabelFor(model=>model.EEID)
@EditorFor(model=>model.EEID)
@Html.ValidationMessageFor(model=>model.EEID)
*@
@LabelFor(model=>model.TABLE_NUMBER1)
@EditorFor(model=>model.TABLE_NUMBER1)
@Html.ValidationMessageFor(model=>model.TABLE_NUMBER1)
@LabelFor(model=>model.PNTR_MAX)
@EditorFor(model=>model.PNTR_MAX)
@Html.ValidationMessageFor(model=>model.PNTR_MAX)
@LabelFor(model=>model.BANK\u路由号)
@EditorFor(model=>model.BANK\u路由号)
@Html.ValidationMessageFor(model=>model.BANK\u路由号)
@LabelFor(model=>model.EFFECTIVE_DATE1)
@EditorFor(model=>model.EFFECTIVE_DATE1)
@Html.ValidationMessageFor(model=>model.EFFECTIVE_DATE1)
$(函数(){
$(“#生效日期1”).datepicker();
});
@LabelFor(model=>model.TAX\u ID)
@EditorFor(model=>model.TAX\u ID)
@Html.ValidationMessageFor(model=>model.TAX\u ID)
@LabelFor(model=>model.BANK_NAME)
@EditorFor(model=>model.BANK\u NAME)
@Html.ValidationMessageFor(model=>model.BANK_NAME)
@Html.LabelFor(model=>model.COMPANY_NAME1)
@Html.EditorFor(model=>model.COMPANY_NAME1)
@Html.ValidationMessageFor(model=>model.COMPANY_NAME1)
@ActionLink(“返回列表”、“电子信息”、“账单”)
}
img.logo{
显示:块;
利润上限:-24px;
左边距:351px;
右边距:351px;
高度:50px;
宽度:135px;
}
#用户名{
位置:绝对位置;
顶部:172px;
左:计算(50%+268px);
}
你好,@User.Identity.Name
}
@节脚本{
@Scripts.Render(“~/bundles/jqueryval”)
}
更新:注释掉了除datepicker工作所需的元素之外的大部分视图。它仍然不工作
@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")
}
@model BillingApp.Models.EFT\u信息
@{
ViewBag.Title=“创建”;
Layout=“../Shared/Layout2.cshtml”;
}
@截面特征2{
@使用(Html.BeginForm())
{
@Html.ValidationSummary(true)
@LabelFor(model=>model.TABLE_NUMBER1)
@EditorFor(model=>model.TABLE_NUMBER1)
@Html.ValidationMessageFor(model=>model.TABLE_NUMBER1)
@LabelFor(model=>model.PNTR_MAX)
@EditorFor(model=>model.PNTR_MAX)
@Html.ValidationMessageFor(model=>model.PNTR_MAX)
@LabelFor(model=>model.BANK\u路由号)
@EditorFor(model=>model.BANK\u路由号)
@Html.ValidationMessageFor(model=>model.BANK\u路由号)
@LabelFor(model=>model.EFFECTIVE_DATE1)
@EditorFor(model=>model.EFFECTIVE_DATE1)
@Html.ValidationMessageFor(model=>model.EFFECTIVE_DATE1)
$(函数(){
$(“#生效日期1”).datepicker({格式:'yyyy-MM-dd'});
});
@LabelFor(model=>model.TAX\u ID)
@EditorFor(model=>model.TAX\u ID)
@Html.ValidationMessageFor(model=>model.TAX\u ID)
@LabelFor(model=>model.BANK_NAME)
@EditorFor(model=>model.BANK\u NAME)
@Html.ValidationMessageFor(model=>model.BANK_NAME)
@Html.LabelFor(model=>model.COMPANY_NAME1)
@Html.EditorFor(model=>model.COMPANY_NAME1)
@Html.ValidationMessageFor(model=>model.COMPANY_NAME1)
@ActionLink(“返回列表”、“电子信息”、“账单”)
}
}
}
@节脚本{
@Scripts.Render(“~/bundles/jqueryval”)
}
*您可以启动jquery单击功能*
$("input[type=text]").click(function() {
$(this).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
});
});
OR
$("#EFFECTIVE_DATE1").click(function() {
$(this).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
});
});
你的脑袋被弄错了-
<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>
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();
}
}
}
Index.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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.5.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
$(函数(){
$(“#DOB”)。单击(函数(){
$(此).datepicker({
日期格式:“dd-mm-yy”,
变化月:对,
变化年:对
}).focus();
});
});
@LabelFor(modeleItem=>Model.First().DOB,htmlAttributes:new{@class=“controllabel col-md-2”})
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.5.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function () {
$("#DOB").click(function () {
$(this).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true
}).focus();
});
});
</script>
<div class="form-group">
@Html.LabelFor(modelItem => Model.First().DOB, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-5">
@Html.TextBoxFor(modelItem => Model.First().DOB, new { @Value = Model.First().DOB.ToString("dd/MM/yyyy"), @class = "form-control", required = "required" })
@Html.ValidationMessageFor(modelItem => Model.First().DOB, "", new { @class = "text-danger" })
</div>
</div>