Using jQuery datepicker in asp.net mvc default value is not null

Question

I want to add Jquery date picker to Form using asp.net mvc.

I get the datepicker but in the Form I have as default this value

And I want a date calendar to be spanish language instead of

Please help me in using date picker with jquery.

My code as follows.

View

@Html.EditorFor(m => m.SpanishDate, new { htmlAttributes = new { @class = "textarea", placeholder = "Spanish Date", @readonly = "true" } })
@Html.ValidationMessageFor(m => m.SpanishDate, "", new { @class = "text-danger" })

@section Scripts {

    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/cssjqryUi")

    <script type="text/javascript">
        $(document).ready(function () {
            $('input[type=datetime]').datepicker({
                dateFormat: "dd/mm/yy",
                changeMonth: true,
                changeYear: true,
                yearRange: "-2:+0"
            });
        });
    </script>
}

Models

public class PersonModel
{
    [Required]
    [Display(Name = "Spanish date")]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime SpanishDate { get; set; }
}

BundleConfig

//Create bundel for jQueryUI  
//js  
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(  
          "~/Scripts/jquery-ui-{version}.js"));  
//css  
bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include(  
       "~/Content/jquery-ui.css"));

UPDATE 3 >>> The definitive solution

New complete section Scripts View

@section Scripts {

    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/cssjqryUi")

    <script type="text/javascript">
        jQuery(function ($) {

            $.datepicker.regional['es'] = {
                 closeText: 'Cerrar',
                 prevText: '<Ant',
                 nextText: 'Sig>',
                 currentText: 'Hoy',
                 monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                 monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
                 dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                 dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
                 dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
                 weekHeader: 'Sm',
                 dateFormat: 'yy-mm-dd',
                 firstDay: 1,
                 isRTL: false,
                 showMonthAfterYear: false,
                 yearSuffix: ''
            };
            $.datepicker.setDefaults($.datepicker.regional['es']);
        });

        var options = $.extend({},
            $.datepicker.regional["es"], {
            dateFormat: "mm/dd/yy",
            changeMonth: true,
            changeYear: true,
            yearRange: "-2:+0",
            highlightWeek: true,
            maxDate: 0
        }
        );
        $("# SpanishDate").datepicker(options);
    </script>
}

UPDATE 2

Complete View

@model MVCDemo.Models.PersonModel

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Wbform</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js">
    </script>

</head>
<body>

    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        @Html.AntiForgeryToken()
        <div>
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td class="textarea">Spanish Date</td>
                    <td>

                        @Html.EditorFor(m => m.SpanishDate, "{0:dd-MM-yyyy}", new { htmlAttributes = new { @class = "textarea", placeholder = "Spanish Date", @readonly = "true" } })
                        @Html.ValidationMessageFor(m => m.SpanishDate, "", new { @class = "text-danger" })
                    </td>
                </tr>
            </table>
            <br />
            <hr class="new3">
            <div class="form-group">
                <div class="col-md-offset-5 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    }
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

    @section Scripts {

        @Scripts.Render("~/bundles/jqueryui")
        @Styles.Render("~/Content/cssjqryUi")

        <script type="text/javascript">

            $.datepicker.setDefaults($.datepicker.regional["es"]);
            var options = $.extend({},
                $.datepicker.regional["es"], {
                dateFormat: "mm/dd/yy",
                changeMonth: true,
                changeYear: true,
                yearRange: "-2:+0",
                highlightWeek: true, maxDate: 0
            } 
            );
            $("#SpanishDate").datepicker(options);

        </script>
    }
</body>
</html>

Models

public class PersonModel
{
    [Required]
    [Display(Name = "Spanish Date")]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime? SpanishDate { get; set; }
}

UPDATE

@section Scripts {

    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/cssjqryUi")

    <script type="text/javascript">
        $(document).ready(function () {
            $("#datepicker").datepicker($.datepicker.regional["es"]);
            $("#SpanishDate").datepicker({
                dateFormat: "dd/mm/yy",
                changeMonth: true,
                changeYear: true,
                yearRange: "-2:+0"
            });
        });
    </script>
}

Sina Riani · Accepted Answer · 2020-11-22 12:59:02Z

You can download and include Spanish localization file to your code

<script type="text/javascript" src="/scripts/jquery.ui.datepicker-es.js"></script>

or use this cdn:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>

and the datepicker code is:

var options = $.extend({},   
            $.datepicker.regional["es"], {  
               dateFormat: "mm/dd/yy",
              changeMonth: true,
              changeYear: true,
              yearRange: "-2:+0",
              highlightWeek: true, maxDate: 0
            } // your custom options    
        );  

        $("#SpanishDate").datepicker(options);

You can set the default language option for DatePickers:

$.datepicker.setDefaults($.datepicker.regional["es"]);

and for the empty default value of DatePicker make SpanishDate property nullable in PersonModel as follow:

public class PersonModel
{
    [Required]
    [Display(Name = "Spanish date")]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime? SpanishDate { get; set; }
}

hanks for help, please see UPDATE 2 in the question. The popup calendar is always ENGLISH — Iter Lsic Iealf, Commented Nov 22, 2020 at 13:24

Dharman · Accepted Answer · 2020-11-22 10:55:58Z

0

It looks like you need to focus on few items here:

The element name is simply would be "SpanishDate" so you can use like below to convert the text area to Jquery datepicker

$("#SpanishDate").datepicker();
You need to set the value to your server-side property (SpanishDate) will become the default value
To localize please use below format

$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );

You can find more details here: https://jqueryui.com/datepicker/#default

edited Nov 22, 2020 at 10:55

Dharman♦

33.5k27 gold badges101 silver badges149 bronze badges

answered Nov 22, 2020 at 10:50

VoidA313

5464 silver badges10 bronze badges

thanks for help, please see UPDATE in the question
– Iter Lsic Iealf
Commented Nov 22, 2020 at 11:37

Add a comment |

Collectives™ on Stack Overflow

Using jQuery datepicker in asp.net mvc default value is not null

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related