如果Angular Material日期选择器不可见，可能是由于以下几个原因：

1. 缺少依赖：确保已正确导入@angular/material和@angular/cdk依赖。

2. 样式问题：确保已正确导入所需的样式文件。在styles.css或angular.json中添加以下代码：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

3. 组件未加载：确保日期选择器组件已正确加载。在需要使用日期选择器的组件中，确保已添加MatDatepickerModule到imports中：

import { MatDatepickerModule } from '@angular/material/datepicker';

@NgModule({
  imports: [
    // ...
    MatDatepickerModule,
    // ...
  ],
  // ...
})
export class YourModule { }

4. 组件位置问题：确保日期选择器组件在页面上可见。检查日期选择器组件的父组件是否隐藏或定位不正确。

5. 其他问题：检查浏览器控制台是否有错误消息。如果有，请根据错误消息进行调试和解决。

请参考以下示例代码：

在HTML模板中添加日期选择器输入框和按钮：

  
  
  

切换可见性

在组件中添加切换可见性的方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {
  visible = true;

  toggleVisibility() {
    this.visible = !this.visible;
  }
}

确保在需要使用日期选择器的模块中导入MatDatepickerModule：

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { DatePickerComponent } from './date-picker.component';

@NgModule({
  declarations: [DatePickerComponent],
  imports: [MatDatepickerModule],
  exports: [DatePickerComponent]
})
export class YourModule { }

请注意，以上代码仅供参考，你需要根据自己的项目结构和需求进行相应的调整和修改。