当你使用第三方日期选择器插件（比如jQuery UI Datepicker）时，Firefox会对type="date"的输入框显示原生日期选择器，导致出现双选器的情况。这里有两种可靠的解决方式：

方法一：修改输入框类型为text（推荐） #

Play框架的@inputDate默认会生成type="date"的输入框，你只需要在参数里手动指定'type->"text"，就能让输入框变成普通文本类型，Firefox就不会加载原生日期选择器了，同时你的第三方datepicker插件依然能正常工作。

修改后的代码如下：

@inputDate( 
  userForm("office.joining_date"), 
  'id->"joining_date", 
  'name->"joining_date", 
  'class->"span4 datepicker", 
  '_label->"Joining Date (dd-mm-yyyy)", 
  'placeholder ->"Enter Joining Date (dd-mm-yyyy)",
  'type->"text"  <!-- 新增这个属性 -->
)

这个方法最直接，避免了浏览器原生行为的干扰，同时不影响第三方插件的功能。

方法二：用CSS隐藏Firefox原生日期选择器 #

如果你不想修改输入框类型，可以通过CSS针对Firefox的伪元素来隐藏原生选择器：

/* 隐藏Firefox原生日期选择器的触发按钮 */
input[type="date"].datepicker::-moz-calendar-picker-indicator {
    display: none !important;
}

/* 让输入框表现得像普通文本框 */
input[type="date"].datepicker {
    -moz-appearance: textfield;
}

这段CSS会针对带有datepicker类的日期输入框，隐藏Firefox的原生选择器按钮，并让输入框样式和普通文本框一致。

你可以根据自己的需求选择其中一种方法，第一种方法更稳妥，不容易出现兼容性问题~

内容的提问来源于stack exchange，提问作者ankita lembhe