web-dev-qa-db-ja.com

入力タイプの日付のプレースホルダーhtml5

プレースホルダーは、入力タイプの日付に対して直接機能しません。

<input required="" type="text" class="form-control" placeholder="Date"/>

代わりに、mm/dd/yyyと表示されます

表示方法日付？

htmldateplaceholder
4
Elyor

onfocus="(this.type='date')"を使用します。例：

<input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/>
21
Elyor

onfocusとonblurを使用してください...これが例です：

<input type="text" placeholder="Birth Date" onfocus="(this.type='date')" onblur="if(this.value==''){this.type='text'}">
8
Leandro Da Silva

ここでは、data要素のinput属性を試しました。 CSSを使用して必要なプレースホルダーを適用しました

<input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" />

    input[type="date"]::before { 
        content: attr(data-placeholder);
        width: 100%;
    }
    
    /* hide our custom/fake placeholder text when in focus to show the default
     * 'mm/dd/yyyy' value and when valid to show the users' date of birth value.
     */
    input[type="date"]:focus::before,
    input[type="date"]:valid::before { display: none }
<input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" />

お役に立てれば

1
Rohan Khude

angular 2の場合、このディレクティブを使用できます

import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
  selector: '[appDateClick]'
})
export class DateClickDirective {
  @HostListener('focus') onMouseFocus() {
    this.el.nativeElement.type = 'date';
    setTimeout(()=>{this.el.nativeElement.click()},2);
  }

  @HostListener('blur') onMouseBlur() {
    if(this.el.nativeElement.value == ""){
      this.el.nativeElement.type = 'text';
    }
  }


  constructor(private el:ElementRef) { }

}

以下のように使用してください。

 <input appDateClick name="targetDate" placeholder="buton name" type="text">
1
Dhafer.Dhib