"<i>How i can set date picker range with in a financial year based on the document date?<\/i>如何根据文档日期在财政年度中设置日期选择器范围？<\/b> <i>Im using JQUERY to do this<\/i>我使用 JQUERY 来执行此操作<\/b>"

Question

I want to set my date picker range with in a financial year based on the document date.I get the document date , but i want to work this when the document is in edit mode and only for the particular Date section only.

 <div class="col-md-6 no-padding">
                        <div class="col-md-12">
                            @Html.LabelFor(model => model.EnquiryDateFormatted, htmlAttributes: new { @class = "control-label lblrequired" })
                        </div>
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.EnquiryDateFormatted, new { htmlAttributes = new { @class = "form-control newinput datepicker", @autocomplete = "off",@id="enquiryDateID" } })
                            @Html.ValidationMessageFor(model => model.EnquiryDateFormatted, "", new { @class = "text-danger" })
                        </div>
                    </div>

Answer 1

You could use the the methods setStartDate and setEndDate for this.

The code will be something like this

$('#yourDatePickerID').datepicker('setStartDate', '04/01/2018');
$('#yourDatePickerID').datepicker('setEndDate', '03/30/2019');

or

you could use data attributes data-date-start-date and data-date-end-date

<input type="text" class="form-control" data-date-end-date=“mm/dd/yyyy”>

Use this to get financial year

function getCurrentFinancialYear(strDocDate) {
  var startYear = "";
  var endYear = "";
  var docDate = new Date(strDocDate);
  if ((docDate.getMonth() + 1) <= 3) {
    startYear = docDate.getFullYear() - 1;
    endYear = docDate.getFullYear();
  } else {
    startYear = docDate.getFullYear();
    endYear = docDate.getFullYear() + 1;
  }
  return {startDate : "01-Apr-" + startYear, endDate: "31-Mar-" + endYear };
}

alert(getCurrentFinancialYear("4/1/2018").startDate);

So your code should be like

$('#yourDatePickerID').datepicker('setStartDate', getCurrentFinancialYear(enquiryDateID).startDate );
$('#yourDatePickerID').datepicker('setEndDate', getCurrentFinancialYear(enquiryDateID).endDate);

Answer 2

You can use startDate and endDate setting to enforce start and end dates, but you need to create a function to get fiscal year range first:

function getCurrentFiscalYear(date) {
    var dates = {};

    var docDate = new Date(date);
    var month = docDate.getMonth();

    if (month > 3) {
         dates.sDate = new Date(docDate.getFullYear(), 3, 1);
         dates.eDate = new Date(dates.sDate.getFullYear() + 1, dates.sDate.getMonth() - 1, 31);
    }
    else {
         dates.sDate = new Date(docDate.getFullYear() - 1, 3, 1);
         dates.eDate = new Date(docDate.getFullYear(), dates.sDate.getMonth() - 1, 31);
    }

    return dates;
}

Then, assign the function above to datepicker instance through startDate and endDate properties (they also accept JS Date instance besides of date string):

$('input.datepicker').datepicker({
    format: "dd-M-yyyy",
    startDate: getCurrentFiscalYear($('input.datepicker').val()).sDate, // start date
    endDate: getCurrentFiscalYear($('input.datepicker').val()).eDate, // end date
    maxViewMode: 0,
    todayBtn: "linked",
    clearBtn: true,
    autoclose: true,
    todayHighlight: true          
});

Note:

If you have multiple datepickers to handle calendar selection, change the selector in both startDate and endDate based from nearest element (eg using closest() , siblings() , find() , etc.)

The example implementation can be seen in this fiddle .

Side note:

The EditorFor containing htmlAttributes parameter only works for MVC 5.1 and above. If your MVC version is 5.0 or below, use TextBoxFor helper instead:

@Html.TextBoxFor(model => model.EnquiryDateFormatted, "{0:dd-MMM-yyyy}", new { @class = "form-control newinput datepicker", @autocomplete = "off", @id="enquiryDateID" })

Answer 3

here is the correct answer to my question @kiranvj give me the key to the answer with a small change

here i am posting his part code and my part code

code from @kiranvj

 function getCurrentFinancialYear(strDocDate) {
  var startYear = "";
  var endYear = "";
  var docDate = new Date(strDocDate);
  if ((docDate.getMonth() + 1) <= 3) {
    startYear = docDate.getFullYear() - 1;
    endYear = docDate.getFullYear();
  } else {
    startYear = docDate.getFullYear();
    endYear = docDate.getFullYear() + 1;
  }
  return {startDate : "01-Apr-" + startYear, endDate: "31-Mar-" + endYear };
}

and my part code

 $('input.datepicker').datepicker({
            format: "dd-M-yyyy",
            maxViewMode: 0,
            todayBtn: "linked",
            clearBtn: true,
            autoclose: true,
            todayHighlight: true,
            startDate: getCurrentFinancialYear(enqDate).startDate,
            endDate: getCurrentFinancialYear(enqDate).endDate
        });

Answer 4

function getCurrentFinancialYear(strDocDate) {
    var startYear = "";
    var endYear = "";
    var docDate = new Date(strDocDate);
    if ((docDate.getMonth() + 1) <= 3) {
        startYear = docDate.getFullYear() - 1;
        endYear = docDate.getFullYear();
    } else {
        startYear = docDate.getFullYear();
        endYear = docDate.getFullYear() + 1;
    }
    console.log({startDate : startYear+"-03-01", endDate: endYear+"-03-31" });
    return {startDate : startYear+"-03-01", endDate:  endYear+"-03-31" };
}

$(document).ready(function () {
  $('.datepicker').datepicker({
      format: 'yyyy-mm-dd',
      maxViewMode: 0,
      todayBtn: "linked",
      clearBtn: true,
      autoclose: true,
      todayHighlight: true,
      startDate: getCurrentFinancialYear($('input.datepicker').val()).startDate,
      endDate: getCurrentFinancialYear($('input.datepicker').val()).endDate
  });
});