javascript - ReactJS 中 Safari 的 JQuery UI Datepicker 回退

Question

我正在尝试在我的 ReactJS.NET 应用程序中使用一些后备逻辑。到目前为止，我已经能够在我的 Razor 视图中使用以下代码，这对我来说非常有用：

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

然而我的问题是——是否可以在我与 React 一起使用的 JSX 页面中实现类似的逻辑？显然，人们可能认为最好的选择是在相关 JSX 页面的 componentDidMount 函数中加载这样的代码，但我遇到了诸如“$”选择器无法识别的问题，即使我在上面移动了 jQuery 脚本引用这里注入 JSX 的部分：

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

有没有类似于本文开头提到的方法的方法？当然，也许我的想法是错误的，但我正在尝试寻找最好的方法来节省对包含“日期”输入字段的 React 组件的大量重写。

任何想法表示赞赏！

标签： javascriptjqueryreactjsreactjs.net