JQuery UI Datepicker Fallback for Safari In ReactJS

Question

I'm trying to use some fallback logic in my ReactJS.NET application. So far, I've been able to use the following code in my Razor Views themselves, which is working out great for me:

//create logic to fallback if there is no datepicker HTML5 (Safari)

            if ($('[type="date"]').prop('type') !== 'date') {
                //for reloading/displaying the ISO format back into input again
                var val = $('[type="date"]').each(function () {
                    192
                    var val = $(this).val();
                    if (val !== undefined && val.indexOf('-') > 0) {
                        var arr = val.split('-');
                        $(this).val(arr[2] + '/' + arr[1] + '/' + arr[0]);
                    }
                });

                $('input[type=date]').attr('readonly','readonly');
                //add in the datepicker
                $('input[type=date]').datepicker({
                    // Consistent format with the HTML5 picker
                    dateFormat: 'yy-mm-dd',
                    altFormat: 'dd/mm/yy'
                });

                //stops the invalid date when validated in safari
                jQuery.validator.methods["date"] = function (value, element) {
                    var shortDateFormat = "dd/mm/yy";
                    var res = true;
                    try {
                        $.datepicker.parseDate(shortDateFormat, value);
                    } catch (error) {
                        res = false;
                    }
                    return res;
                }
            }

My question however is this - is it possible to implement similar logic in a JSX page I'm using with React? Obviously, one might think the best bet is to load code like this in the componentDidMount function in the JSX page in question, but I've run into issues like the '$' selector not being recognized, even when I move jQuery script references above the section where the JSX is injected here:

@Scripts.Render("~/bundles/jquery")

    @Html.React("Queue", new


{
       initialData = openData,
       closedData = closedData,
       initialSelect = initialSelData,
       initialCloseSelect = initialSelClosedData,
       immUserOpen = initialUserSelData,
       immUserClose = initialUserSelClosedData,
       userData = user,
       userDB = usersDB,
       shiftDB = shifts,
       templates = templatesDB,
       shiftsUrl = Url.Action("StaffShifts"),
       templatesUrl = Url.Action("TicketTemplates"),
       refreshCalFlgUrl = Url.Action("RefreshCalendarFlag"),
       getId = Url.Action("generateGuid"),
       getUrl = Url.Action("Tickets"),
       navUrl = Url.Action("Ticket"),
       submitUrl = Url.Action("AddTicket"),
       submitShiftsUrl = Url.Action("UpdateStaffShifts"),
       submitTemplatesUrl = Url.Action("AddTicketTemplate"),
       serverMsg = Session["Message"],
       srvMsgRst = Url.Action("ServerMsgRead", "Home"),
       calendarEmailVerify = Url.Action("CalendarAccessEmailCheck"),
       calendarAccessUrl = Url.Action("CalendarAccessRequest"),
       //submitUrl = Url.Action("AddComment"),
       pollInterval = 1000,
       gCalSync = gCalSync,
       gCalPolling = gCalPolling,
       gCalInterval = gCalInterval,
       appChange = Url.Action("setAppSetting"),
       debugLogging = debugLogging,
       maxART = maxARTNumber,
       gCalFrameUrl = gCalFrameSrc
   })

Is there a way that is similar to the method referenced at the beginning of this post? Maybe I'm thinking about it the wrong way, of course, but I'm trying to think of the best way to save myself a TON of rewrites on my React component containing 'date' input fields.

Any thoughts appreciated!