标签: html5-input-date

我有几个输入type ="date",并且想要禁用Microsoft Edge中的默认日期选择器,因为我使用的是jQuery的datepicker.如何使用CSS或JavaScript禁用此功能？它适用于Chrome和Firefox,但不适用于Edge.任何答案将不胜感激.

一个工作的jsFiddle

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

<input type="date">

JS

$(document).ready(function() {
    if (!Modernizr.inputtypes.date || $(window).width() >= 900) {
        $('input[type=date]').datepicker();
    }
});

$(window).resize(function() {
    if (!Modernizr.inputtypes.date || $(window).width() >= 900) {
        $('input[type=date]').datepicker();             
    }
    else {
        $('input[type=date]').datepicker("destroy");
    }
});

CSS

input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-calendar-picker-indicator  {
    display: none;
    -webkit-appearance: none;   
}

我需要在时间戳中转换 a，这是我的 html 代码：

 <input type="date" name="date_end" id="date_end">

这个字段有一个值，我把它放在 25/10/2017 我的 jquery 代码是：

var dataEnd = $('[name="date_end"]').val();
        if (!dataEnd) {
            return false;
        } else {
            var timestamp_end=$('[name="date_start"]').val().getTime();
            console.log("TIMESTAMP END "+timestamp_end);
.....
}

但这不起作用，有人可以帮助我吗？

我使用 bootstrap-vue。

它包括输入类型日期。

当我写一些数字时，默认格式是 yyyyyy-mm-dd。

我想将格式 yyyyyy-mm-dd 更改为 yyyy-mm-dd。

我使用MVC 5来创建小应用程序.我的模型中有DateTime属性,用

[DataType(DataType.Date)]
public Nullable<DateTime> StartDate { get; set; }

使用时

 @Html.EditorFor(m => m.StartDate)

的DateTime控制出现这样在窗体上

问题是:我的应用程序是阿拉伯文化,所以我需要将此控件转换为Hijri DateTime控件,这可能吗？

Chrome 具有本机日期选择器<input type="date">：

我喜欢它，我完全可以让它只在 chrome 中工作。

问题是如何在 javascript 中为此输入字段调用日期选择器？

通常只有输入字段，直到用户将其聚焦并单击小黑色三角形以打开小日历。我想从 javascript 打开它。

如果可能，我想避免使用 3rd 方日期选择器实现。

我试过element.focus()，element.click()等

我建立一个日历选取陪（和替换某些浏览器提供的默认日历日期选择器）的input的type="date"。

据记录，对于“简单性”，Chrome浏览器（可能还有其他浏览器）的日期输入允许输入无效的日期，但是它们将无法验证（即，可以输入2017年6月31日，但产生的“值”为“ ”）。

我的问题是：当输入无效日期时，如何获取无效日期的值？

var date_input = document.getElementById('date_input');
var output_div = document.getElementById('output_div');

output_div.innerHTML = date_input.value;

date_input.addEventListener('input', function(e){
	output_div.innerHTML = e.target.value;
});

<p>To quickly input an invalid date, select the day field and press the down arrow (on Chrome OSX this displays an empty div below the input instead of the invalid date). This will select 31/06/2017</p>
<input type="date" value="2017-06-01" id="date_input" />
<br />
<br />
<div id="output_div" />

我正在尝试从选择可以开始的位置添加一个最小日期，但该最小日期不起作用。

<TextField
    id="date"
    type="date"
    defaultValue="2017-05-24"
    minDate="24/01/2019"
    InputLabelProps={{
      shrink: true
    }}
  />

有没有人有任何想法？

我已经将日期选择器创建为一个按钮，当悬停它时，它在 chrome 浏览器中看起来很乱。可能是因为它在浏览器中的默认行为，但我可以更改 chrome 上的悬停效果吗？

火狐中的图像：

默认 <input type=date>

按钮 <input type=date>

Chrome 中的图像：

默认<input type=date>（悬停时）

按钮<input type=date>（悬停时）

有什么办法可以消除 chrome 上的悬停效果？

默认输入：

<input type="date"  id="myInput">

用 CSS 编辑：

.date-picker-button {
  background: #8DBF42;
  color: #fff;
  position: relative;
  cursor: pointer;
  margin-bottom: 10px;
  border: 2px solid #8DBF42;
  font-size: 14px;
  padding: 12px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  width: 300px;
}

.input-group {
  position: relative;
  border: 2px solid #cdd7e1;
  margin-bottom: 10px;
  display: block !important;
  width: 300px;
  border: none; …

我使用 react-bootstrap <Form.Control type="date"> 并且日历图标或日期选择器自动设置在表单字段的右侧/末尾。我想将日历图标/日期选择器移动到表单字段的左侧/开头，或者它紧跟在日期之后。我试图找到合适的 node_module 来更改日历图标位置的 CSS 代码，但我找不到它。

那么有谁知道我应该在哪里修改 CSS 或者有更好的解决方法吗？

下面是表格现在的样子：