[Solved] ASP.Net MVC: Bootstrap Datepicker selected year showing wrong

malar

SOLVED CLOSED ACTIVE ANSWERED
User: malar
Posted: on Nov 02, 2021 09:59 PM
Forum: ASP.Net MVC
Answer: 1
Views: 2586

Hi,

On Page load, if click textbox, calendar is displaying. But if select the date, year is reducing.

For example if i select 10-DEC-2021 in textbox it is displaying as 10-DEC-1921.

Let me know what thing i missed.

As per below code, calendar is binding successfully, but once calendar is selected, year is binding with wrong value.

@Calendar Scripts@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
     Include Bootstrap Datepicker 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
        $(document).ready(function () {
            $(".getdate").each(function () {
                $(this).datepicker(
                    {
                        changeYear: true,
                        format: 'dd MM yy',
                        todayHighlight: true,
                        autoclose: true
                    });
            });
        });
</script>
@Html.TextBoxFor(m => m.ProjectFromDate, "{0:dd/MM/yy}", new { @id = "txtProjectFromDate", @Value = @ViewBag.ProjectFromDate, @class = "getdate" })

Thanks in Advance.

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 1

Reply
ANSWER
User: dharmendr
Replied: on Nov 02, 2021 10:14 PM
Modified: on Feb 17, 2022 09:09 AM
Report

Hi malar,

Change the datepicker format to mm dd yyyy.

Refer below example.

Model

public class ProjectModel
{
    public DateTime ProjectFromDate { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        ViewBag.ProjectFromDate = DateTime.Now.AddDays(-5).ToString("MM dd yyyy");
        return View();
    }

    [HttpPost]
    public ActionResult Index(ProjectModel model)
    {
        ViewBag.Message = "Selected Date: " + model.ProjectFromDate.ToString("MM dd yyyy");
        return View();
    }
}

View

@model Bootstrap_DatePicker_MVC.Models.ProjectModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script>
        $(document).ready(function () {
            $(".getdate").each(function () {
                $(this).datepicker({
                    changeYear: true,
                    format: 'mm dd yyyy',
                    todayHighlight: true,
                    autoclose: true
                });
            });
        });
    </script>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        @Html.TextBoxFor(m => m.ProjectFromDate, "{0:MM dd yyyy}", new { @id = "txtProjectFromDate", @Value = @ViewBag.ProjectFromDate, @class = "getdate" })
        <input type="submit" value="Submit" />
    }
    @if (ViewBag.Message != null)
    {
        <script type="text/javascript">
            $(function () {
                alert("@ViewBag.Message");
            });
        </script>
    }
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

[Solved] ASP.Net MVC: Bootstrap Datepicker selected year showing wrong

Company

Explore

Follow us

Contact Us