How to add placeholder <input type=“datetime-local”> field?

后端 未结 5 648
忘了有多久
忘了有多久 2021-01-21 06:36

I\'ve been trying to add placeholder in input type=\'datetime-local\' field but it doesn\'t work at all. Use css for solving the issue but still unable to do it :(

相关标签:
5条回答
  • 2021-01-21 06:55

    Sharath Daniel is on the right lines. A jQuery version: http://jsfiddle.net/2e97L3d0/1/

    HTML

    <form action="" method="post">
    <div class="datetime">
        <input type="text" id="datetime1" placeholder="Enter the starting date"  >
    </div>
    

    Javascript

    $(document).ready(function(){
    $("#datetime1").focus( function() {
        $(this).attr({type: 'datetime-local'});
      });
    

    });

    0 讨论(0)
  • 2021-01-21 07:01

    I have tried this solution Here I tried to get YYYY-MM-DD HH:mm pattern placeholder y, u can make your own format Just change value format, data-date-format and add pattern in js too. HTML :

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
    <input type="datetime-local" data-date="" data-date-format="YYYY-MM-DD HH:mm" value="2000-01-01T00:00:00">
    

    JS :

    $("input").on("change", function() {
        this.setAttribute(
            "data-date",
            moment(this.value, "YYYY-MM-DD'T'HH:mm:ss")
            .format( this.getAttribute("data-date-format") )
        )
    }).trigger("change")
    
    

    CSS:

    input {
        position: relative;
        width: 150px; height: 20px;
        color: white;
    }
    
    input:before {
        position: absolute;
        top: 3px; left: 3px;
        content: attr(data-date);
        display: inline-block;
        color: black;
    }
    
    input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
        display: none;
    }
    
    input::-webkit-calendar-picker-indicator {
        position: absolute;
        top: 3px;
        right: 0;
        color: black;
        opacity: 1;
    }
    
    0 讨论(0)
  • 2021-01-21 07:05

    A bit tricky, but it works:

    Html:

    <form action="" method="post">
        <div class="datetime">
            <input id="pholderInput" class="placeholder"  type="datetime-local">
        </div>
    </form>
    

    Css:

    .placeholder
    {
      color: gray;
    }
    
    .focused
    {
      color: black;
    }
    

    Javascript:

    var inp = document.getElementById("pholderInput");
    
    var placeholderText = "default text";
    
    inp.value = placeholderText;
    
    inp.onfocus = function(e) {
        if (inp.value == placeholderText)
        {
            inp.value = "";
            inp.className = "focused";
        }
    };
    
    inp.onblur = function(e) {
        if (inp.value === "")
        {
            inp.value = placeholderText;
            inp.className = "placeholder";
        }
    };
    

    JSBin

    0 讨论(0)
  • 2021-01-21 07:07

    This is kind of a wonky idea, change the input type to text, then it will convert to datetime-local on focus using the below javascript.

    <input type="text" id="txtbox" placeholder="Heya">
    
    <script>
      var dtt = document.getElementById('txtbox')
      dtt.onfocus = function (event) {
          this.type = 'datetime-local';
          this.focus();
      }
    </script>
    
    0 讨论(0)
  • 2021-01-21 07:13

    Try this code:

    $(document).ready(function(){
        $("input[type='datetime-local']").attr('placeholder','date time');
    });
    

    FIDDLE DEMO

    0 讨论(0)
提交回复
热议问题