Bootstrap date range selection

Question

Hi everybody, I need your help. Kindely let me know how to set start date and end date range in bootstrap datepicker in jquery. Requriement: =========== StartDate : 05/Jan/2010 EndDate : 06/Jan/2010 to .........future date also able to select but not before startdate. Once user select StartDate and immediately EndDate should starts after selected startdate. So before endate in datepicker dates disable not enable. Jquery Code: ========== $("#txtStartDate").datepicker({ format: 'dd/mm/yyyy', autoclose: true, todayHighlight: true }); $("#txtEndDate").datepicker({ format: 'dd/mm/yyyy', autoclose: true, todayHighlight: true ); Please help me

Sai · Answer

Hi , Please find the below code. @* *@ @* *@ $(document).ready(function () { $("#txtStartDate, #txtEndDate").datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true }); $("#txtStartDate").on('change', function () { var sd = $("#txtStartDate").val().split('/'); var d = sd[0]; var m = sd[1]; var y = sd[2]; alert("Day" + d); alert("Month" + m); alert("Year" + y); $("#txtEndDate").datepicker("option", "minDate", new Date(y, m - 1, d)); }); }); @using (Html.BeginForm()) { @Html.AntiForgeryToken() Emp @Html.ValidationSummary(true, "", new { @class = "text-danger" }) StartDate @Html.TextBox("txtStartDate", string.Empty, new { @class = "ControlWidth" }) EndDate @Html.TextBox("txtEndDate", string.Empty, new { @class = "ControlWidth" }) } @Html.ActionLink("Back to List", "Index") This logic is working when i comment the below plugins @* *@ @* *@ output: but when i uncomment the below plugins , i mean i applied bootstrapdatepicker.css and bootstrapdatepicker.js the above logic is not working . see the below code and output $("#txtStartDate, #txtEndDate").datepicker({ format: 'dd/mm/yyyy', changeMonth: true, changeYear: true }); $("#txtStartDate").on('change', function () { var sd = $("#txtStartDate").val().split('/'); var d = sd[0]; var m = sd[1]; var y = sd[2]; alert("Day" + d); alert("Month" + m); alert("Year" + y); $("#txtEndDate").datepicker("option", "minDate", new Date(y, m - 1, d)); }); Please help me..its very urgent for me

Ramesh Palanivel · Answer

Hi Sai, Yes , Moment.Js is a jquery plugin which is used to handle the date picker selection value. Write value change event for date picker and write your logics there.

Sai · Answer

Pls see the below image Requriement: =========== StartDate : 05/Jan/2010 EndDate : 06/Jan/2010 to .........future date also able to select but not before startdate. Once user select StartDate and immediately EndDate should starts after selected startdate. So before endate in datepicker dates disable not enable. Jquery Code: ========== $("#txtStartDate").datepicker({ format: 'dd/mm/yyyy', autoclose: true, todayHighlight: true }); $("#txtEndDate").datepicker({ format: 'dd/mm/yyyy', autoclose: true, todayHighlight: true ); Please write the code and help me..its bootstap datepicker

Suraj Kumar · Answer

Hi Sai, You can implement maxDate and minDate to provide the date range. To know more about you can follow the below link. You can download the demo and try it also. http://makitweb.com/set-minimum-maximum-date-jquery-ui-datepicker/

Sai · Answer

can you tell me where i need to add moment.js .. One more query moment.js is jquery plugin ?

Ramesh Palanivel · Answer

Hi Sai, have you used IsSameorAfter method in Moment.Js?

Sai · Answer

i tried it's not working

Ramesh Palanivel · Answer

Hi Sai, use Moment.js . its fully developed for date time issue. You can achieve everything there. It has lots of functinality to compare two dates.

Bootstrap date range selection

Answers (8)