MaxApp/static/js/app.js

const MIN_DATE = dayjs("2014-01-01")
const RANGE_MAX = dayjs().diff(MIN_DATE,"d")
const coinTop50 = {
    data() {
      return {
        date :document.getElementById("startDate").innerText,
        items: [],
        rangeDate:RANGE_MAX,
        maxRange:RANGE_MAX,
        source:axios.CancelToken.source(),
        datepicker:null
      }
    },
    created(){
      this.requestData = _.debounce(this.requestData,200)
    },
    mounted() {
      this.requestData(this.date)
      const elems = document.querySelectorAll('.datepicker');
      this.datepicker = M.Datepicker.init(elems, {onClose:()=>{
        this.date = this.datepicker.date.toISOString().slice(0,10)
      }})[0];
      
    },
    watch:{
      date(newDate,oldDate){
        this.requestData(newDate)
      },
      rangeDate(newValue){
          this.date = MIN_DATE.add(newValue,"d").format("YYYY-MM-DD");
      }
    },
    methods:{
      requestData(sDate){
        const d = new Date(sDate)
        const url = `/top50json/${d.getDate()}-${("0"+(d.getMonth()+1)).slice(-2)}-${d.getFullYear()}/`;
        axios.get(url)
            .then(this.handleJsonUpdate)
            .catch(function (thrown) {
              if (axios.isCancel(thrown)) {
                console.log('Request canceled', thrown.message);
              } else {
                console.log(thrown)
              }
            });
      },
      handleJsonUpdate(response){
        this.items = response.data
      },
      displayRoundedPrice(price){
        var precision = -Math.floor( Math.log10(price) + 1);
        return price.toLocaleString();
      },
      getChart(id){
        window.location = "/coin/chart/"+id+"/";
      }
    }
  }
Vue.createApp(coinTop50).mount('#app')