Date Picker - Some devices(Galaxy S6) display calendar vs spinner and overlap buttons

[olearyj]

On some devices the date picker displays a calendar instead of 3 spinners to select the date. This is OK on the Nexus 9 (probably because the screen is large because it's a tablet) but on the Galaxy S6 the calendar date picker overlaps the cancel and done buttons making it impossible to leave the date picker widget.

[olearyj]

I made a few changes to fix this problem. You may want to implement these in the git repo.

Changes to the pickerView.tss in the android folder:

"#pickerView": {
  //top: '10%',
  width: '85%',
  height: Titanium.UI.SIZE,
  backgroundColor: 'white',
  borderColor: '#636363',
  borderWidth: 1,
  borderRadius: 1,
  zIndex: 99,
  layout: 'vertical'
}

"#picker": {
  top: '1%',
  selectionIndicator: true,
  useSpinner: true,
  visibleItems: 10,
  type: Ti.UI.PICKER_TYPE_PLAIN,
}

"#toolbar": {
  bottom: '1%',
  height: 50,
  backgroundColor: 'transparent',
  width: Ti.UI.FILL,
  layout: 'composite',
}

Changes in pickerView.xml:

<Alloy>
  <View id="pickerView">

    <Toolbar id="toolbar" platform="ios">
      <Items>
        <Button id="buttonCancel" title="L('cancelButton', 'Cancel')" style="Ti.UI.iOS.SystemButtonStyle.BORDERED" onClick="onCancel" />
        <FlexSpace/>
        <Button id="buttonDone" title="L('doneButton', 'Done')" style="Ti.UI.iOS.SystemButtonStyle.DONE" onClick="onDone" />
      </Items>
    </Toolbar>

    <Picker id="picker" />

    <View id="toolbar" platform="android">
      <Button id="buttonCancel" onClick="onCancel" title="L('cancelButton', 'Cancel')" />
      <Button id="buttonDone" onClick="onDone" title="L('doneButton', 'Done')" />
    </View>

  </View>
</Alloy>