Asked Aug 22nd, 7:25 a.m. 88 0 1
  • 88 0 1
+1

Cách sử dụng moment.js để hiển thị thời gian?

Share
  • 88 0 1

Em đang làm một chức năng nhỏ là tính thời gian cách từ lúc dữ liệu đc create đến thời điểm hiện tại và em đang sử dụng thư viện momentjs, sau đây là đoạn code của em:

 momentTime() {
      return (this.tickTime = moment(this.jobinfos.created_at)
        .startOf("day")
        .fromNow());
    },

tuy nhiên hình như thuật toán em đang thiếu cái gì đó khi nó chỉ báo thời gian tối đa là 24h hour ago sau 24h nó lại quay trở lại 1 hour ago chứ không tiếp tục đến ví dụ 1 day ago như em mong muốn.... Mong được sự chỉ giáo của mn e cảm ơn!!!

1 ANSWERS


Answered Aug 22nd, 7:34 a.m.
Accepted
+1

bác dùng thử như bên dưới xem được không?

moment(this.jobinfos.created_at).fromNow(true);
// or
moment(this.jobinfos.created_at).fromNow();
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 22nd, 7:40 a.m.

Em có fix theo bác r nhưng ngày create time của em hơn 1 tháng r nó vẫn hiện 15 hour ago bác ạ, em không biết như thế nào nữa nhưng cứ qua 24hour nó lên 1 day là dc á bác :V

0
| Reply
Share
Aug 22nd, 7:40 a.m.

@binchanhkun99 bác gửi e dữ liệu created_at xem nó ntn

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 22nd, 7:46 a.m.

@dangcq17 nó dạng ntn bác ạ :3 có khi nào e lại lú ko ta kiểu ntn chắc thằng moment nó không hiểu r chắc phải convert nữa hay ntn bác nhỉ? "createdAt": "2022-07-25T02:30:17.313Z",

0
| Reply
Share
Aug 22nd, 7:50 a.m.

@binchanhkun99 em test được mà bác ✌️

var now = moment('2022-08-22T02:30:17.313Z').fromNow();
console.log(now);

Screenshot from 2022-08-22 14-49-34.png

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 22nd, 8:17 a.m.

@dangcq17 vâng bác có vẻ như nó ko đọc đc thằng jobinfos bác ạ... em call api ở methods r mới qua mouted để cho chạy cái methods đó, em thử log thằng this.jobinfos.created_at thì ra undefine 😦

0
| Reply
Share
Aug 22nd, 8:18 a.m.

@binchanhkun99 bac đưa code lên em xem thử nó lỗi ở đâu. Không thì bác log ra thằng data sau khi call bằng axios về debug xem

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 22nd, 8:25 a.m.

@dangcq17 code e hơi luộm thuộm bác có thể xem qua và hỗ trợ là e vui r =))

import "../assets/style.css";
import "../assets/job.css";
import request from "@/utils/request";
import moment from "moment";
export default {
  name: "jobs",
  components: {},
  data() {
    return {
      totalJobs: null,
      tickTime: "",
      currentPage: 1,
      perPage: 4,
      checks: ["All", "Developer", "Tester", "Designer", "Support"],
      jobinfos: [],
      showJobs: [],
      selected: "All",
    };
  },
  computed: {
    //Pagination
    jobs() {
      return this.showJobs.slice(
        (this.currentPage - 1) * this.perPage,
        this.currentPage * this.perPage
      );
    },
    rows() {
      return this.showJobs.length;
    },

    //bad code, fix later
   momentTime() {
      return (moment(this.jobinfos.created_at)
        .fromNow(true));
    },
  },
  watch: {
    // selected(newVal) {
    //   if (newVal === "All") {
    //     return this.jobinfos;
    //   } else {
    //     return this.jobinfos.filter((i) => i.Genres === newVal);
    //   }
    // },
        
  },

  async mounted() {
      this.getJobs();
     
   // event enter
    var self = this;
    window.addEventListener("keyup", function (event) {
      if (event.keyCode === 13) {
        self.searchJob();
      }
    });
  },
  methods: {
    async getJobs() {
      await request
        .get(
          `jobs`
        )
        .then((response) => {
          this.jobinfos = response.data;
          this.showJobs = response.data;
          this.totalJobs = response.data.length;
           
        })
        .catch((e) => {});
    },


  },
};
0
| Reply
Share
Aug 22nd, 8:30 a.m.

@binchanhkun99 em đang thấy là bác để init data của jobinfos là mảng mà trong computed bác trỏ như thế là không được rồi vì nó không phải object. Nếu bác chỉ đơn giản là hiển thị lên view thì bác để trong methods xong trên view bác v-for rồi truyền từng thằng jobinfor vào hàm đó là được.

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 22nd, 8:40 a.m.

@dangcq17 tức là trên view em tạo ra 1 cái sự kiện kiểu @click="momentTime(item.create_at)" à bác? >_>

0
| Reply
Share
Aug 22nd, 8:44 a.m.

@binchanhkun99 kiểu như này ấy bác

<span v-for="item in jobinfos" :key="item.id">
    {{  momentTime(item.created_at)  }}
</span>
0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 22nd, 8:48 a.m.

@dangcq17 Vâng bác, ở dưới methods em có để ntn nhưng nó vẫn chưa chạy không biết e còn sai chỗ nào bác nhỉ? :V

    momentTime(time) {
      return moment(time).fromNow(true);
    },
0
| Reply
Share
Aug 22nd, 8:52 a.m.

@binchanhkun99 phần <template> của bác ntn nhỉ và cái jobinfos có đúng là mảng không. Hiện phần console của bác có lỗi gì k?

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 22nd, 8:59 a.m.

@dangcq17 trang này khá là phức tạp bác ạ vì còn cần filter và search theo filter nữa á bác

image.png

đây là e v-for ra cái job đã đc xử lý để làm phân trang...

image.png

Chỗ hiện time e để ntn...

image.png

Đây là phần methods đó bác ạ

0
| Reply
Share
Aug 22nd, 9:01 a.m.

@binchanhkun99 em đang thấy bác lặp mảng jobs chứ không phải jobsinfor và trong hàm momentTime bác log ra thằng time xem nó đã đúng là time string chưa và thằng momentTime đã nằm trong methods chưa

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 22nd, 9:05 a.m.

@dangcq17 vâng jobs vì em phải xử lý phân trang ấy bác nó sẽ ntn:

image.png

còn e log thì nó vẫn ra undefine bác ạ 😥

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 22nd, 9:06 a.m.

@dangcq17 à showjobs là vì sau khi xử lý tìm kiếm của jobinfor r ý bác😅

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 22nd, 9:17 a.m.
Avatar Phạm Duy Vũ @binchanhkun99
Aug 22nd, 9:19 a.m.

@dangcq17 À đc rồi b✌️ ơi :V em để nhầm cái đối tượng trong dtb =]] à thằng moment này có tiếng Việt không bác nhỉ? :v

0
| Reply
Share
Aug 22nd, 9:20 a.m.

@binchanhkun99 em chưa dùng thằng này nhiều nhưng theo em thấy trên docs là có nhé bác https://momentjs.com/docs/#/i18n/

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 22nd, 9:28 a.m.

@dangcq17 Vâng đây rồi bác ạ nhưng thiệt là thất vọng quá nó dịch ra ntn thì em chịu rồi 😅

image.png

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.