JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Datepicker issue</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    </head>
    
    <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>
</html>

CSS

/*! jQuery UI - v1.9.2 - 2012-11-23
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css
* Copyright 2012 jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin-top: 2px; padding: .5em .5em .5em .7em; zoom: 1; }
.ui-accordion .ui-accordion-icons { padding-left: 2.2em; }
.ui-accordion .ui-accordion-noicons { padding-left: .7em; }
.ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header...

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 );
} );