移动端 date 类型输入框不识别正确格式??的字符串.

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1822 天前的主题，其中的信息可能已经有所发展或是发生改变。

将'2019-01-28T00:00:00'格式化成'2019-01-28'然后通过 vue v-model 绑定给 input,部分移动端浏览器认不出来.

被逼无奈花了 30 分钟看正则.

dateProgress_error('2019-01-28T00:00:00') === dateProgress_true('2019-01-28T00:00:00')

//true

原始数据

2019-01-28T00:00:00

错误的格式化函数

 /**
 * yyyy-mm-dd'T'hh-ss-dd =>yyyy-mm-dd
 * @param {string} date 
 */
function dateProgress_error(date) {
  var newDate = new Date(date.replace('T', ' ')).toLocaleDateString();
  // eslint-disable-next-line no-useless-escape
  var tmp = newDate.split(/\//);
  if (tmp.length === 1) {
    return newDate;
  }
  if (tmp[1].length !== 2) {
    tmp[1] = '0' + tmp[1];
  }
  if (tmp[2].length !== 2) {
    tmp[2] = '0' + tmp[2];
  }

  return tmp.join('-');
}

正确的格式化函数

/**
 * yyyy-mm-dd'T'hh-ss-dd =>yyyy-mm-dd
 * @param {string} date 
 */
function dateProgress_true(date) {
  return date.replace(/T\S*/,'');
}

第 1 条附言 · 2019-04-25 07:58:15 +08:00

错误出在 String.property.split,在某些浏览器中它会返回顺序完全相反的数组.

谷歌浏览器/火狐
'a,b,c'.split(/,/)==['a','b','c']
//true

移动端夸克/android5.1 flyme自带
'a,b,c'.split(/,/)==['c','b','a']
//true

第 2 条附言 · 2019-04-25 08:05:55 +08:00

🤦‍♂️我去,搞错了.

是 Date.property.toLocalString ,会根据一些东西返回当地格式时间.

new Date('2019-08-09').toLocalString ='2019/8/9' | '8/9/2019'

比心🤞

第 3 条附言 · 2019-04-25 11:25:14 +08:00

结束,已下沉.使用 dayjs.

9 条回复 • 2019-04-26 15:32:36 +08:00

airyland

2019-04-24 17:44:41 +08:00

我觉得标准时间操作就不要用正则了，new Date 直接解析或者用 dayjs 来操作。

whypool

2019-04-24 18:05:27 +08:00

ios 还有用-不能转，必须用 /

TomVista

2019-04-25 07:38:05 +08:00

@airyland 🤣我去看看这个库,脑子抽风,没想出来 Date 就可以解决.

@whypool 我是 android 设置的 iphone ua,浏览器 ua 不影响 js 引擎.我再看看为什么.很奇怪的错误.

TomVista

2019-04-25 08:06:55 +08:00

@airyland 问下不用正则的理由.

weixiangzhe

2019-04-25 09:33:04 +08:00 via iPhone

推荐 dayjs 吧，ios 不认 2018-02-19 这种的

TomVista

2019-04-25 10:40:40 +08:00

@weixiangzhe 嗯,明白了,脑子没转过来,还要兼容 ios🤦‍♂️

iamkun

2019-04-25 11:15:47 +08:00

`dayjs('2019-01-28T00:00:00').format() ` 帮你搞定一切 😁

TomVista

2019-04-26 15:22:57 +08:00

@iamkun
@weixiangzhe
@airyland

dayjs(somedate).format() 在不同的浏览器由于兼容性会返回不同格式的日期吗?我这里没有测试环境.

TomVista

2019-04-26 15:32:36 +08:00

我这里测试谷歌浏览器不支持 yyyy/mm/dd 格式的日期赋值给<input type='date'>