CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3jquery-ui
Zoners
Zoners

Reputation: 53

The Jquery-ui datepicker custom display "the field must be a valid date"

I have a problem when i use a required field with a datepicker custom. If I click on the next button, the field custom decision date display "the field must be a valid date". If I change the format date of the datepicker like this:"dateFormat: 'd/m/yy'" it's work but I would like display only the month and the years and not the days. Thanks for your help.

My view is :

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

My Partial view is:

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

My model is:

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

    }
}

UPDATE

The solution on this link: jQuery UI DatePicker to show month year only with the post of "Erik Polder" work but if i change the format date "yy-mm" by "mm-/yy) i have the same error :/

UPDATE2 I found the solution , I add a script so that it works Script:jquery.ui.datepicker-fr.js

Upvotes: 1

Views: 3076

Answers (1)

Shahbaz Chishty
Shahbaz Chishty

Reputation: 502

Try...

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

Upvotes: 0

Related Questions