Bootstrap date range selection

Sai

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

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sai8y ago
Hi ,

Please find the below code.

@**@
@**@
@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 Palanivel8y ago
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.
Sai8y ago
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 Kumar8y ago
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/
Sai8y ago
can you tell me where i need to add moment.js ..

One more query moment.js is jquery plugin ?
Ramesh Palanivel8y ago
Hi Sai,

have you used IsSameorAfter method in Moment.Js?
Sai8y ago
i tried it's not working
Ramesh Palanivel8y ago
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

Emp