html5 date默认值 有没有办法改变输入类型=“日期”格式?




input date默认值 (11)

我正在使用我的网页上的HTML5元素。 默认情况下,输入type="date"显示日期为YYYY-MM-DD

问题是,是否可以将其格式更改为如下形式: DD-MM-YYYY


如果您需要快速解决方案, 请尝试此操作使yyyy-mm-dd转到“dd- Sep -2016”

1)在输入附近创建一个span类(用作标签)

2)每当用户更改日期或需要从数据加载时更新标签。

适用于 IE11 +的webkit浏览器手机和指针事件需要jQuery和Jquery Date

$("#date_input").on("change", function () {
     $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
        });
#date_input{text-indent: -500px;height:25px; width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>


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

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

HTML5规范不包含任何重写或手动指定任何格式的方式。


如前所述,正式不可能改变格式。 但是,可以对字段进行样式设置,所以(只需要一点JS帮助)就可以按照我们所需的格式显示日期。 一些操作日期输入的可能性以这种方式丢失,但如果强制格式的愿望更大,这种解决方案可能是一种方法。 日期字段保持如下状态:

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

剩下的是一些CSS和JS: http://jsfiddle.net/g7mvaosL/ : http://jsfiddle.net/g7mvaosL/

它适用于台式机上的Chrome和iOS上的Safari(特别理想,因为触摸屏上的本机日期操纵器是无与伦比的恕我直言)。 没有检查其他人,但不期望在任何Webkit上失败。


我相信浏览器将使用本地日期格式。 不要认为有可能改变。 您当然可以使用自定义日期选择器。


function dmy() {
  var mydate = document.getElementById('dat').value;
  //alert(mydate);
  var yf = mydate.split("-")[0];
  var mf = mydate.split("-")[1];
  var df = mydate.split("-")[2];

  var b = localStorage.getItem("b");
  if (!b) {
    b = [];
  } else {
    b = JSON.parse(b);

  }
  b.push({
    df: df,
    mf: mf,
    yf: yf
  });

  localStorage.setItem("b", JSON.stringify(b));
}

function showdate() {
  var sdate = JSON.parse(localStorage.getItem('b'));
  var a = '';
  if (sdate != null) {
    for (var i = 0; i < sdate.length; i++) {
      a += sdate[i]['df'] + '/' + sdate[i]['mf'] + '/' + sdate[i]['yf'] + '<br>';

    }
  } else {
    a = 'No DATA';
  }
  document.getElementById('conversion').innerHTML = a;
}
<form onsubmit=dmy()>
  <input type="date" name="dat" id="dat">
  <input type="submit" value="submit">
</form>
<input type="button" value="convert" onclick=showdate()>
<div id="conversion"></div>

由于这个答案在网络领域发生了很多事情,其中​​最令人兴奋的是网络组件的登陆。 现在,您可以使用专为满足您的需求而设计的自定义HTML5元素来优雅地解决此问题。 如果您希望覆盖/更改任何HTML标签的工作,只需制作您的影子即可

好消息是,已经有很多样板可用,所以很可能您不需要从头开始提供解决方案。 只要check一下人们正在建设什么,并从那里获取创意。

你可以从一个简单的(和工作)解决方案开始,比如date-util聚合物,它允许你使用这样一个标签:

<date-util format="dd/MM/yyyy"></date-util>

并将其作为输入字段进行调整......或者您可以根据自己的意愿创建和弹出完整的日期选择器,并提供所需的格式和语言环境,回调以及多种选项(您已获得整个自定义API在您的处置!)

符合标准,没有黑客。

尽管我们快到了,但这仍然是一个前瞻性的解决方案:IE 10和老朋友不会支持自定义标签,所以请仔细检查可用的polyfills ,它们支持哪些browsers/versions ,并且它覆盖了足够的用户群......在几个月内它肯定会覆盖大部分用户,因为所有主要的浏览器供应商都对该规范感兴趣,并且360的实施非常接近。

希望能帮助到你!


经过许多障碍之后,我想出了一个可以改变格式的解决方案。 有一些注意事项,但如果您希望一直显示“Jan”或“01”,则可以使用它。 它仅适用于Windows和Mac上的Chrome,因为Firefox尚不支持本机日期选择器。

https://github.com/northamerican/custom-input-date-format

JS:

function updateDateInputs() { 
    $('input').each(function() {
        var $date = $(this),
            date = $date.val().split('-'),
            format = ['year', 'month', 'day'];
        $.each(format, function(i, v) {
            $date.attr('data-' + v, +date[i]);
        });
    });
}

上海社会科学院:

$months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12';
@each $month in $months {
    $i: index($months, $month);

    input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after { 
        content: "#{$month}";
    }
}

Google Chrome在最后一个测试版中最终使用输入type=date ,格式为DD-MM-YYYY

所以必须有办法强制一种特定的格式。 我正在开发一个HTML5网页,日期搜索现在失败,格式不同。


无法更改网络套件浏览器使用用户的计算机或手机的默认日期格式。 但是,如果你可以使用jQuery和jQuery UI,那么就有一个可设计的日期选择器,并且可以按照开发人员的需求以任何格式显示。 链接到jquery ui日期选择器是在这个页面http://jqueryui.com/datepicker/你可以找到演示以及代码和文档或文档链接如果任何人想要进一步的帮助,他/她可以连接我的最好的社交网络http://www.funnenjoy.com

编辑: - 我发现铬使用默认等于系统设置的语言设置,但用户可以改变它们,但开发人员不能强迫用户这样做,所以你必须使用其他JS解决方案,比如我告诉你可以使用像JavaScript这样的查询来搜索网页日期选择器或jQuery日期选择器


在阅读了很多讨论之后,我已经准备了一个简单的解决方案,但我不想使用大量的Jquery和CSS,只是一些JavaScript。

HTML代码:

<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />

CSS代码:

#dt {
  text-indent: -500px;
  height: 25px;
  width: 200px;
}

Javascript代码:

function mydate() {
  //alert("");
  document.getElementById("dt").hidden = false;
  document.getElementById("ndt").hidden = true;
}

function mydate1() {
  d = new Date(document.getElementById("dt").value);
  dt = d.getDate();
  mn = d.getMonth();
  mn++;
  yy = d.getFullYear();
  document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
  document.getElementById("ndt").hidden = false;
  document.getElementById("dt").hidden = true;
}

输出:


HTML5日期选择器的格式取决于服务器机器日期时间格式的格式。

因此,您可以通过在任务栏中更改部署服务器上的格式来更改它。







input