8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

有什么办法可以改变输入类型 = 'date' 格式吗?

Oliver 1月前

108 0

默认情况下,输入类型 = \'date\' 显示日期为 YYYY-MM-DD。问题是,是否可以强制其格式为:DD-MM-YYYY?

默认情况下,输入 type="date" 显示日期为 YYYY-MM-DD .

问题是,是否可以强制其格式为类似于: DD-MM-YYYY

帖子版权声明 1、本帖标题:有什么办法可以改变输入类型 = 'date' 格式吗?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Oliver在本站《date》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 是否可以重载 HTMLInputElement 来为其提供不同的语言环境?请在此处查看我的问题:

  • Mask 1月前 0 只看Ta
    引用 3

    添加了使用操作系统区域设置显示日期的选项,请查看我的答案。我知道这并不能解决根本问题,但对于开发人员来说,这是一个不错的选择。

  • 无法改变格式

    我们必须区分有线格式和浏览器的表示格式。

    线路格式

    HTML5 日期输入规范 参考了 RFC 3339 规范 ,其中规定了完整日期格式等于: yyyy-mm-dd 有关更多详细信息,请参阅 RFC 3339 规范 第 5.6 节

    此格式由 HTML 属性和 DOM 属性使用 value ,是进行普通表单提交时使用的格式。

    演示格式

    浏览器在显示日期输入方面不受限制。在撰写本文时,Chrome、Edge、Firefox 和 Opera 都支持日期(请参阅 此处 )。它们都显示日期选择器并格式化输入字段中的文本。

    桌面设备

    对于 Chrome、Firefox 和 Opera,输入字段文本的格式基于浏览器的语言设置。对于 Edge,它基于 Windows 语言设置。遗憾的是,所有 Web 浏览器都会忽略操作系统中配置的日期格式。对我来说,这是非常奇怪的行为,在使用此输入类型时需要考虑这一点。例如,将操作系统或浏览器语言设置为的荷兰用户 en-us 将显示 01/30/2019 他们习惯的格式: 30-01-2019 .

    Internet Explorer 9、10 和 11 显示具有有线格式的文本输入字段。

    移动设备

    具体来说,对于 Android 上的 Chrome,格式基于 Android 显示语言。我怀疑其他浏览器也是如此,尽管我无法验证这一点。

  • @AllanKimmerJensen 不过我理解你的想法。我认为使用 RFC3339 中指定的格式的决定是正确的,因为它不会在 HTML 和 JavaScript 之间产生耦合。至于你的第二点,我认为从可用性的角度来看,让用户根据自己的区域偏好查看日历是有意义的。

  • 如果应用程序是 pt_BR,我希望有一个 pt_BR 输入。我的系统设置无关紧要。HTML5 需要某种方式来强制执行语言环境。

  • 我使用西班牙语区域设置日期/货币,因为我住在西班牙,但我的母语是英语,而且我习惯使用美国键盘布局,所以我使用英语/美国键盘。我的客户是讲法语的欧洲人……我希望我可以提示 Chrome 等停止以美国 mm-dd-yyyy 格式显示日期!

  • 现在可以从“设置”面板中将显示格式设置为与 Firefox 中的操作系统区域设置相匹配,请查看我的回答以了解详细信息。Chrome 现在应该(或可以)添加此选项。

  • 自从这个问题被提出以来,网络领域发生了不少事情,其中​​最令人兴奋的事情之一就是 网络组件 自定义 HTML5 元素 来优雅地解决此问题 。如果您希望覆盖/更改任何 html 标签的工作原理,只需使用 shadow dom .

    好消息是,已经有很多可用的样板,所以您很可能不需要从头开始想出解决方案。只需 查看 人们正在构建的内容并从中获取想法即可。

    您可以从一个简单的(并且有效的)解决方案开始,例如 datetime-input ,它允许您使用如下标签:

     <date-input date="{{date}}" timezone="[[timezone]]"></date-input>
    

    或者您可以发挥创意,弹出完整的日期选择器, 按照您的意愿设置样式 ,并带有您想要的格式和语言环境、回调和一长串选项(您可以使用整个自定义 API!)

    符合标准,无黑客攻击。

    仔细检查 可用的 polyfill 、它们支持哪些 浏览器/版本 ,以及它是否覆盖了足够多的用户群... 现在是 2018 年,所以很有可能它肯定会覆盖大多数用户。

    希望有帮助!

  • 但这些功能可以本地化吗?例如,将月份名称更改为非英语。它们可以在桌面和移动设备上使用吗?

  • FTM 1月前 0 只看Ta
    引用 11

    当然,它们是可本地化的。您可以利用系统的语言环境(即:is.gd/QSkwAY)或在 webcomponent 中提供您的 i18n 文件(即:is.gd/Ru9U82)。至于移动浏览器,它们使用 polyfill 得到支持,尽管还不是 100%(目前)……请查看我发布的浏览器/版本链接。同样,这是前沿技术。如果您具有前瞻性,这是一个很好的解决方案。

  • 抱歉,我没有看到您的最新评论。这个:jcrowther.io/2015/05/11/i18n-and-web-components 看起来非常有用,应该包含在答案中。

  • 尽管有 100 多人显然不同意,但在我看来,这个答案似乎没有增加任何有用的东西。没有给出为什么 Web 组件(而不是为网页创建可重复使用的小部件的任何其他方式)应该是这里的首选解决方案的理由,至少提出的第一个组件有点垃圾(没有日历弹出窗口,如果我输入了太大的数字,例如日期,就会出现一些疯狂的行为)。此外,您实际上从未展示过如何使用任何建议的组件设置自定义日期格式,这意味着这最终并没有回答所提出的问题。

  • 如前所述,官方无法更改格式。但是可以设置字段的样式,这样(借助一些 JS 帮助)它就会以我们想要的格式显示日期。这种方式会失去一些操纵日期输入的可能性,但如果强制格式的愿望更大,这种解决方案可能是一种方法。日期字段仅保持如下状态:

    <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">
    

    其余的是一些 CSS 和 JS: http://jsfiddle.net/g7mvaosL/

    注意:如果要自定义显示格式,只需更改 data-date-format 上的属性 input 。不要更改 YYYY-MM-DD 传递给 moment .

    $("input").on("change", function() {
        this.setAttribute(
            "data-date",
            moment(this.value, "YYYY-MM-DD")
                .format( this.getAttribute("data-date-format") )
        )
    }).trigger("change")
    input {
        position: relative;
        width: 150px; height: 20px;
        color: white;
    }
    
    input:before {
        position: absolute;
        top: 3px; left: 3px;
        content: attr(data-date);
        display: inline-block;
        color: black;
    }
    
    input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
        display: none;
    }
    
    input::-webkit-calendar-picker-indicator {
        position: absolute;
        top: 3px;
        right: 0;
        color: black;
        opacity: 1;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

    它在桌面版 Chrome 和 iOS 版 Safari 上运行良好(尤其受欢迎,因为在我看来,触摸屏上的原生日期操纵器是无与伦比的)。没有检查其他版本,但不要指望它会在任何 Webkit 上失败。

  • 很好的例子,但它在 iOS (10.0) 上不太适用。虽然功能可用,但样式不对。

  • 如果像 Chrome 这样的现代浏览器支持 CSS 内容 atrr 语法,那就太好了

  • 区分两种不同的格式很重要 :

    • RFC 3339/ISO 8601 \“有线格式\”:YYYY-MM-DD。根据 HTML5 规范,这是在表单提交或通过 DOM API 请求时必须用于输入值的格式。它与语言环境和地区无关。
    • 用户界面控件显示并接受为用户输入的格式。鼓励浏览器供应商遵循用户的偏好选择。例如,在 Mac OS 上,如果在“语言和文本”偏好设置窗格中选择了“美国”区域,Chrome 20 将使用“m/d/yy”格式。

    HTML5 规范不包含任何覆盖或手动指定格式的方法。

  • W3C 每十年添加一个新控件,但他们没有考虑不同的显示区域...我真的很想在那里工作,无所事事就能得到报酬!

  • 我找到了一种改变格式的方法,这是一种棘手的方法,我只是使用 CSS 代码改变了日期输入字段的外观。

    input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
      color: #fff;
      position: relative;
    }
    
    input[type="date"]::-webkit-datetime-edit-year-field{
      position: absolute !important;
      border-left:1px solid #8c8c8c;
      padding: 2px;
      color:#000;
      left: 56px;
    }
    
    input[type="date"]::-webkit-datetime-edit-month-field{
      position: absolute !important;
      border-left:1px solid #8c8c8c;
      padding: 2px;
      color:#000;
      left: 26px;
    }
    
    
    input[type="date"]::-webkit-datetime-edit-day-field{
      position: absolute !important;
      color:#000;
      padding: 2px;
      left: 4px;
      
    }
    <input type="date" value="2019-12-07">
  • 它在 Firefox 浏览器中不起作用。有没有办法通过 CSS 处理在 Firefox 中有效的日期格式?

返回
作者最近主题: