locked
Placeholder for input type date RRS feed

  • Question

  • User588019485 posted

    Below is the code for View. I am trying to use placeholder for input type date but it doesnt work. However placeholder works for type text without any problem. 

     <input type="date" name="dateofbirth" placeholder="Date"/>

    @{
        var signup = (SignupViewModel)Model.Signup;
    
        Style.Include("Common.css");
    }
     
    @{
        Style.Include("datetime.css");        
        Script.Require("jQuery").AtFoot();
        Script.Require("jQueryUI_Core").AtFoot();
        Script.Require("jQueryUI_Widget").AtFoot();
        Style.Require("jQueryUI_Orchard").AtFoot();
        Script.Include("hint.js").AtFoot();
    }
    
    <style type="text/css">
        #wrapper {
            width:450px;
            margin-top:20px;
            font-family:Verdana, sans-serif;
        }
        legend {
            color:#0481b1;
            font-size:16px;
            padding:0 10px;
            background:#fff;
            -moz-border-radius:4px;
            box-shadow: 0 1px 5px rgba(4, 129, 177, 0.5);
            padding:5px 10px;
            text-transform:uppercase;
            font-family:Helvetica, sans-serif;
            font-weight:bold;
        }
        fieldset {
            border-radius:4px;
            background: #fff; 
            background: -moz-linear-gradient(#fff, #f9fdff);
            background: -o-linear-gradient(#fff, #f9fdff);
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f9fdff)); 
            background: -webkit-linear-gradient(#fff, #f9fdff);
            padding:20px;
            border-color:rgba(4, 129, 177, 0.4);
        }
        input,
        textarea {
            color: #373737;
            background: #fff;
            border: 1px solid #CCCCCC;
            color: #aaa;
            font-size: 14px;
            line-height: 1.2em;
            margin-bottom:15px;
            -moz-border-radius:4px;
            -webkit-border-radius:4px;
            border-radius:4px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        input[type="text"],
        input[type="password"]{
            padding: 2px 2px;
            height: 20px;
            width:250px;
        }
        input[type="text"]:focus,
        input[type="password"]:focus {
            background:#f5fcfe;
            text-indent: 0;
            z-index: 1;
            color: #373737;
            -webkit-transition-duration: 400ms;
            -webkit-transition-property: width, background;
            -webkit-transition-timing-function: ease;
            -moz-transition-duration: 400ms;
            -moz-transition-property: width, background;
            -moz-transition-timing-function: ease;
            -o-transition-duration: 400ms;
            -o-transition-property: width, background;
            -o-transition-timing-function: ease;
            width: 300px;
            
            border-color:#ccc;
            box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
            opacity:0.6;
        }
        input[type="submit"]{
            background: #222;
            border: none;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
            text-transform:uppercase;
            color: #eee;
            cursor: pointer;
            font-size: 15px;
            margin: 5px 0;
            padding: 5px 22px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-border-radius:4px;
            -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
            -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
            box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
        }
        textarea {
            padding:3px;
            width:96%;
            height:100px;
        }
        textarea:focus {
            background:#ebf8fd;
            text-indent: 0;
            z-index: 1;
            color: #373737;
            opacity:0.6;
            box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
            border-color:#ccc;
        }
        .small {
            line-height:14px;
            font-size:12px;
            color:#999898;
            margin-bottom:3px;
        }
    </style>
    
    @Html.ValidationSummary()
    
    @using (Html.BeginFormAntiForgeryPost(Url.Action("Signup", "SignupOrLogin", new { area = "Course" }))) {
            
         <div id="wrapper">
            <form action="" method="post">
                <fieldset>
                    <legend>Register Form</legend>
    
                    <div>
                        <input type="text" name="first_name" placeholder="First Name"/>
                    </div>
                    <div>
                        <input type="text" name="last_name" placeholder="Last Name"/>
                    </div>
                    <div>
                        <input type="date" name="dateofbirth" placeholder="Date"/>
                    </div>
                        
                    <div>
                        <input type="text" name="housename" placeholder="House Name/No."/>
                    </div>
                    <div>
                        <input type="text" name="street" placeholder="Street"/>
                    </div>
                    <div>
                        <input type="text" name="town" placeholder="Town"/>
                    </div>
                    <div>
                        <input type="text" name="county" placeholder="County"/>
                    </div>
                    <div>
                        <input type="text" name="postcode" placeholder="Post Code"/>
                    </div>
                    <div>
                        <input type="text" name="homephone" placeholder="Home Phone"/>
                    </div>
                    <div>
                        <input type="text" name="mobilephone" placeholder="Mobile Phone"/>
                    </div>
                    <div>
                        <input type="text" name="bcunumber" placeholder="BCU Number"/>
                    </div>
                    <div>
                        <input type="password" name="password" placeholder="Password"/>
                    </div>
                    <div>
                        <input type="password" name="confirmpassword" placeholder="Confirm Password"/>
                    </div>
                    <div>
                        <input type="text" name="email" placeholder="Email"/>
                    </div>
                    <div>                    
                        <textarea name="message" placeholder="Health Declaration"></textarea>
                    </div>  
                    @Html.CheckBoxFor(m => signup.AcceptTerms)
                    <div class="checkbox-and-label">                    
                        <label for="@Html.FieldIdFor(m => signup.AcceptTerms)">
                            @Html.Raw(T(" Please tick to confirm you have read, understood and agree to abide by our <a href=\"{0}\" target=\"_blank\">Terms and Conditions</a>", "#").ToString())
                        </label>
                    </div>  
                    <input type="submit" name="submit" value="Send"/>
                </fieldset>    
            </form>
        </div>
      
    }

    Friday, February 21, 2014 6:40 AM

Answers

All replies

  • User1071505668 posted

    Hi

    Please use the below modifued code it will resolve the issue

    @{
        var signup = (SignupViewModel)Model.Signup;
    
        Style.Include("Common.css");
    }
     
    @{
        Style.Include("datetime.css");        
        Script.Require("jQuery").AtFoot();
        Script.Require("jQueryUI_Core").AtFoot();
        Script.Require("jQueryUI_Widget").AtFoot();
        Style.Require("jQueryUI_Orchard").AtFoot();
        Script.Include("hint.js").AtFoot();
    }
    
    <style type="text/css">
        #wrapper {
            width:450px;
            margin-top:20px;
            font-family:Verdana, sans-serif;
        }
        legend {
            color:#0481b1;
            font-size:16px;
            padding:0 10px;
            background:#fff;
            -moz-border-radius:4px;
            box-shadow: 0 1px 5px rgba(4, 129, 177, 0.5);
            padding:5px 10px;
            text-transform:uppercase;
            font-family:Helvetica, sans-serif;
            font-weight:bold;
        }
        fieldset {
            border-radius:4px;
            background: #fff; 
            background: -moz-linear-gradient(#fff, #f9fdff);
            background: -o-linear-gradient(#fff, #f9fdff);
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f9fdff)); 
            background: -webkit-linear-gradient(#fff, #f9fdff);
            padding:20px;
            border-color:rgba(4, 129, 177, 0.4);
        }
        input,
        textarea {
            color: #373737;
            background: #fff;
            border: 1px solid #CCCCCC;
            color: #aaa;
            font-size: 14px;
            line-height: 1.2em;
            margin-bottom:15px;
            -moz-border-radius:4px;
            -webkit-border-radius:4px;
            border-radius:4px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        input[type="text"],
        input[type="password"],input[type="date"]{
            padding: 2px 2px;
            height: 20px;
            width:250px;
        }
        input[type="text"]:focus,
        input[type="password"]:focus,input[type="date"]:focus {
            background:#f5fcfe;
            text-indent: 0;
            z-index: 1;
            color: #373737;
            -webkit-transition-duration: 400ms;
            -webkit-transition-property: width, background;
            -webkit-transition-timing-function: ease;
            -moz-transition-duration: 400ms;
            -moz-transition-property: width, background;
            -moz-transition-timing-function: ease;
            -o-transition-duration: 400ms;
            -o-transition-property: width, background;
            -o-transition-timing-function: ease;
            width: 300px;
            
            border-color:#ccc;
            box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
            opacity:0.6;
        }
        input[type="submit"]{
            background: #222;
            border: none;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
            text-transform:uppercase;
            color: #eee;
            cursor: pointer;
            font-size: 15px;
            margin: 5px 0;
            padding: 5px 22px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-border-radius:4px;
            -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
            -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
            box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
        }
        textarea {
            padding:3px;
            width:96%;
            height:100px;
        }
        textarea:focus {
            background:#ebf8fd;
            text-indent: 0;
            z-index: 1;
            color: #373737;
            opacity:0.6;
            box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
            border-color:#ccc;
        }
        .small {
            line-height:14px;
            font-size:12px;
            color:#999898;
            margin-bottom:3px;
        }
    </style>
    
    @Html.ValidationSummary()
    
    @using (Html.BeginFormAntiForgeryPost(Url.Action("Signup", "SignupOrLogin", new { area = "Course" }))) {
            
         <div id="wrapper">
            <form action="" method="post">
                <fieldset>
                    <legend>Register Form</legend>
    
                    <div>
                        <input type="text" name="first_name" placeholder="First Name"/>
                    </div>
                    <div>
                        <input type="text" name="last_name" placeholder="Last Name"/>
                    </div>
                    <div>
                        <input type="date" name="dateofbirth" placeholder="Date"/>
                    </div>
                        
                    <div>
                        <input type="text" name="housename" placeholder="House Name/No."/>
                    </div>
                    <div>
                        <input type="text" name="street" placeholder="Street"/>
                    </div>
                    <div>
                        <input type="text" name="town" placeholder="Town"/>
                    </div>
                    <div>
                        <input type="text" name="county" placeholder="County"/>
                    </div>
                    <div>
                        <input type="text" name="postcode" placeholder="Post Code"/>
                    </div>
                    <div>
                        <input type="text" name="homephone" placeholder="Home Phone"/>
                    </div>
                    <div>
                        <input type="text" name="mobilephone" placeholder="Mobile Phone"/>
                    </div>
                    <div>
                        <input type="text" name="bcunumber" placeholder="BCU Number"/>
                    </div>
                    <div>
                        <input type="password" name="password" placeholder="Password"/>
                    </div>
                    <div>
                        <input type="password" name="confirmpassword" placeholder="Confirm Password"/>
                    </div>
                    <div>
                        <input type="text" name="email" placeholder="Email"/>
                    </div>
                    <div>                    
                        <textarea name="message" placeholder="Health Declaration"></textarea>
                    </div>  
                    @Html.CheckBoxFor(m => signup.AcceptTerms)
                    <div class="checkbox-and-label">                    
                        <label for="@Html.FieldIdFor(m => signup.AcceptTerms)">
                            @Html.Raw(T(" Please tick to confirm you have read, understood and agree to abide by our <a href=\"{0}\" target=\"_blank\">Terms and Conditions</a>", "#").ToString())
                        </label>
                    </div>  
                    <input type="submit" name="submit" value="Send"/>
                </fieldset>    
            </form>
        </div>
      
    }

    Thanks

    .Net Pickles

    Friday, February 21, 2014 6:50 AM
  • User588019485 posted

    Although date input is now expanding like other input fields but still no text shown on date input as "Date of Birth" see image in link 

    http://www.pixentral.com/show.php?picture=1sfimVSgDBoAuniG5xiRuUryIlmcJ

    Friday, February 21, 2014 7:07 AM
  • User-417640953 posted

    Hello,

    Thank you post the issue to our forum.

    I test below code and the placeholder text shows fine in IE10.

      <div>
         <input type="date" name="first_name" placeholder="dd/mm/yyyy"/>
      </div>
      <div>
         <input type="date" name="last_name" placeholder="Date Of Birth"/>
      </div>
      <div>
         <input type="date" name="dateofbirth" placeholder="Date"/>
      </div>

    There is a working demo below, you can check it.

    http://jsfiddle.net/vnAb7/4/

    And also some browsers with different versions not support the html5 placeholder with input type date.

    http://stackoverflow.com/questions/8430416/html5-date-field-and-placeholder-text-in-safari

    So you can try to using the javascript complete it like below.

    <input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">
     

    http://stackoverflow.com/questions/20321202/not-showing-place-holder-for-input-type-date-field-ios-phonegap-app

    Thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 25, 2014 3:12 AM
  • User588019485 posted

    Thanks its working.. can we have same placeholder for select type controls 

    e.g. 

    <select style="width:250px"></select>

    Tuesday, February 25, 2014 5:37 AM
  • User-1233801435 posted

    Well you should see this demo, clearly explains placeholder attribute <a href="http://www.tutorialspark.com/html5/HTML5_Form_Input.php">here</a>

    Tuesday, February 25, 2014 6:15 AM