Jquery-ui datepicker自定义显示“该字段必须是有效日期”

时间:2012-03-28 17:29:29

标签: jquery asp.net-mvc asp.net-mvc-3 jquery-ui

当我使用带有datepicker自定义的必填字段时,我遇到了问题。 如果单击下一个按钮,字段自定义决策日期将显示“该字段必须是有效日期”。 如果我像这样更改日期选择器的格式日期:“dateFormat:'d / m / yy'”它的工作,但我想只显示月份和年份,而不是日期。 谢谢你的帮助。

我的观点是:

    <script>
        $(document).ready(function () {
            $(".DatepickerMonthYears").datepicker({
                    changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'm/yy',
                required: false,
                onClose: function(dateText, inst) { 
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            });


            $(".DatepickerMonthYears").focus(function () {
                $(".ui-datepicker-calendar").hide();
                $("#ui-datepicker-div").position({
                    my: "center top",
                    at: "center bottom",
                    of: $(this)
                });
            });
            });
    </script>

@using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { id = "FormAction" }))
{
@Html.ValidationSummary(true)
<fieldset>
<legend>Create </legend>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Step1</a></li>

    </ul>
    <div id="tabs-1">
        @Html.Partial("Step1", Model)
    </div>

    <div class="buttonNextPrevious">
        <a id="previous" class="linkLikeButton" href="#">Previous Step</a>
        <a id="next" class="linkLikeButton" href="#">Next Step</a>
    </div>
</div>


</fieldset>    
}

我的部分观点是:

@model SiteWebEmpty.Models.ArticleRequest.CreateArticle.DisplayCreateAllStep

<fieldset>
<legend>Step 1</legend>
                @Html.LabelFor(model => model.Step1.CustomerDecisionDate, new { @class = "LabelStep1" })
                @Html.TextBoxFor(step1 => step1.Step1.CustomerDecisionDate, new { @class = "DatepickerMonthYears" })
                @Html.ValidationMessageFor(model => model.Step1.CustomerDecisionDate)
                <br />
</fieldset>

我的模特是:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;
using SiteWebEmpty.Models.AttributValidation;


namespace SiteWebEmpty.Models.Step1
{
    public class Step1
    {
        [Display(Name = "Customer Decision Date")]
        public DateTime CustomerDecisionDate { get; set; }

    }
}

更新

此链接上的解决方案: jQuery UI DatePicker to show month year only 用“Erik Polder”的帖子工作但是如果我将格式日期“yy-mm”改为“mm- / yy”我也有同样的错误:/

UPDATE2 我找到了解决方案,我添加了一个脚本以便它可以工作 脚本:jquery.ui.datepicker-fr.js

1 个答案:

答案 0 :(得分:0)

...试

$('.DatepickerMonthYears').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });