C#•3y ago

❔ Jquery UI Datepicker with ASP.NET MVC

God has this problem been a headache...
I have this code, which is Creating a datepicker element.

@using ChartJSCore.Models;
@using ChartDataStructures;
@model UpToDate

@{
    ViewData["Title"] = "Index";

    Dictionary<string, List<Chart>> identifierToCharts = (Dictionary<string, List<Chart>>)ViewData["PatternToCharts"];
    ChartData firstData = identifierToCharts.Values.First().First().ChartData;
}
<h2>@firstData.symbol.ToUpper()</h2>
@using (Html.BeginForm())
{
    @Html.TextBoxFor(model => model.Date, new {
    @class = "datePicker",
    @Value = Model.Date.ToString("yyyy-MM-dd")
    })
}

@section DatePicker{
    <script type="text/javascript">
        $(function () {
            var dateString = "@Model.Date.ToString("yyyy-MM-dd")";
            var defaultDate = new Date(dateString);
            $(".datePicker").datepicker({
                changeMonth: true,
                changeYear: true,
                defaultDate: defaultDate
            });
        });
    </script>
}

@using ChartJSCore.Models;
@using ChartDataStructures;
@model UpToDate

@{
    ViewData["Title"] = "Index";

    Dictionary<string, List<Chart>> identifierToCharts = (Dictionary<string, List<Chart>>)ViewData["PatternToCharts"];
    ChartData firstData = identifierToCharts.Values.First().First().ChartData;
}
<h2>@firstData.symbol.ToUpper()</h2>
@using (Html.BeginForm())
{
    @Html.TextBoxFor(model => model.Date, new {
    @class = "datePicker",
    @Value = Model.Date.ToString("yyyy-MM-dd")
    })
}

@section DatePicker{
    <script type="text/javascript">
        $(function () {
            var dateString = "@Model.Date.ToString("yyyy-MM-dd")";
            var defaultDate = new Date(dateString);
            $(".datePicker").datepicker({
                changeMonth: true,
                changeYear: true,
                defaultDate: defaultDate
            });
        });
    </script>
}

@using ChartJSCore.Models;
@using ChartDataStructures;
@model UpToDate

@{
    ViewData["Title"] = "Index";

    Dictionary<string, List<Chart>> identifierToCharts = (Dictionary<string, List<Chart>>)ViewData["PatternToCharts"];
    ChartData firstData = identifierToCharts.Values.First().First().ChartData;
}
<h2>@firstData.symbol.ToUpper()</h2>
@using (Html.BeginForm())
{
    @Html.TextBoxFor(model => model.Date, new {
    @class = "datePicker",
    @Value = Model.Date.ToString("yyyy-MM-dd")
    })
}

@section DatePicker{
    <script type="text/javascript">
        $(function () {
            var dateString = "@Model.Date.ToString("yyyy-MM-dd")";
            var defaultDate = new Date(dateString);
            $(".datePicker").datepicker({
                changeMonth: true,
                changeYear: true,
                defaultDate: defaultDate
            });
        });
    </script>
}

@using ChartJSCore.Models;
@using ChartDataStructures;
@model UpToDate

@{
    ViewData["Title"] = "Index";

    Dictionary<string, List<Chart>> identifierToCharts = (Dictionary<string, List<Chart>>)ViewData["PatternToCharts"];
    ChartData firstData = identifierToCharts.Values.First().First().ChartData;
}
<h2>@firstData.symbol.ToUpper()</h2>
@using (Html.BeginForm())
{
    @Html.TextBoxFor(model => model.Date, new {
    @class = "datePicker",
    @Value = Model.Date.ToString("yyyy-MM-dd")
    })
}

@section DatePicker{
    <script type="text/javascript">
        $(function () {
            var dateString = "@Model.Date.ToString("yyyy-MM-dd")";
            var defaultDate = new Date(dateString);
            $(".datePicker").datepicker({
                changeMonth: true,
                changeYear: true,
                defaultDate: defaultDate
            });
        });
    </script>
}

Heres the UpToDate model:

namespace ChartJSCore.Demo.Models
{
    public class UpToDate
    {
        public DateTime Date { get; set; }
    }
}

namespace ChartJSCore.Demo.Models
{
    public class UpToDate
    {
        public DateTime Date { get; set; }
    }
}

namespace ChartJSCore.Demo.Models
{
    public class UpToDate
    {
        public DateTime Date { get; set; }
    }
}

namespace ChartJSCore.Demo.Models
{
    public class UpToDate
    {
        public DateTime Date { get; set; }
    }
}

I am importing the relevant jquery scripts in my layout.cshtml file like so:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ChartJSCore.Demo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/ChartJSCore.Demo.styles.css" asp-append-version="true" />
    <link href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
    @await RenderSectionAsync("Head", required: false)
</head>
@RenderSection("DatePicker", required: true)

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ChartJSCore.Demo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/ChartJSCore.Demo.styles.css" asp-append-version="true" />
    <link href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
    @await RenderSectionAsync("Head", required: false)
</head>
@RenderSection("DatePicker", required: true)

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ChartJSCore.Demo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/ChartJSCore.Demo.styles.css" asp-append-version="true" />
    <link href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
    @await RenderSectionAsync("Head", required: false)
</head>
@RenderSection("DatePicker", required: true)

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ChartJSCore.Demo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/ChartJSCore.Demo.styles.css" asp-append-version="true" />
    <link href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
    @await RenderSectionAsync("Head", required: false)
</head>
@RenderSection("DatePicker", required: true)

The output is attached. Basically, the date is displaying in the wrong format but displays correctly upon changing the date, and the datepicker itself clearly has messed up styling. What's even weirder is earlier I was having a different issue with the date, but the styling of the datepicker worked just fine, WITH THE EXACT SAME CODE.

Please help ;-;

❔ Jquery UI Datepicker with ASP.NET MVC

Similar Threads

Similar Threads

Similar Threads