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: 8978
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

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