适用于ReactJS中Safari的JQuery UI Datepicker后备

编程问答 2022-06-07

问题描述

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

//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组件上节省大量重写。

任何想法都感激！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjqueryreactjsreactjsreactjsreactjsreactjs.net