如何在datePicker组件内显示提示字符串并在选完日期后隐藏？

原生HTML/JavaScript方案 #

针对原生日期输入框，可结合placeholder属性和自定义提示文本解决浏览器兼容问题：

<div class="date-picker-container">
  <input type="date" id="birthDate" placeholder="请选择您的出生日期">
  <span class="date-hint" id="dateHint">请选择您的出生日期</span>
</div>

<style>
.date-picker-container {
  position: relative;
  display: inline-block;
}
.date-hint {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}
/* 输入框有值时隐藏自定义提示 */
#birthDate:not(:placeholder-shown) + .date-hint {
  display: none;
}
</style>

<script>
const birthDateInput = document.getElementById('birthDate');
birthDateInput.addEventListener('change', function() {
  this.placeholder = this.value ? '' : '请选择您的出生日期';
});
</script>

Vue + Element UI方案 #

Element UI的el-date-picker自带placeholder属性，选中日期后会自动替换为选中值，无需额外处理：

<template>
  <el-date-picker
    v-model="birthDate"
    type="date"
    placeholder="请选择您的出生日期"
    value-format="YYYY-MM-DD"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      birthDate: ''
    }
  }
}
</script>

如果是自定义组件，可通过v-if控制提示文本显示：

<template>
  <div class="custom-date-picker">
    <input 
      type="date" 
      v-model="birthDate"
    >
    <span v-if="!birthDate" class="hint-text">请选择您的出生日期</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      birthDate: ''
    }
  }
}
</script>

<style scoped>
.custom-date-picker {
  position: relative;
}
.hint-text {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}
</style>

React + Ant Design方案 #

Ant Design的DatePicker支持placeholder属性，选中后自动隐藏提示：

import React, { useState } from 'react';
import { DatePicker } from 'antd';
import 'antd/dist/reset.css';

function BirthDatePicker() {
  const [birthDate, setBirthDate] = useState(null);

  return (
    <DatePicker
      value={birthDate}
      onChange={(date) => setBirthDate(date)}
      placeholder="请选择您的出生日期"
      format="YYYY-MM-DD"
    />
  );
}

export default BirthDatePicker;

自定义组件可通过state控制提示显示：

import React, { useState } from 'react';

function CustomDatePicker() {
  const [birthDate, setBirthDate] = useState('');

  return (
    <div style={{ position: 'relative', display: 'inline-block' }}>
      <input
        type="date"
        value={birthDate}
        onChange={(e) => setBirthDate(e.target.value)}
        style={{ padding: '8px' }}
      />
      {!birthDate && (
        <span 
          style={{
            position: 'absolute',
            left: '12px',
            top: '50%',
            transform: 'translateY(-50%)',
            color: '#999',
            pointerEvents: 'none'
          }}
        >
          请选择您的出生日期
        </span>
      )}
    </div>
  );
}

export default CustomDatePicker;

内容的提问来源于stack exchange，提问作者Lanklaas