Notwithstanding #24, the 3rd-party spinning wheel object is only required because the HTML5 date input type doesn't support a format of DD-MM only (with no year).

All other uses of the spinning wheel control (eg. Series Move To / Now Showing) could be implemented as standard <select> controls.

For the remaining use (episode status dates), we could simply implement the required functionality ourselves and drop the 3rd-party control altogether, which would mean

we don't need to shim it for require.js purposes
we can unit test it
we have full control over it's markup / JS / CSS
we don't need to use the TouchEventProxy for it, as we can have it use native scrolling.

There are some challenges to overcome, such as:

3D 'barrel' effect to match native iOS picker
snap to selected item
show/hide animation
button events (cancel / OK)
needs to scroll past first/last item because the 'current selection' area is in the middle

Some sample code:

CSS

/* Status date picker */
#statusDatePicker {
     display: none;
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 200px;
     z-index: 1000;
}

/* Top border for status date picker */
#statusDatePicker div:first-child {
     border-top: 1px solid rgb(200, 199, 204);
}

/* Lists in status date picker */
#statusDatePicker ul {
     height: 154px;
     width: 50%;
}

/* Day picker */
#statusDatePicker ul:first-child {
     float: left;
     text-align: right;
}

/* Month picker */
#statusDatePicker ul:last-child {
     float: right;
}

/* Picker entries */
#statusDatePicker ul li {
     margin: 0;
     padding: 3px 15px;
     border: 0;
}

/* Current selection frame */
#currentSelection {
     position: absolute;
     left: 0;
     right: 0;
     height: 24px;
     bottom: 65px;
     margin: 0 10px;
     border-top: 1px solid #E0E0E0;
     border-bottom: 1px solid #E0E0E0;
     pointer-events: none;
}

Markup

<div id="statusDatePicker">
     <div>
          <a class="button header left">Cancel</a>
          <h1>&nbsp;</h1>
          <a class="button header right confirmButton">Done</a>
     </div>
     <div>
          <ul>
               <li>01</li>
               <li>02</li>
               <li>03</li>
               <li>04</li>
               <li>05</li>
               <li>06</li>
               <li>07</li>
               <li>08</li>
               <li>09</li>
               <li>10</li>
               <li>11</li>
               <li>12</li>
               <li>13</li>
               <li>14</li>
               <li>15</li>
               <li>16</li>
               <li>17</li>
               <li>18</li>
               <li>19</li>
               <li>20</li>
               <li>21</li>
               <li>22</li>
               <li>23</li>
               <li>24</li>
               <li>25</li>
               <li>26</li>
               <li>27</li>
               <li>28</li>
               <li>29</li>
               <li>30</li>
               <li>31</li>
          </ul>
          <ul>
               <li>Jan</li>
               <li>Feb</li>
               <li>Mar</li>
               <li>Apr</li>
               <li>May</li>
               <li>Jun</li>
               <li>Jul</li>
               <li>Aug</li>
               <li>Sep</li>
               <li>Oct</li>
               <li>Nov</li>
               <li>Dec</li>
          </ul>
     </div>
     <div id="currentSelection"></div>
</div>

scottohara / tvmanager

Implement own version of spinning wheel #62

CSS

Markup