Javascript 如何定制角材料日期选择器？

我正在使用材质设计日期选择器

<md-content flex class="padding-top-0 padding-bottom-0" layout="row">
                <md-datepicker ng-model="user.submissionDate" md-placeholder="Start date" flex ng-click="ctrl.openCalendarPane($event)"></md-datepicker>
                <md-datepicker ng-model="user.submissionDate" md-placeholder="Due date" flex></md-datepicker>
            </md-content>

它的UI是这样显示的

我想删除日历图标，并在输入框中包含ng click功能

如何将运行时事件与输入框绑定

css

<style>
 .inputdemoBasicUsage .md-datepicker-button {
    width: 36px; }
    .inputdemoBasicUsage .md-datepicker-input-container {
    margin-left: 2px;
  }
    .md-datepicker-input-container{
    display:block;
    }
    .md-datepicker-input[placeholder]{
        color=red;
    }

    .padding-top-0{
    padding-top:0px;}

    .padding-bottom-0{
    padding-bottom:0px;
    }
</style>

.inputdemoBasicUsage.md日期选择器按钮{
宽度：36px；}
.inputdemoBasicUsage.md日期选择器输入容器{
左边距：2倍；
}
.md日期选择器输入容器{
显示：块；
}
.md日期选择器输入[占位符]{
颜色=红色；
}
.padding-top-0{
填充顶部：0px；}
.padding-bottom-0{
垫底：0px；
}

使用操作事件和隐藏日历图像的功能，如下所示：

var-app=angular.module（'StarterApp'，['ngMaterial']）；
app.controller（'AppController'，函数（$scope）{
$scope.initDatepicker=函数（）{
元素（“.md日期选择器按钮”）。每个（函数（）{
var el=这个；
var ip=angular.element（el.parent（）.find（“input”）.bind（'click'，函数（e）{
angular.element（el）.click（）；
});
angular.element（this.css（'visibility'，'hidden'）；
});
};
});
.inputdemoBasicUsage.md日期选择器按钮{
宽度：36px；
}
.inputdemoBasicUsage.md日期选择器输入容器{
左边距：2倍；
}
.md日期选择器输入容器{
显示：块；
}
.md日期选择器输入[占位符]{
颜色：红色；
}
.padding-top-0{
填充顶部：0px；
}
.padding-bottom-0{
垫底：0px；
}
使用上述anwser，我更改了此行以更好地显示：

.md-datepicker-input-container {
  width: 100%;
  margin-left: 0px;
}

除了@EmirMarques answer之外，我还想将输入字段设置为只读。所以我添加了这个代码。此处用户无法编辑日期输入字段。所以这是更好的一个

而这个CSS让它看起来更好

.md-datepicker-input-container {
    display: block;
    margin-left: 0 !important;
    width: 100% !important;;
}

为什么不使用AngularJs MD功能


md hide icons=“all | triangle | calendar”：隐藏所有/三角形或日历按钮
和md open on focus在输入框单击时打开日期选择器



我还想知道如何在这里拆分日期字段和选择器。Thx.只需检查浏览器输出的元素，然后将其映射到css文件上，使用！重要的是我是css和angular的新手，你能给我解释一下或者给我一些链接，让我了解ip是如何工作的吗？这是一个非常好的解决方案helpfull@santhosh，我不明白你的问题。您可以阅读angular或material的文档：我不理解变量ip的初始化。实际上，我正试图在我的组件中编写我自己的样式，就像您一样，但它不会影响输出，我必须编写我自己的样式才能生效，现在正在我的.component.css中编写。
.md-datepicker-input-container {
    display: block;
    margin-left: 0 !important;
    width: 100% !important;;
}