iOS用のカスタムDatePickerをつくりました

See the Pen Custom DatePicker for iOS by kimmy (@kimmy) on CodePen.

フォームをCSSでカスタムするのはなかなか骨が折れる作業なので、
inputタグを透明にしてしまい、上にDOMを置くことで編集しました。
iPhoneでご確認ください。

http://codepen.io/kimmy/full/EyzWjV/

HTML

<div class="wrapper">
  <div class="box date">
    <div class="icon">DATE</div>
    <input id="datePicker" max="9999-12-31" min="1-01-01" type="date" value="" class="input"/>
    <div id="dataDisplay" class="display">
      <p class="year"></p>
      <p class="month"></p>
      <p class="day"></p>
    </div>
  </div>
</div>

SCSS

@import "compass/reset";

$box-height: 115px;
$header-height: 20px;

%header-box {
  &:before {
    position: absolute;
    top: 0;
    left: 0; right: 0;
    height: $header-height;
    font-size: 1.2rem;
    line-height: $header-height;
  }
}

html {
  height: 100%;
  font: 10px AvenirNext-Heavy;
}

body {
  height: 100%;
  color: #fff;
  background: #5ed0ba;
}

.wrapper {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
}

.box {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  max-width: 345px;
  width: 100%; height: $box-height;
  
  .icon {
    position: absolute;
    top: -100px;
    left: 0; right: 0;
    margin: auto;
    border-radius: 6px;
    width: 48px; height: 42px;
    font-size: 1.8rem;
    background: linear-gradient(top, #f6b517 0%, #f6b517 25%, #fff 26%, #fff 100%);
    line-height: 120px;
    text-align: center;
    
    &:before {
      display: block;
      position: absolute;
      top: -6px; left: 8px;
      border-radius: 2.5px;
      width: 5px; height: 12px;
      content: "";
      background: #fff;
      box-shadow: 27px 0 0 #fff;
    }
    
    &:after {
      display: block;
      position: absolute;
      top: 16px; left: 7px;
      width: 7px; height: 5px;
      content: "";
      background: #5dade2;
      box-shadow: 9px 0 0 #5dade2, 18px 0 0 #ec7063, 27px 0 0 #5dade2, 0 7px 0 #5dade2, 9px 7px 0 #5dade2, 18px 7px 0 #5dade2, 27px 7px 0 #5dade2, 0 14px 0 #5dade2, 9px 14px 0 #5dade2, 18px 14px 0 #5dade2, 27px 14px 0 #5dade2;
    }
  }
  
  &:before {
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 33.33%; height: 9999px;
    content: "";
    background: rgba(0, 0, 0, .1);
    pointer-events: none;
    z-index: 1;
    transform-origin: 0 0;
    transform: skewX(45deg);
  }
  
  &:after {
    display: block;
    position: absolute;
    top: $box-height; left: 0;
    width: 100%; height: 9999px;
    content: "";
    background: rgba(0, 0, 0, .1);
    pointer-events: none;
    z-index: 1;
    transform-origin: 0 0;
    transform: skewX(45deg);
  }

  .input {
    display: block;
    border: none;
    margin: 0; padding: 0;
    font-size: 16px;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .display {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: $box-height;
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    line-height: $box-height + $header-height;
    text-align: center;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
  }
}

.year {
  float: left;
  position: relative;
  width: 33.33%; height: 100%;
  background: #5dade2;
  
  &:before {
    @extend %header-box;
    content: "YEAR";
    background: #3498db;
  }
}

.month {
  float: left;
  position: relative;
  width: 33.33%; height: 100%;
  background: #f6b517;

  &:before {
    @extend %header-box;
    content: "MONSE";
    background: #f39c12;
  }
}

.day {
  float: left;
  position: relative;
  width: 33.33%; height: 100%;
  background: #ec7063;
  
  &:before {
    @extend %header-box;
    content: "DAY";
    background: #e74c3c;
  }
}

JavaScript

class Picker {
    constructor($elm) {
        this.$elm = $elm;
        this.$input = this.$elm.find(".input");
        this.$display = this.$elm.find(".display");
      
        this.$input.val(this._getDate()).on("change", (evt) => {
            this._display();
        }).trigger("change");
         
        this._setInputSize();
    }
    
    _setInputSize() {
        this.$input.width(this.$elm.width());
        this.$input.height(this.$elm.height());
    }

    _getDate() {
      var now = new Date();
      
      return (now.getFullYear()) + "-" + ("0" + (now.getMonth() + 1)).slice(-2) + "-" + ("0" + now.getDate()).slice(-2);
    }
  
    _display() {
      if (this.$input.val()) {
        this.$display.html("<p class='year'>" + (this.$input.val()).replace("-", "</p><p class='month'>").replace("-", "</p><p class='day'>") + "</p>");
      } else {
        this.$display.html("<p class='year'></p><p class='month'></p><p class='day'></p>");
      }
    }
}

new Picker($(".box").eq(0));