如何自定义角度材料日期选择器？

Posted 2023-03-06

【中文标题】如何自定义角度材料日期选择器？

【英文标题】：How to Customise the angular material date-picker?

【发布时间】：2016-02-12 06:40:58

【问题描述】：

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

<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>

它显示这样的用户界面

我想删除日历图标并在输入框中包含 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>

【问题讨论】：

我也对如何在这里拆分日期字段和选择器感兴趣。谢谢。

只需检查浏览器输出的元素，然后将其映射到您的 css 文件中使用 !important 更改它

【参考方案1】：

为什么不使用 AngularJs MD 功能？

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

<md-content flex class="padding-top-0 padding-bottom-0" layout="row">
                <md-datepicker ng-model="user.submissionDate" md-placeholder="Start date" flex md-hide-icons="calendar" md-open-on-focus></md-datepicker>
                <md-datepicker ng-model="user.submissionDate" md-placeholder="Due date" flex md-hide-icons="calendar" md-open-on-focus></md-datepicker>
            </md-content>

【参考方案2】：

使用操作事件和隐藏日历图像的功能为：

var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppController', function($scope) 
    $scope.initDatepicker = function()
        angular.element(".md-datepicker-button").each(function()
            var el = this;
            var ip = angular.element(el).parent().find("input").bind('click', function(e)
                angular.element(el).click();
            );
            angular.element(this).css('visibility', 'hidden');
        );
    ;
);

.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;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">

<div ng-app="StarterApp" ng-controller="AppController" ng-init="initDatepicker();">
    <md-content flex class="padding-top-0 padding-bottom-0" layout="row">
        <md-datepicker ng-model="user.submissionDate1" md-placeholder="Start date" flex ng-click="ctrl.openCalendarPane($event)"></md-datepicker>
        <md-datepicker ng-model="user.submissionDate2" md-placeholder="Due date" flex></md-datepicker>
    </md-content>
</div>

【讨论】：

我是 css 和 angular 的新手，请您解释一下或提供一些链接，以便我了解该 ip 是如何工作的。很好的解决方案真的很有帮助

@santhosh，我不明白你的问题。可以阅读angular或material的文档：krescruz.github.io/angular-materialize

我不明白初始化变量ip。

【参考方案3】：

除了@EmirMarques 答案，我想让输入字段只读。所以我添加了这段代码。此处用户无法编辑日期输入字段。所以它的

更好的一个

$scope.initDatepicker = function()
        angular.element(".md-datepicker-button").each(function()
            var el = this;
            var ip = angular.element(el).parent().find("input").bind('click', function(e)
                angular.element(el).click();
            );
            angular.element(el).parent().find("input").prop('readonly', true);
            angular.element(this).css('visibility', 'hidden');
        );
;

这个 CSS 让外观更好看

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

【参考方案4】：

使用上面的anwser，我改变了这行以更好地显示：

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

【讨论】：

实际上我正在尝试在我的组件中编写我自己的样式，但它不会影响输出，我必须编写自己的样式才能生效，现在我正在编写 my.component。 css.