Использование jQuery datepicker в asp.net значение по умолчанию mvc не равно null

ProgramBox

Использование jQuery datepicker в asp.net значение по умолчанию mvc не равно null

Post author:admin
Запись опубликована:29 августа, 2022
Post category:Вопросы по программированию

#jquery #asp.net-mvc #jquery-ui-datepicker

#jquery #asp.net-mvc #jquery-пользовательский интерфейс-выбор даты

Вопрос:

Я хочу добавить Jquery date picker в форму с помощью asp.net mvc .

Я получаю datepicker , но в форме, которую я использую по умолчанию, это значение

И я хочу, чтобы календарь дат был на испанском языке, а не

Пожалуйста, помогите мне в использовании средства выбора даты с помощью jquery.

Мой код выглядит следующим образом.

Вид

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

Модели

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

Настройка пакета

 //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"));

ОБНОВЛЕНИЕ 3 >>> Окончательное решение

Новый полный просмотр сценариев раздела

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

ОБНОВЛЕНИЕ 2

Полное представление

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

Модели

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

Обновить

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

Ответ №1:

Вы можете загрузить и включить файл локализации на испанском языке в свой код

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

или используйте этот cdn:

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

и код выбора даты таков:

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

Вы можете установить параметр языка по умолчанию для указателей даты:

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

а для пустого значения DatePicker по умолчанию сделайте свойство SpanishDate обнуляемым PersonModel следующим образом:

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

Ответ №2:

Похоже, здесь вам нужно сосредоточиться на нескольких пунктах:

Имя элемента просто будет «SpanishDate», поэтому вы можете использовать, как показано ниже, для преобразования текстовой области в Jquery datepicker
$(«#SpanishDate»).datepicker();
Вам необходимо установить значение для вашего свойства на стороне сервера (SpanishDate), которое станет значением по умолчанию
Для локализации, пожалуйста, используйте следующий формат
$( «#datepicker» ).datepicker( $.datepicker.regional[ «fr» ] );

Вы можете найти более подробную информацию здесь: https://jqueryui.com/datepicker/#default