让firefox和safari支持input date datetime-local

灰太狼 2021-10-25 14:10 268阅读 0赞

h5 input标准有date，可惜目前只有chrome支持了。在这之前，形形色色的date-picker很多，有的好看，有的小。不过都需要代码改造。我推荐一款无缝兼容的插件，[webshim][]，它的作用是让缺少h5 feature的browser能够支持h5，比如input type=date

每一种feature都有一个option，可以用默认的。option非常繁多，文档里写的也不甚清楚，个人觉得一般用范例里即可

**注意：文件夹最小也要2.1M，如果是外部网站需要考虑性能，和UI样式统一性**

*  安装，下载后保持目录结构，如图

![1105951-20170918170258837-250356941.png][]

*  使用非常简单，在js里（不需要在jq ready里），按需加载接口。这里我们使用form和form-ext

//configure forms features
            webshim.setOptions("forms", {
                lazyCustomMessages: true,
                replaceValidationUI: true,
                customDatalist: "auto",
                list: {
                    "filter": "^"
                }
            });
    
            //configure forms-ext features
            webshim.setOptions("forms-ext", {
                replaceUI: "auto",
                types: "date datetime-local range number",
                date: {
                    startView: 2,
                    openOnFocus: true,
                    classes: "show-week"
                },
                number: {
                    calculateWidth: false
                },
                range: {
                    classes: "show-activevaluetooltip"
                }
            });
    
            //load forms and forms-ext features
            webshim.polyfill('forms forms-ext');
    
            $(document).ready(function () {
                  //其他代码
            }

效果也比较美观，因为所有的form input都被改了。chrome原生的input date跟bootstrap有点不匹配，对不齐

chrome原生：

![1105951-20170918171452993-1463060617.png][]

![1105951-20170918172351493-1359661781.png][]

使用后

![1105951-20170918171613087-1330561834.png][]

![1105951-20170918172419618-288621941.png][]

转载于:https://www.cnblogs.com/elsonwe/p/7544181.html

[webshim]: http://afarkas.github.io/webshim/demos/
[1105951-20170918170258837-250356941.png]: /images/20211025/1201a06a1ab94223bd51aa2c99576d03.png
[1105951-20170918171452993-1463060617.png]: /images/20211025/019411e7137c4ea9b0541e2f49c59113.png
[1105951-20170918172351493-1359661781.png]: /images/20211025/3dc4f9fc72e24173ba1a93561799d5f4.png
[1105951-20170918171613087-1330561834.png]: /images/20211025/4d02663dbc9a4564b7342d902c35042e.png
[1105951-20170918172419618-288621941.png]: /images/20211025/2c1f25ab48014dc2aa22f1eb909b070b.png