{"id":190992,"date":"2023-07-29T05:54:33","date_gmt":"2023-07-28T21:54:33","guid":{"rendered":"https:\/\/www.idc.net\/help\/190992\/"},"modified":"2023-07-29T05:54:33","modified_gmt":"2023-07-28T21:54:33","slug":"%e5%90%8e%e6%b5%aa%e4%ba%91react%e6%95%99%e7%a8%8b%ef%bc%9aios-%e6%97%a5%e6%9c%9f%e9%80%89%e6%8b%a9%e5%99%a8","status":"publish","type":"post","link":"https:\/\/idc.net\/help\/190992\/","title":{"rendered":"\u540e\u6d6a\u4e91React\u6559\u7a0b\uff1aiOS \u65e5\u671f\u9009\u62e9\u5668"},"content":{"rendered":"

\u4f7f\u7528 <\/span>DatePickerIOS<\/code> <\/span>\u6765\u5728 iOS \u4e0a\u5448\u73b0\u4e00\u4e2a\u65e5\u671f\/\u65f6\u95f4\u9009\u62e9\u5668(selector)\u3002\u8fd9\u662f\u4e00\u4e2a\u63a7\u5236\u7ec4\u4ef6\uff0c\u6240\u4ee5\u4e3a\u4e86\u7ec4\u4ef6\u66f4\u65b0\uff0c\u4f60\u5fc5\u987b\u94a9\u5728 <\/span>onDateChange<\/code> <\/span>\u56de\u8c03\u4e2d\uff0c\u5e76\u66f4\u65b0 <\/span>date<\/code> <\/span>\u652f\u6301\uff0c\u5426\u5219\u7528\u6237\u7684\u53d8\u5316\u5c06\u7acb\u5373\u6062\u590d\u4ee5\u53cd\u6620 <\/span>props.date<\/code>\u3002 <\/p>\n

Props <\/h2>\n

Edit on GitHub <\/p>\n

date<\/strong> <\/span>\u65e5\u671f\u578b <\/p>\n

\u5f53\u524d\u9009\u4e2d\u7684\u65e5\u671f\u3002 <\/p>\n

maximumDate<\/strong> <\/span>\u65e5\u671f\u578b <\/p>\n

\u6700\u5927\u7684\u65e5\u671f\u3002 <\/p>\n

\u9650\u5236\u53ef\u80fd\u7684\u65e5\u671f\/\u65f6\u95f4\u503c\u7684\u8303\u56f4\u3002 <\/p>\n

minimumDate<\/strong> <\/span>\u65e5\u671f\u578b <\/p>\n

\u6700\u5c0f\u7684\u65e5\u671f\u3002 <\/p>\n

\u9650\u5236\u4e86\u53ef\u80fd\u7684\u65e5\u671f\/\u65f6\u95f4\u503c\u7684\u8303\u56f4\u3002 <\/p>\n

minuteInterval<\/strong> <\/span>\u679a\u4e3e\u578b(1,2,3,4,5,6,10,12,15,20,30) <\/p>\n

\u53ef\u9009\u62e9\u7684\u5206\u949f\u7684\u95f4\u9694\u3002 <\/p>\n

mode<\/strong> <\/span>\u679a\u4e3e\u578b(\u201cdate\u201d,\u201ctime\u201d,\u201cdatetime\u201d) <\/p>\n

\u65e5\u671f\u9009\u62e9\u5668\u6a21\u5f0f\u3002 <\/p>\n

onDateChange<\/strong> <\/span>\u51fd\u6570\u578b <\/p>\n

\u65e5\u671f\u53d8\u66f4\u5904\u7406\u7a0b\u5e8f\u3002 <\/p>\n

\u5f53\u7528\u6237\u66f4\u6539\u4e86 UI \u7684\u65e5\u671f\u6216\u65f6\u95f4\u65f6\uff0c\u5b83\u5c31\u4f1a\u88ab\u8c03\u7528\u3002\u7b2c\u4e00\u4e2a\u4e5f\u662f\u552f\u4e00\u4e00\u4e2a\u53c2\u6570\u662f\u4e00\u4e2a Date \u5bf9\u8c61\uff0c\u4ee3\u8868\u4e86\u65b0\u7684\u65e5\u671f\u548c\u65f6\u95f4\u3002 <\/p>\n

timeZoneOffsetInMinutes<\/strong> <\/span>\u6570\u5b57\u578b <\/p>\n

\u5728\u51e0\u5206\u949f\u5185\u65f6\u533a\u504f\u79fb\u3002 <\/p>\n

\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u65e5\u671f\u9009\u62e9\u5668\u5c06\u4f7f\u7528\u8bbe\u5907\u7684\u65f6\u533a\u3002\u6709\u4e86\u8fd9\u4e2a\u53c2\u6570\uff0c\u624d\u6709\u53ef\u80fd\u8feb\u4f7f\u67d0\u4e2a\u65f6\u533a\u504f\u79fb\u3002\u4f8b\u5982\uff0c\u4e3a\u4e86\u663e\u793a\u592a\u5e73\u6d0b\u7684\u6807\u51c6\u65f6\u95f4\uff0c\u4f20\u9012 -7 * 60\u3002 <\/p>\n

\u4f8b\u5b50 <\/h2>\n

Edit on GitHub <\/p>\n

'use strict';var React = require('react-native');var {\n  DatePickerIOS,\n  StyleSheet,\n  Text,\n  TextInput,\n  View,\n} = React;var DatePickerExample = React.createClass({\n  getDefaultProps: function () {    return {\n      date: new Date(),\n      timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() \/ 60,\n    };\n  },\n  getInitialState: function() {    return {\n      date: this.props.date,\n      timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,\n    };\n  },\n  onDateChange: function(date) {    this.setState({date: date});\n  },\n  onTimezoneChange: function(event) {    var offset = parseInt(event.nativeEvent.text, 10);    if (isNaN(offset)) {      return;\n    }    this.setState({timeZoneOffsetInHours: offset});\n  },\n  render: function() {    \/\/ Ideally, the timezone input would be a picker rather than a\n    \/\/ text input, but we don't have any pickers yet :(\n    return (      <View>\n        <WithLabel label=\"Value:\">\n          <Text>{\n            this.state.date.toLocaleDateString() +\n            ' ' +\n            this.state.date.toLocaleTimeString()\n          }<\/Text>\n        <\/WithLabel>\n        <WithLabel label=\"Timezone:\">\n          <TextInput\n            onChange={this.onTimezoneChange}\n            style={styles.textinput}\n            value={this.state.timeZoneOffsetInHours.toString()}\n          \/>\n          <Text> hours from UTC<\/Text>\n        <\/WithLabel>\n        <Heading label=\"Date + time picker\" \/>\n        <DatePickerIOS\n          date={this.state.date}\n          mode=\"datetime\"\n          timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}          onDateChange={this.onDateChange}\n        \/>\n        <Heading label=\"Date picker\" \/>\n        <DatePickerIOS\n          date={this.state.date}\n          mode=\"date\"\n          timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}          onDateChange={this.onDateChange}\n        \/>\n        <Heading label=\"Time picker, 10-minute interval\" \/>\n        <DatePickerIOS\n          date={this.state.date}\n          mode=\"time\"\n          timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}          onDateChange={this.onDateChange}\n          minuteInterval={10}\n        \/>\n      <\/View>\n    );\n  },\n});var WithLabel = React.createClass({\n  render: function() {    return (      <View style={styles.labelContainer}>\n        <View style={styles.labelView}>\n          <Text style={styles.label}>\n            {this.props.label}          <\/Text>\n        <\/View>\n        {this.props.children}      <\/View>\n    );\n  }\n});var Heading = React.createClass({\n  render: function() {    return (      <View style={styles.headingContainer}>\n        <Text style={styles.heading}>\n          {this.props.label}        <\/Text>\n      <\/View>\n    );\n  }\n});\nexports.title = '<DatePickerIOS>';\nexports.description = 'Select dates and times using the native UIDatePicker.';\nexports.examples = [\n{\n  title: '<DatePickerIOS>',\n  render: function(): ReactElement {    return <DatePickerExample \/>;\n  },\n}];var styles = StyleSheet.create({\n  textinput: {\n    height: 26,\n    width: 50,\n    borderWidth: 0.5,\n    borderColor: '#0f0f0f',\n    padding: 4,\n    fontSize: 13,\n  },\n  labelContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    marginVertical: 2,\n  },\n  labelView: {\n    marginRight: 10,\n    paddingVertical: 2,\n  },\n  label: {\n    fontWeight: '500',\n  },\n  headingContainer: {\n    padding: 4,\n    backgroundColor: '#f6f7f8',\n  },\n  heading: {\n    fontWeight: '500',\n    fontSize: 14,\n  },\n});<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u4f7f\u7528 DatePickerIOS \u6765\u5728 iOS \u4e0a\u5448\u73b0\u4e00\u4e2a\u65e5\u671f\/\u65f6\u95f4\u9009\u62e9\u5668(selecto […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[182398],"tags":[],"class_list":["post-190992","post","type-post","status-publish","format-standard","hentry","category-mini-program"],"_links":{"self":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts\/190992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/comments?post=190992"}],"version-history":[{"count":0,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts\/190992\/revisions"}],"wp:attachment":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/media?parent=190992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/categories?post=190992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/tags?post=190992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}