Проблема со сценарием ASP.NET COMPLEX; Как я могу сделать комбинацию TagList с DatePicker?

Ну, я хотел бы иметь что-то особенное в своем приложении ASP.NET Core, для которого, как я знаю, требуется очень специальный и сложный сценарий.

Допустим, у меня есть код модели, подобный этому, в котором есть список DateTime:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace C.Models
{
    public class Cdates
    {
        [key]
        public int Id { get; set; }
        [DataType(DataType.Date)]
        public List<DateTime> dataTims { get; set; }
    }
} 

И, на мой взгляд, я хотел бы иметь что-то подобное в качестве интерфейса:

https://i.stack.imgur.com/o20VD.png

Итак, я попытаюсь объяснить картину. Я хотел бы иметь что-то похожее на комбинацию DatePicker и поля TagList.

По сути, он загружает календарь и позволяет мне нажимать на дни, точно так же, как DatePicker, который поставляется по умолчанию в Asp.Net, но я хочу, чтобы, когда я нажимаю на дату, вместо того, чтобы просто брать конкретную дату и назначать ее поле, я хотел бы, чтобы это добавляло указанную дату в качестве элемента в поле TagList, и чтобы каждый раз, когда я нажимаю на новую дату, это добавляло новую дату в качестве нового тега в список тегов, и если я нажимаю на X из тега, я удаляю указанный тег из группы.

Итак, в конечном итоге это сгенерирует группу дат, на которые я нажал, которые собраны в указанном поле.

И я хотел бы, чтобы эти данные были переданы в виде списка DateTimes в контроллер, поэтому мой код что-то делает с выбранными датами, элементом списка, который загружается из представления.

Я также хотел бы, чтобы это включало дополнительную функцию, позволяющую мне щелкнуть угол недели в календаре, и это автоматически выбирает 7 дней, составляющих эту неделю, загружая эти 7 дней в TagList, как показано на внизу моей картинки.

И в качестве последней детали, поле для списка тегов относительно высокое, так что это не выглядит плохо, если я загружу туда 31 день.

Я знаю, что я ищу, это довольно сложно и специфично, но можно ли это сделать с помощью кода скрипта в представлении, верно? Один единственный:

(document).ready(function () {

        var select = $('select[multiple]');
        var options = select.find('option');

        var div = $('<div />').addClass('selectMultiple');
        var active = $('<div />');
        var list = $('<ul />');
        var placeholder = select.data('placeholder');

        var span = $('<span />').text(placeholder).appendTo(active);

        options.each(function () {
            var text = $(this).text();
            if ($(this).is(':selected')) {
                active.append($('<a />').html('<em>' + text + '</em><i></i>'));
                span.addClass('hide');
            } else {
                list.append($('<li />').html(text));
            }
        ----etc

И помимо скрипта, второстепенный вопрос: должен ли я включать какой-либо специальный код в контроллер, чтобы это работало?

И хорошо, я знаю, что, возможно, я прошу сделать что-то очень сложное, но я понятия не имею, как вообще начать писать код сценария, который позволяет это сделать, но я ничего не теряю, обращаясь за помощью. Или, может быть, есть какой-то пример чего-то очень похожего, который смешивает DatePickers и TagList?

🤔 А знаете ли вы, что...
JavaScript поддерживает объектно-ориентированное программирование.


62
1

Ответ:

Решено

Я думаю, вы могли бы использовать MultiDatesPicker для пользовательского интерфейса jQuery:

<form asp-action = "Test" method = "post">
    <input id = "mdp-demo" name = "datelist">
    <input type = "submit" value = "create"/>
</form>
@section Scripts
{
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multidatespicker/1.6.6/jquery-ui.multidatespicker.js"></script>
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multidatespicker/1.6.6/jquery-ui.multidatespicker.css" />
    <script>
        $('#mdp-demo').multiDatesPicker();
    </script>
}

Серверная часть:

[HttpPost]
public ActionResult Test(string datelist)
{
    string[] datestrs = datelist.Split(new char[] { ',' });
    return View();
}

Ссылка:

https://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/

Результат: