ASP.NET 复杂的脚本问题；如何将 TagList 与 DatePicker 结合使用？

Question

好吧，我希望在我的 ASP.NET 核心应用程序中有一些特别的东西，我知道它需要一个非常自定义和复杂的脚本才能做到这一点。

假设我有一个像这样的模型代码，它有一个日期时间列表：

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 字段的组合。

基本上，它加载日历并允许我单击日期，就像 Asp.Net 中默认提供的 DatePicker 一样，但我希望在单击日期时使用它，而不是简单地获取一个特定的日期并将其分配给该字段，我希望将所述日期添加为 TagList 字段中的一个元素，并且每次我单击新日期时，都将新日期添加为标签列表中的新标签，如果我点击标签中的 X，我会从组中删除该标签。

因此，最终，这将生成一组我单击的日期，这些日期聚集在上述字段中。

我想要的是有效的，该数据将作为 DateTimes 列表传递给控制器，因此我的代码对选定的日期执行某些操作，这是一个从视图加载的列表元素。

我还希望这包括额外的功能，让我点击日历中一周的一角，这会自动选择构成该周的 7 天，将这 7 天加载到 TagList 中, 如我图片底部所示。

作为最后的细节，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 的例子？

Answer 1

我认为您可以将 MultiDatesPicker 用于 jQuery UI:

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

结果：

ASP.NET 复杂的脚本问题；如何将 TagList 与 DatePicker 结合使用？

ASP.NET COMPLEX Script problem; How can I make a combination of TagList with DatePicker?

javascript

asp.net-mvc

datepicker

razor

asp.net-core