CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapdatepicker
flash
flash

Reputation: 1519

two months while selecting a date in date-picker in bootstrap

I am working on a website in website when I select I want two months to be displayed while selecting any start date and end date.

At this moment, on my domain only one month is displayed on start date and end date.

The code which I have used in order to make datepicker work for start date and end date are:

<script>
$("#startdate_datepicker").datepicker();
$("#enddate_datepicker" ).datepicker();
</script>

Problem Statement:

I am wondering what changes I should make in script two months calendar get displayed while selecting start date and end date.

I tried with the following code but somehow it doesn't seem to work.

<script>
$("#startdate_datepicker").datepicker({ numberOfMonths: [2, 3] });
$("#enddate_datepicker" ).datepicker({ numberOfMonths: [2, 3] });
</script>

Upvotes: 2

Views: 353

Answers (1)

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21766

Current is:

<script>
$("#startdate_datepicker").datepicker({ numberOfMonths: [2, 3] });
$("#enddate_datepicker" ).datepicker({ numberOfMonths: [2, 3] });
</script>

Change to:

<script>
$("#startdate_datepicker").datepicker({ numberOfMonths: [1, 2] });
$("#enddate_datepicker" ).datepicker({ numberOfMonths: [1, 2] });
</script>

Here in numberOfMonths: [1, 2], 1 is row and 2 number of months.

To change the color to orange, use below CSS:

.ui-widget-header {
  border: 1px solid #FFA500;
  background : #FFA500;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #FFA500;
  background : #FFA500;
}

Upvotes: 1

Related Questions