让Datepicker在cshtml中工作

时间：2014-10-14 13:19:02

标签： javascript jquery razor

我正在试图找出为什么datepicker不适合我。这是一个cshtml视图。我正在为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")
}

更新：除了使用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")
}

3 个答案:

答案 0 :(得分：2)

您的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>

我的工作代码

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>

FakeModel.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();
        }
    }
}

答案 1 :(得分：2)

Index.cshtml 

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

答案 2 :(得分：-2)

*你启动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
    });
});
相关问题
最新问题