JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-lightness/jquery-ui.css">

<h1>Calendar1 2012-10-01 ~ 2012-12-31 OK</h1>
<div id="calendar1"></div>
<h1>Calendar2 2012-11-01 ~ 2012-12-31 WRONG</h1>
<div id="calendar2"></div>
<h1>Calendar3 2012-11-01 ~ 2012-12-30 OK</h1>
<div id="calendar3"></div>
<h1>Calendar4 2012-06-01 ~ 2012-12-31 WRONG</h1>
<div id="calendar4"></div>

CSS

body { font-size: 12px; }

JavaScript

$( function() {
    var datepickerOptions = {
        inline: true,
        showWeek: true,
        firstDay: 1,
        dateFormat: "yy-mm-dd",
        showOtherMonths: false,
        stepMonths: 0,
        changeMonth: false,
        changeYear: false,
        minDate: new Date(2012, 9, 1),
        maxDate: new Date(2012, 11, 31),
        numberOfMonths: 3
    };
    
    $( '#calendar1' ).datepicker( datepickerOptions );

    datepickerOptions.minDate = new Date( 2012, 10, 1 );
    datepickerOptions.maxDate = new Date( 2012, 11, 31 );
    datepickerOptions.numberOfMonths = 2;
    $( '#calendar2' ).datepicker( datepickerOptions );
    
    datepickerOptions.minDate = new Date( 2012, 10, 1 );
    datepickerOptions.maxDate = new Date( 2012, 11, 30 );
    datepickerOptions.numberOfMonths = 2;
    $( '#calendar3' ).datepicker( datepickerOptions );
    
    datepickerOptions.minDate = new Date( 2012, 5, 1 );
    datepickerOptions.maxDate = new Date( 2012, 11, 31 );
    datepickerOptions.numberOfMonths = 7;
    $( '#calendar4' ).datepicker( datepickerOptions );
} );