CODEWITHSUNDEEP
javascriptcsswebkitpolymer
Niklas
Niklas

Reputation: 1299

Styling the date picker in Polymer when used inside a paper-input with type date

Inside my Polymer project I am trying to build a advanced search that let's a user pick a date. I created a paper-input with a type of date. Obviously the date picker is not using material design, however when I am trying to style it nothing happens.

I am using these 8 pseudo-elements that are available by WebKit for customizing a date input’s textbox. 8 pseudo-elements
Below are the two ways listed I tried. I might do something wrong or is the webkit just not supported in Polymer. 

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/webcomponentsjs/webcomponents-lite.min.js">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">

<dom-module id="my-datepicker">
  <template>

    <style>
      :host {
        display: block;
      }
      paper-input ::content input::-webkit-datetime-edit-month-field{
        color: blue;
      }
      paper-input ::content input::-webkit-inner-spin-button {
        display: none;
      }
    </style>
    <style>
      paper-input ::content input::-webkit-datetime-edit-month-field{
        color: blue;
      }
      paper-input ::content input::-webkit-inner-spin-button {
        display: none;
      }
    </style>

    <!-- Paper Input with date Picker -->
    <paper-input label="Search a Date of Birth" type="date" always-Float-Label></paper-input>

  </template>
  <script>

    Polymer({

      is: 'my-datepicker',
      properties: {

      },

   });

  </script>
</dom-module>

Upvotes: 0

Views: 972

Answers (2)

LeBird
LeBird

Reputation: 728

There's a way to style date input, but you have to access the <paper-input>'s local DOM, i.e. the distributed content. It's pretty simple using the ::content pseudo-element (see the Styling local DOM guide from the documentation).

<style>
  paper-input ::content input::-webkit-datetime-edit-month-field{
    color: blue;
  }
  paper-input ::content input::-webkit-inner-spin-button {
    display: none;
  }
</style>

As far as I know, this is a Shady-DOM issue and is subject to change in future Polymer versions.

EDIT: Here's a working JSBin, where the month is displayed in blue and the inner spin button is hidden.

Upvotes: 1

akc42
akc42

Reputation: 5001

I am wondering if this is a styling scoping issue as I had a problem when trying to use the pikaday data picker. It wasn't hiding when it added a `is-hidden' class to the picker to hide it, with css telling it to display:none

The reason for this is explained in the developers guide and there is a function `this.scopeSubtree(containerElement,true) to get it to add observers looking for dom changes and putting them in scope. I am not sure it will work with these 'psuedo' elements but you could give it a try.

Upvotes: 1

Related Questions