End date should be last date of month based on start date in Bootstrap Daterangepicker using jQuery in ASP.Net MVC

Last Reply one year ago By AnandM

Posted one year ago

 

I need help ! My problem is that i have two textbox in which we have initial two dates. If user change the date from daterangepicker then end date should be end of that month. For Ex : startdate is 07-09-2017 then end date should be 30-09-2017 if use change date like 01-10-2017 then end date should be 31-10-2017

i am using Bootstrap Daterangepicker and moment.js. Help will highly appriciated...

 

Model Class
public datetime StartDate(get;set;)
public datetime EndDate(get;set;)

View 
@html.EditiorFor(m=>m.Startdate) 
@html.EditiorFor(m=>m.Enddate)

Script

$('#Startdate').daterangepicker({
singledatepicker=true,
locale:{Format : "dd-mm-yyyy"}
});

$('#Enddate').daterangepicker({
singledatepicker=true,
locale:{Format : "dd-mm-yyyy"}
});

 

Posted one year ago Modified on one year ago

Hi yogesjoshi,

I have created a sample which full fill your requirement you need to modify the code according to you need.

Refer below sample code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
    <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript">
        $(function () {
            $('#txtStartDate').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                locale: { format: "DD-MM-YYYY" }
            },
             function (start, end, label) {
                 var selectedDate = start._d;
                 var endMDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0);
                 endMDate = endMDate.getDate() + '-' + (endMDate.getMonth() + 1) + '-' + endMDate.getFullYear();
                 $('#txtEndDate').daterangepicker({
                     singleDatePicker: true,
                     locale: { format: "DD-MM-YYYY" },
                     startDate: endMDate
                 });
             });
        });
    </script>
    <div>
        <br />
        StartDate:
        <input id="txtStartDate" type="text" name="daterange" class="form-control" style="width: 300px;margin-left: 100px;" />
        <br />
        End Date:
        <input id="txtEndDate" type="text" name="daterange" class="form-control" style="width: 300px;margin-left: 100px;" />
        <asp:Label ID="lblerrmsg" runat="server" />
    </div>
    </form>
</body>
</html>

Demo

 

 

 

 


Posted one year ago Modified on one year ago

Hi yogesjoshi,

I have created a sample in MVC 2 you need to implement same in MVC 5.

Refer below sample code and modify it according to your need.

Model -> Date.cs

public class Date
{
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
}

Controller-> HomeController.cs

public class HomeController : Controller
{
    public ActionResult Index()
    {
        Date dt = new Date();
        dt.StartDate = DateTime.Now.AddMonths(2);
        dt.EndDate = DateTime.Now.AddMonths(3);
        return View(dt);
    }
}

View -> Index.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<_167261_RangeDateStartAndEnd.Models.Date>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
    <script type="text/javascript" src="http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
    <script type="text/javascript">
        $(function () {
            $('#StartDate').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                locale: { format: "MM/DD/YYYY" }
            },
            function (start, end, label) {
                var selectedDate = start._d;
                var endMDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0);
                endMDate = (endMDate.getMonth() + 1) + '/' + endMDate.getDate() + '/' + endMDate.getFullYear();
                $('#EndDate').daterangepicker({
                    singleDatePicker: true,
                    locale: { format: "MM/DD/YYYY" },
                    startDate: endMDate
                });
            });
            $('#EndDate').daterangepicker({
                singleDatePicker: true,
                locale: { format: "MM/DD/YYYY" }
            });
        });
    </script>
    <div>
        Start Date: &nbsp;&nbsp;&nbsp;
        <%: Html.EditorFor(m => m.StartDate)%>
    </div>
    <br />
    <div>
        End Date:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <%: Html.EditorFor(m => m.EndDate)%>
    </div>
</asp:Content>

ScreenShot