我在Mozilla Firefox中的輸入日期與Google Chrome不同

我已經制作了一個由兩個輸入（輸入文本和輸入日期）和一個按鈕組成的表單。我在Google Chrome中設計了這個表單。我在Mozilla Firefox中的輸入日期與Google Chrome不同

這是我完成的形式

後，我試圖打開Mozilla Firefox瀏覽器的網頁，我看到日期輸入不是日期格式。

像這樣：

這是我的代碼

<!DOCTYPE HTML><HTML> 
    <body> 
<!--NAVIBAR--> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-3 no-float"><br> 
      <img src="img/logo-pln-persero.png" style="height:150px; margin-top:-40px;" ><hr> 
      <p class="navbar-font-gold"> 
       <?php 
        $tgl_hari_ini = date('D, d M Y '); 
        echo $tgl_hari_ini; 
       ?> 
      </p> 
      <div role="navigation"> 
       <div class="navbar-main-collapsed"> 
        <ul class="nav li navbar-stacked"> 
         <li> 
        <a class="page-scroll" href="home.php"> 
         <p class="navbar-font">HOME</p> 
        </a> 
       </li> 
       <li> 
        <a class="page-scroll" href="home.php?cek=logout"> 
         <p class="navbar-font">LOG OUT</p> 
        </a> 
       </li> 
        </ul> 
       </div> 
      </div><hr> 
      <!-- Footer Starts --> 
      <div class="footer"> 
       &copy; Copyright 2015 
      </div> 
      <!-- # Footer Ends -->       

     </div> 

     <div class="col-md-9 no-float"> 
      <div class="span"> 
       <header><p class="font-header br1" align="center" style="padding-top:10px;">SISTEM PENGADAAN BARANG/JASA <br>UPT SULSELRABAR </p><hr></header>       
       <div class="form-thumbnail"> 
        <form method="post"> 
         <h3 style="font-weight:bold" align="center">Surat Kuasa Kerja</h3> 
         <div class="form-group"> 
          Nomor SKK: 
          <input type="text" class="form-control" name="no_skk" placeholder="NO SKK" style="width:300px;"></input> 
         </div> 
         <div class="form-group"> 
          Tanggal Masuk: 
          <input type="date" class="form-control" name="tgl_skk" style="width:200px;"></input> 
         </div> 
         <div class="form-group" align="center"> 
          <button type="submit" class="btn btn-custom btn-default" name="btn_submit_skk" style="border-radius:0px"> Simpan </button> 
         </div> 
        </form> 
        <a class="page-scroll" href="kontrak-home.php?id=<?php echo $id;?>"> 
         <span class="glyphicon glyphicon-arrow-left"></span> Back 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 

    <script src="js/bootstrap.min.js"></script> 
</body> 
</HTML>

，我的頭標籤：

<head> 
    <title>Edit Surat Kuasa Kerja</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 


    <style> 
     * 
     { 
      margin:0;padding:0; 
     } 

     html,body,.container 
     { 
      height:100%; 
     } 

     .container 
     { 
      display:table; 
      width: 100%; 
      margin-top: -50px; 
      padding-top: 50px; 
      padding-left:0px; 
      padding-right:0px; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
     } 

     .font-header{ 
      font-weight:bold; 
      color:gold; 
      font-size:48px; 
      line-height:50px; 
     } 

     .font-kontrak{ 
      font-weight:bold; 
      color:black; 
     } 
     .font-progress>a:hover{ 

     } 
     .thumbnail{ 
      border-radius:0px 0px 0px 0px; 
     } 

     .footer { 
      position:absolute; 
      bottom:0px; 
      background-color: #3E4095; 
      height: 50px;/* or however high you would like */ 
      color:gold; 
      font-weight:bold; 
     } 

     header 
     { 
      background:#820404; 
      height: 130px; 
      margin-left:-15px; 
      margin-right:-15px; 
     } 



     #br1 
     { 
      line-height:25px; 
     } 
     .col-md-3.no-float, .col-md-9.no-float { 
      float: none; 
     } 

     .col-md-3 
     { 
      display: table-cell; 
      background: #3E4095; 
      width: 25%; 
     } 

     .col-md-9 
     { 
      display: table-cell; 
      width: 75%; 
      height:100vh; 
     } 


     input[type=text] 
     { 
      border-radius:0px 0px 0px 0px; 
     } 

     input[type=password] 
     { 
      border-radius:0px 0px 0px 0px; 
     } 

     input[type=date] 
     { 
      border-radius:0px 0px 0px 0px; 
     } 

     .navbar-font 
     { 
      font-size:16px; 
      font-weight:bold; 
      color:white; 
     }  

     .navbar-font-gold{ 
      font-size:16px; 
      font-weight:bold; 
      color:gold; 
     } 

     .nav li 
     { 
      line-height:15px; 
     } 

     .nav>li>a:hover 
     { 
      background-color:gold; 
      width:100%; 
      margin:0; 
     } 

     .p1{ 
      line-height: 20px; 
      font-weight:bold; 
      font-size:24px; 
     } 
     .row 
     { 
      height: 100%; 
      display: table-row; 
     } 

     .col-special{ 
      column-count:2; 
      -webkit-columns:2; 
      -moz-columns:2; 
      margin-left:6px; 
     } 

     .thumbnail{ 
      border-radius:0px 0px 0px 0px; 
      border:none; 

     } 

     .form-thumbnail{ 
      display: table; 
      background:#EEEEEE; 
      margin-top:10vh; 
      margin-left:40vh; 
      padding-bottom:30px; 
      padding-top:30px; 
      padding-left:70px; 
      padding-right:70px; 
     } 
</style>  
</head>

來源

2016-01-05 JON PANTAU

Can I Use: Date and time input types。簡而言之，這並沒有得到廣泛的支持。使用本機輸入類型在瀏覽器中當前不會有一致的行爲。

來源

2016-01-05 00:11:06 scniro

soooo ...我該怎麼辦？ –

你最好的選擇是使用圖書館。真的，找到一個說明點已經到位了，並且將取決於你使用的框架（如果有的話），例如jQuery，AngularJS等，有很多項目解決了這個問題。 [這裏]（http://www.bitrepository.com/a-collection-of-free-javascript-date-pickers.html）是一個有一些選項的文章。瀏覽github，當然你會發現一些直觀的使用，將解決您的需求 – scniro

http://stackoverflow.com/questions/10193294/how-can-i-tell-if-a-browser-supports-input-type-日期 – Steve

據我所知，Firefox不支持輸入日期類型。

來源

2016-01-05 00:12:35

我在Mozilla Firefox中的輸入日期與Google Chrome不同

回答

相關問題