Fatal编程技术网
  • html/
  • Html 是否有任何方法可以更改输入类型="；日期“；格式？

Html 是否有任何方法可以更改输入类型="；日期“；格式？

html css date input

Html 是否有任何方法可以更改输入类型="；日期“；格式？,html,css,date,input,Html,Css,Date,Input,我正在使用网页上的HTML5元素。默认情况下，输入type=“date”将日期显示为YYYY-MM-DD 问题是，是否可以将其格式更改为：DD-MM-YYYY 我相信浏览器将使用本地日期格式。不要认为有可能改变。您当然可以使用自定义日期选择器。我相信浏览器将使用本地日期格式。不要认为有可能改变。当然，您可以使用自定义日期选择器。无法更改格式。 我们必须区分有线格式和浏览器的表示格式 有线格式 是指，它指定的完整日期格式等于：yyyy-mm-dd。有关更多详细信息，请参阅RFC 3339规范的第1

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

问题是，是否可以将其格式更改为：
DD-MM-YYYY

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

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

无法更改格式。

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

有线格式 是指，它指定的完整日期格式等于：
yyyy-mm-dd
。有关更多详细信息，请参阅RFC 3339规范的第1部分

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

演示文稿格式 浏览器显示日期输入的方式不受限制。在编写Chrome时，Edge、Firefox和Opera都提供了日期支持（请参阅）。它们都显示一个日期选择器，并在输入字段中格式化文本

桌面设备

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

Internet Explorer 9、10和11以wire格式显示文本输入字段

移动设备

特别是Android上的Chrome，其格式基于Android显示语言。我怀疑其他浏览器也是如此，尽管我无法验证这一点。

无法更改格式

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

有线格式 是指，它指定的完整日期格式等于：
yyyy-mm-dd
。有关更多详细信息，请参阅RFC 3339规范的第1部分

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

演示文稿格式 浏览器显示日期输入的方式不受限制。在编写Chrome时，Edge、Firefox和Opera都提供了日期支持（请参阅）。它们都显示一个日期选择器，并在输入字段中格式化文本

桌面设备

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

Internet Explorer 9、10和11以wire格式显示文本输入字段

移动设备

特别是Android上的Chrome，其格式基于Android显示语言。我怀疑其他浏览器也是如此，尽管我无法验证这一点。

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

因此，必须有一种方法强制使用特定的格式。我正在开发一个HTML5网页，日期搜索现在以不同的格式失败。

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

因此，必须有一种方法强制使用特定的格式。我正在开发一个HTML5网页，日期搜索现在以不同的格式失败。

:

  • RFC 3339/ISO 8601“wire format”：YYYY-MM-DD。根据HTML5规范，这是表单提交时或通过DOM API请求时必须用于输入值的格式。它是区域独立的
  • 由用户界面控件显示并接受为用户输入的格式。鼓励浏览器供应商遵循用户的首选项选择。例如，在语言和文本首选项窗格中选择了地区“美国”的Mac OS上，Chrome 20使用格式“m/d/yy”
HTML5规范不包括覆盖或手动指定任何一种格式的任何方法。

：

  • RFC 3339/ISO 8601“wire format”：YYYY-MM-DD。根据HTML5规范，这是表单提交时或通过DOM API请求时必须用于输入值的格式。它是区域独立的
  • 由用户界面控件显示并接受为用户输入的格式。鼓励浏览器供应商遵循用户的首选项选择。例如，在语言和文本首选项窗格中选择了地区“美国”的Mac OS上，Chrome 20使用格式“m/d/yy”
HTML5规范不包括覆盖或手动指定任一格式的任何方法。

不可能更改web kit浏览器使用用户计算机或手机的默认日期格式。 但是，如果您可以使用jquery和jquery UI，那么就有一个日期选择器，它是可设计的，可以是 
LANG=en_US.UTF-8 /opt/google/chrome/chrome

LANG=pt_BR /opt/google/chrome/chrome

$ date +%x
01-06-2015

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

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

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

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

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;
}

<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>

/*================== || Date Picker ||=======================================================================================*/

/*-------Removes the // Before dd - day------------------------*/
input[type="date"]::-webkit-datetime-edit-text
{
    color: transparent;    
}




/*------- DatePicker ------------------------*/
input[type="date"] {
    background-color: aqua;
    border-radius: 4px;
    border: 1px solid #8c8c8c;
    font-weight: 900;
}





/*------- DatePicker - Focus ------------------------*/
input[type="date"]:focus 
{
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}






input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
    color: #fff;
    position: relative;    
}



    /*------- Year ------------------------*/
    input[type="date"]::-webkit-datetime-edit-year-field {
        position: absolute !important;
        border-left: 1px solid #8c8c8c;
        padding: 2px;
        color: #000;
        left: 56px;
    }


    /*------- Month ------------------------*/
    input[type="date"]::-webkit-datetime-edit-month-field {
        position: absolute !important;
        border-left: 1px solid #8c8c8c;
        padding: 2px;
        color: #000;
        left: 26px;
    }



    /*------- Day ------------------------*/
    input[type="date"]::-webkit-datetime-edit-day-field {
        position: absolute !important;
        color: #000;
        padding: 2px;
        left: 4px;
    }

 // ================================ || Format Date Picker || ===========================================================
    function GetFormatedDate(datePickerID)
    {
        let rawDate = document.getElementById(datePickerID).value; // Get the Raw Date
        return rawDate.split('-').reverse().join("-"); // Reverse the date
    }

 document.getElementById('datePicker').onchange = function () { alert(GetFormatedDate('datePicker')); }; // The datepickerID