Question

71

How to Customise the angular material date-picker?

rated 0 times [ 77] [ 6] / answers: 1 / hits: 39237 / 9 Years ago, wed, november 11, 2015, 12:00:00

I am using the material design date picker

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

and its shows the UI like this

I want to remove the calendar icon and include the ng-click functionality in the input box.

How to bind the runtime event with the input box?

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

malkajillc

Add To Favorites

Follow

Total Points: 652

Total Questions: 107

Total Answers: 98

Location: Finland

Member since Sat, Nov 6, 2021

3 Years ago

malkajillc questions

1 Vitest mock modules function in only one test and use the actual function in others

Wed, Nov 2, 22, 00:00, 2 Years ago

1 How to change PrismaClient database connection at runtime?

Tue, Jun 29, 21, 00:00, 3 Years ago

1 How do I add the axios package to my chrome extension I'm working on?

Tue, Dec 15, 20, 00:00, 4 Years ago

1 How to make a bot ping a user using discord.js

Fri, Aug 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'v4' of undefined

Tue, Aug 11, 20, 00:00, 4 Years ago

View All

answered 9 Years ago sam · Accepted Answer

Use the function for manipulate event and hide image of calendar as:

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>