0

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>
Community
  • 1
  • 1
Niklas
  • 1,142
  • 16
  • 33

2 Answers2

1

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.

akc42
  • 4,893
  • 5
  • 41
  • 60
1

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.

LeBird
  • 728
  • 5
  • 17
  • According to the documentation, this is the right way to do it. Thanks for that! Unfortunately it is not working. I tried to replace the paper-input with an id same issue. Seems like the styling can't get through. – Niklas Sep 28 '16 at 10:48
  • Interesting. I've added a full example on JSBin that seems to work just fine (I'm on Chrome 53.0 / Mac). Maybe you could add more than the – LeBird Sep 29 '16 at 15:09
  • I edited my question above... In addition to my existing code I removed the paper-input and created it as an custom element. I tried to follow your JSBin but for some reason it just wont work. I am using also Chrome and with my previous code and with the current custom element the inner spin button is showing up. After that I opened my file in Firefox and Safari and in both browsers there is no date picker displayed at all. which is weird because according to W3school it should work at least in safari – Niklas Oct 04 '16 at 14:27
  • I see that you are using a tag to import the webcomponents-lite.min.js script (the webcomponent polyfill). This should be a – LeBird Oct 05 '16 at 10:05
  • thats right thanks for pointing it out unfortunately thats not creating the error and i do have it imported in my main file – Niklas Oct 05 '16 at 11:32