angular materialを使用していました。私はそれが非常に涼しく、よく設計され、ユーザーフレンドリーであることがわかります datepickerディレクティブのカレンダーiconを変更または削除しようとしていました。角度素材の日付ピッカーからカレンダーアイコンを削除または変更する
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
デフォルトのアイコンは非常に良いですが、アイコンをスキップしたい場合もあります。さて、私はここに私のsample plunkerあるこの
<md-icon md-svg-src="calendar.svg"></md-icon>
のようにMD-アイコンを使用してSVGのアイコンを使用することができます。 datepickerのデフォルトアイコンを変更/削除するためのアイデアを提案してください。
角度材料1.1.0には解決策がありますが、文書化されていないようです。アンギュラ材料/モジュール/のJS /日付ピッカー/ datepicker.jsから
：
* @param {String=} md-hide-icons Determines which datepicker icons should be hidden. Note that this may cause the
* datepicker to not align properly with other components. **Use at your own risk.** Possible values are:
* * `"all"` - Hides all icons.
* * `"calendar"` - Only hides the calendar icon.
* * `"triangle"` - Only hides the triangle icon.
使用法：
<md-datepicker ng-model="myModel" md-hide-icons="calendar"></md-datepicker>
アイコンを指定するためのAPIオプションは提供されておらず、datepicker templateのように表示されます。
md-calendarアイコンはテンプレート内にハードコードされています。私は自分自身の指示に基づいて指示を出し、それを直接変更することをお勧めします。
ありがとうございました。試してみます 。 – Rebel
Ralphによって提供されるソリューションは、私がdirectiveから新しいdirectiveを作成しなければならない複雑なものです。私はこの問題に対する簡単な解決策を見つけました。このmd-calendarのテンプレートは、だから私はクラスmd-datepicker-buttonのCSSを変更してbutton
.calendarDiv .md-datepicker-button{
display: none;
}
を隠し、この
のような別のカスタムiconを使用して、この
<md-button class="md-datepicker-button md-icon-button" type="button"
tabindex="-1" aria-hidden="true"
ng-click="ctrl.openCalendarPane($event)">
<md-icon class="md-datepicker-calendar-icon" md-svg-icon="md- calendar">
</md-icon>
</md-button>
のようなiconでbuttonを使用しています
<md-icon md-svg-src="calendar.svg"></md-icon>
iconはdefauとしては機能しませんlt iconしかし、これは私の問題を解決するだろう。
これは私のsample solution plunkerです。
ここでは、より良いsolutionです。
別のアイコンとbuttonを作成し、日付ピッカー
<div flex=40>
<md-icon md-svg-src="calendar.svg"></md-icon>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
</div>
と同じdiv要素に配置をオリジナルのdatepickerアイコンセット
<div flex=40>
<md-icon style="position:absolute;margin-top:15px; left:20px" md-svg-src="calendar.svg"></md-icon>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
</div>
をカバーするためにbutton postionを設定しました元のdatepickerアイコンが明らかです。
.md-datepicker md-icon {color: rgba(0,0,0,0) !important;}
.md-datepicker-open .md-datepicker-calendar-icon {fill:rgba(0,0,0,0)}
元の質問には、「日付ピッカーディレクティブのカレンダーアイコンを変更したり、削除する。」にする方法でしたか？
私はそれを削除する方法を知っています。
あなたは、単にCSSファイルに次のように入れて、あなたのページにそれを追加することにより、カレンダーアイコンを削除することができます。
.md-datepicker-button {
display: none !important;
}
.md-datepicker-input-container {
margin-left: 0 !important;
}
あなたは次のようにアイコンを変更して非表示にすることができます：
ファーストMD-日付ピッカー（1、より多くのターゲットにするか、クラス）のIDを与える：
<md-datepicker id="my-date-picker"></md-datepicker>
次に、あなたは、CSSのアイコンをターゲットと色、サイズ、表示などを変更することができます。
#my-date-picker .md-datepicker-calendar-icon { color: green; display: none; }
私はそれを削除する方法を知っています。
はちょうどあなたのCSS
div.layout-align-start-start.layout-row>.md-icon-button.md-button.md-ink-ripple:not(.md-raised){
display: none;}
MD-DatePickerの今アイコンを非表示にするための構成属性を持っているに以下のコードをコピーして貼り付けます。
MD-非表示アイコン文字列日付ピッカーアイコンを非表示にする必要があります
決定します：ドキュメントから。これにより、日付ピッカーが他のコンポーネントと正しく整列しないことがあります。自己責任。可能な値は次のとおりです。
FontAwesomeアイコン
/* override md material*/
.md-custom-theme .md-datepicker-input-container {
width: 100%;
border: none;
}
.md-custom-theme .md-datepicker-expand-triangle {
border:none;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-transform: none;
transform: none;
top: 6px;
right:0;
}
.md-custom-theme .md-datepicker-expand-triangle:before {
content: "\f073";
}.md-datepicker-button.md-icon-button {
display: none;
}
この1でカスタムテーマを使用して（私は右のカレンダーのアイコンをしたい）デフォルトの三角形のアイコンを上書きするためにCSSを使用しました私のために働く。
評価の低い回答！おかげで、私の問題を解決しました –
それは私にとって完璧に機能しました。 md-hide-icons = "all" - キャレットとカレンダーアイコンの両方を非表示にする md-hide-icons = "calendar" - カレンダーアイコンのみを非表示にする md- hide-icons = "triangle" - キャレットアイコンのみを隠す –