HarmonyOS原子化服务-时间管理

案例效果

一、创建项目
二、代码示例
hml代码部分

    
 {{mouth}}月{{day}}日 {{week}}    
    
 时间 内容    
    
      
     
       是否删除该条计划          
         
 
        
     
        

css代码部分

.container {    flex-direction: column;    justify-content: flex-start;    align-items: center;    width: 100%;    height: 100%;}.title{    width: 100%;    height: 40px;    font-size: 24px;    color: #fff;    text-align: left;    padding-left: 12px;    background-color: dodgerblue;    margin-bottom: 10px;}.txt{    width: 100%;    text-align: left;    font-size: 16px;    color: dodgerblue;    padding-left: 16px;}.showTime{    flex-direction: row;    align-items: center;    justify-content: flex-end;    width: 100%;}.showText{    font-size: 16px;    color: #333;    padding-right: 12px;}.boxTitle{    flex-direction: row;    align-items: flex-start;    justify-content: space-around;    width: 100%;    margin-top: 4px;    border: 1px;}.text{    font-size: 16px;    text-align: center;    height: 40px;/*    border: 1px;*/}.boxContent{    flex-direction: column;    align-items: center;    justify-content: flex-start;    width: 100%;}.hengStyle{    flex-direction: row;    align-items: flex-start;    justify-content: space-between;    width: 100%;    border-bottom-width: 1px;    border-left-width: 1px;    border-right-width: 1px;}.inputTitle{    width: 30%;    height: 40px;    font-size: 16px;    color: #333;    border-radius: 0px;    background-color: #eee;}.inputTxt{    width: 70%;    font-size: 16px;    height: 40px;    border-radius: 0px;    border-left-width: 1px;    background-color: #eee;}.btnStyle{    width: 100%;    justify-content: center;    align-items: center;}.inputBtn{    width: 20%;    height: 40px;    text-align: center;    font-size: 16px;    border-radius: 0px;    background-color: #ccc;}.dialogText{    font-size: 24px;    color: #333;    margin-bottom: 10px;}.inner-btn {    width: 80%;    height: 50px;    align-items: center;    justify-content: space-around;}

js代码部分：

export default {    data: {// year:"", mouth:"", day:"", week:"",// hour:"",// min:"", planList:[     {  id:0,  time:"选择时间",  content:"",     } ], timeValue:"", inputValue:"", selectVal:"2021-06-08",    },    onShow(){ this.getDate();    },    getDate:function(){ let newDate = new Date(); this.year = newDate.getFullYear(); this.mouth = newDate.getMonth(); this.day = newDate.getDay(); this.hour = newDate.getHours(); this.min = newDate.getMinutes(); let weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六"); this.week = weekArray[newDate.getDay()];    },    clickTime(idx){//弹出 this.$element("chooseTime").show(idx); this.idx = idx;    },    chooseDate(e){//选择时间 let idx = this.idx; this.timeValue = e.year + "-" + e.month + "-" + e.day; this.planList[idx].time = this.timeValue;    },    inputPlanValue(e){//监听输入 let idx = this.idx; this.inputValue = e.value; this.planList[idx].content = this.inputValue;    },    addPlan(){//增加计划表 this.planList.push({time:"选择时间",content:""});    },    deleteList(idx){//删除计划 this.$element("delDialog").show(); this.delIdx = idx    },    setBack(){ this.$element("delDialog").close();    },    setTure(){ let idx = this.delIdx this.planList.splice(idx,1); this.$element("delDialog").close(); console.log(idx)    },}

三．案例效果