JSFiddle - React, Tailwind, and code Playground

by Lindsey Suarez

HTML

<link rel="stylesheet" href="http://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.3.custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<p>Date:
    <input type="text" data-day-of-year-picker="true" id="datepicker" value="Jan 26" />
</p>

CSS

.dayOfYearPicker .ui-datepicker-year {
    display: none;
}

JavaScript

$(function () {
    $("#datepicker").datepicker({
        beforeShow: function (el, inst) {
            var $this = $(el);

            if ($this.data("dayOfYearPicker")) {
                inst.dpDiv.addClass("dayOfYearPicker");

                // Needed to work around behavior of datepicker's inability to parse value without year
                setTimeout(function () {
                    $this.datepicker("setDate", new Date($this.val() + " 2006"));
                }, 0);
            } else {
                inst.dpDiv.removeClass("dayOfYearPicker");
            }
        },
        dateFormat: "M d",
        maxDate: new Date("12/31/2006"),
        minDate: new Date("1/1/2006")
    });
});