ASP.NET COMPLEX 脚本问题；如何组合 TagList 和 DatePicker？答案

【问题标题】：ASP.NET COMPLEX Script problem; How can I make a combination of TagList with DatePicker?ASP.NET COMPLEX 脚本问题；如何组合 TagList 和 DatePicker？
【发布时间】：2020-12-26 04:09:58
【问题描述】：

嗯，我想在我的 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 字段的组合。

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

因此，最终，这将生成一组日期，我点击了这些日期，这些日期被收集在提到的字段中。

实际上我想要的是，这些数据将作为 DateTimes 列表传递给控制器，因此我的代码对所选日期执行某些操作，即从视图加载的 List 元素。

我还希望这包括额外的功能，让我从日历中单击一周的角落，这会自动选择构成该周的 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？

【问题讨论】：

我认为没有人愿意阅读整个问题。让您的问题尽可能简短明了。
嗨，我的回答是否帮助您解决了您的问题？如果可以，请您接受作为回答吗？如果没有，请您跟进让我知道吗？参考：How to accept as answer.Thanks .
@Rena 嘿，非常感谢，这真的帮助了我，这正是我所需要的！抱歉我没早点回答，我很忙。

标签： javascript asp.net-mvc asp.net-core razor datepicker

【解决方案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/

结果：

【讨论】：