My input date in Mozilla Firefox is different with Google Chrome

Question

I already make a form consist of two inputs (input text and input date) and a button. I design the form in Google Chrome.

Here it is :

After I finished the form, I'm trying to open the page in Mozilla Firefox Browser and I see that the date input is not date-formatted.

Like this :

This is my code

 <!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>

and my head tag is :

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

Answer 1

Can I Use: Date and time input types . Simply put, this is not widely supported. Using the native input type will currently not have a consistent behavior across browsers.

Answer 2

据我所知，Firefox不支持输入日期类型。

My input date in Mozilla Firefox is different with Google Chrome

Question

2 answers

solution1
2 2016-01-05 00:11:06

solution2
1 2016-01-05 00:12:35

My input date in Mozilla Firefox is different with Google Chrome

Question

2 answers

solution1 2 2016-01-05 00:11:06

solution2 1 2016-01-05 00:12:35

solution1
2 2016-01-05 00:11:06

solution2
1 2016-01-05 00:12:35