美文网首页
react native 日期选择框DatePickerAndr

react native 日期选择框DatePickerAndr

作者: smallzip | 来源:发表于2018-08-01 11:58 被阅读0次

react native 日期选择框DatePickerAndroid按照官网版无法使用,而且还报错

先暂时官网的版本

建议看MarkDown编辑器版本

[地址MarkDown编辑器版本](https://www.jianshu.com/p/cba4917e2970)

try {

  const {action, year, month, day} = await DatePickerAndroid.open({

        // 要设置默认值为今天的话,使用`new Date()`即可。    

        // 下面显示的会是2020年5月25日。月份是从0开始算的。    

         date: new Date(2020, 4, 25)

  });

  if (action !== DatePickerAndroid.dismissedAction) {

    // 这里开始可以处理用户选好的年月日三个参数:year, month (0-11), day  }

} catch ({code, message}) {

  console.warn('Cannot open date picker', message);

}

报错内容 报错内容

看报错内容发现,await这个保留词汇有错误。

优化方案1

去掉await

去掉await

// 时间选择框 优化方案1

  datePick = () => {

    try {

      const { action } = DatePickerAndroid.open({

        // 要设置默认值为今天的话,使用`new Date()`即可

        date: new Date(),

        maxDate: new Date(),

        minDate: new Date(2018, 3, 1)

      }).then(({ year, month, day }) => {

        if (action !== DatePickerAndroid.dismissedAction) {

          // 这里开始可以处理用户选好的年月日三个参数:year, month (0-11), day

          //  取消则不执行

          if (year == undefined || year == NaN || month == undefined || month == NaN) {

          } else {

            ToastAndroid.show(`选择的时间是:${year}-${month + 1}-${day}`, ToastAndroid.SHORT);

          }

        }

      })

    } catch ({ code, message }) {}

  }

优化方案2

方法封装的时候添加async

添加async

// 时间选择框 优化方案2

  datePick1 = async () => {

    try {

      const {action, year, month, day} = await DatePickerAndroid.open({

        // 要设置默认值为今天的话,使用`new Date()`即可。

        // 下面显示的会是2020年5月25日。月份是从0开始算的。

        date: new Date(2020, 4, 25)

      });

      if (action !== DatePickerAndroid.dismissedAction) {

        // 这里开始可以处理用户选好的年月日三个参数:year, month (0-11), day

        ToastAndroid.show(`选择的时间是:${y    ear}-${month + 1}-${day}`, ToastAndroid.SHORT);

      }

    } catch ({code, message}) {

      console.warn('Cannot open date picker', message);

    }

  }

相关文章

网友评论

      本文标题:react native 日期选择框DatePickerAndr

      本文链接:https://www.haomeiwen.com/subject/clilvftx.html