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

yogesjos...

SOLVED CLOSED ACTIVE ANSWERED
User: yogesjoshi
Posted: on Sep 06, 2017 11:32 PM
Forum: ASP.Net MVC
Answer: 2
Views: 8975
Sample Code: Download

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"}
});

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

AnandM

0 2

Reply
ANSWER
User: AnandM
Replied: on Sep 07, 2017 04:32 AM
Modified: on Sep 07, 2017 04:37 AM
Report

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

AnandM

0 4

Reply
ANSWER
User: AnandM
Replied: on Sep 21, 2017 01:09 AM
Modified: on Sep 27, 2017 06:25 AM
Report

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

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

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

Company

Explore

Follow us

Contact Us