JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="jquery-ui-timepicker-addon.js"></script>
<h1>DateTimePicker Bug</h1>

<p>Changing Month or Year via dropdowns does nothing. To reproduce:
<ol>
    <li>Refresh page</li>
    <li>Click DateTimePicker button</li>
    <li>Change the year using the dropdown</li>
    <li>Click the Done button</li>
    <li>Click the Log Time Value Button</li>
    <li>Notice in the console the date logged is incorrect</li>
</ol>
</p>

<hr/>
<input id="picker"/>
<hr/>

<button id="btnShowTime">Log Time Value</button>

<script>
</script>

CSS

/* css for timepicker */
        .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
        .ui-timepicker-div dl { text-align: left; }
        .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
        .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
        .ui-timepicker-div td { font-size: 90%; }
        .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

        .ui-timepicker-rtl{ direction: rtl; }
        .ui-timepicker-rtl dl { text-align: right; }
        .ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px;

JavaScript

$(function () {
        'use strict';

        var defaultOpts = {
            changeMonth: true,
            changeYear: true,
            showOn: 'button',
            buttonImageOnly: false,
            dateFormat: 'mm/dd/yy'
        };
        var elem = $('#picker');
        elem.datetimepicker(defaultOpts);
        elem.datetimepicker('setDate', new Date());

        $('#btnShowTime').on('click', function () {
            console.log('Time is ' + $('#picker').datetimepicker('getDate'));
        });
    });