HarmonyOS原子化服务-时间管理

案例效果

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

1.  
   <div class="container">
2.  
   <div class="showTime">
3.  
   <text class="showText"><span>{{mouth}}月{{day}}日</span></text>
4.  
   <text class="showText"><span>{{week}}</span></text>
5.  
   </div>
6.  
   <div class="boxTitle">
7.  
   <text class="text" style="width: 30%;"><span>时间</span></text>
8.  
   <text class="text" style="width: 70%;border-left-width: 1px;"><span>内容</span></text>
9.  
   </div>
10.  
    <div class="hengStyle" for="{{ planList }}" onlongpress="deleteList({{$idx}})">
11.  
    <input class="inputTitle" type="button" value="{{ $item.time }}" onclick="clickTime({{$idx}})"></input>
12.  
    <input class="inputTxt" type="text" value="{{ $item.content }}" onchange="inputPlanValue"></input>
13.  
    </div>
14.  
    <dialog id="delDialog" style="height: 120px;margin-bottom: 40%;">
15.  
    <div style="flex-direction: column; align-items: center;justify-content: center;">
16.  
    <text class="dialogText">
17.  
    <span>是否删除该条计划</span>
18.  
    </text>
19.  
    <div class="inner-btn">
20.  
    <input style="background-color: dodgerblue;" type="button" value="取消" onclick="setBack" class="btn-txt"></input>
21.  
    <input style="background-color: dodgerblue;" type="button" value="确认" onclick="setTure" class="btn-txt"></input>
22.  
    </div>
23.  
    </div>
24.  
    </dialog>
25.  
    <div class="btnStyle">
26.  
    <input id="school" class="inputBtn" type="button" value="＋" onclick="addPlan"></input>
27.  
    </div>
28.  
    <picker id="chooseTime" type="date" value="" selected="{{ selectVal }}" columns="3" onchange="chooseDate" oncancel="">
29.  
    </picker>
30.  
    </div>
31.  
     

css代码部分

1.  
   .container {
2.  
   flex-direction: column;
3.  
   justify-content: flex-start;
4.  
   align-items: center;
5.  
   width: 100%;
6.  
   height: 100%;
7.  
   }
8.  
   .title{
9.  
   width: 100%;
10.  
    height: 40px;
11.  
    font-size: 24px;
12.  
    color: #fff;
13.  
    text-align: left;
14.  
    padding-left: 12px;
15.  
    background-color: dodgerblue;
16.  
    margin-bottom: 10px;
17.  
    }
18.  
    .txt{
19.  
    width: 100%;
20.  
    text-align: left;
21.  
    font-size: 16px;
22.  
    color: dodgerblue;
23.  
    padding-left: 16px;
24.  
    }
25.  
    .showTime{
26.  
    flex-direction: row;
27.  
    align-items: center;
28.  
    justify-content: flex-end;
29.  
    width: 100%;
30.  
    }
31.  
    .showText{
32.  
    font-size: 16px;
33.  
    color: #333;
34.  
    padding-right: 12px;
35.  
    }
36.  
    .boxTitle{
37.  
    flex-direction: row;
38.  
    align-items: flex-start;
39.  
    justify-content: space-around;
40.  
    width: 100%;
41.  
    margin-top: 4px;
42.  
    border: 1px;
43.  
    }
44.  
    .text{
45.  
    font-size: 16px;
46.  
    text-align: center;
47.  
    height: 40px;
48.  
    /* border: 1px;*/
49.  
    }
50.  
    .boxContent{
51.  
    flex-direction: column;
52.  
    align-items: center;
53.  
    justify-content: flex-start;
54.  
    width: 100%;
55.  
    }
56.  
    .hengStyle{
57.  
    flex-direction: row;
58.  
    align-items: flex-start;
59.  
    justify-content: space-between;
60.  
    width: 100%;
61.  
    border-bottom-width: 1px;
62.  
    border-left-width: 1px;
63.  
    border-right-width: 1px;
64.  
    }
65.  
    .inputTitle{
66.  
    width: 30%;
67.  
    height: 40px;
68.  
    font-size: 16px;
69.  
    color: #333;
70.  
    border-radius: 0px;
71.  
    background-color: #eee;
72.  
    }
73.  
    .inputTxt{
74.  
    width: 70%;
75.  
    font-size: 16px;
76.  
    height: 40px;
77.  
    border-radius: 0px;
78.  
    border-left-width: 1px;
79.  
    background-color: #eee;
80.  
     
81.  
    }
82.  
    .btnStyle{
83.  
    width: 100%;
84.  
    justify-content: center;
85.  
    align-items: center;
86.  
    }
87.  
    .inputBtn{
88.  
    width: 20%;
89.  
    height: 40px;
90.  
    text-align: center;
91.  
    font-size: 16px;
92.  
    border-radius: 0px;
93.  
    background-color: #ccc;
94.  
    }
95.  
    .dialogText{
96.  
    font-size: 24px;
97.  
    color: #333;
98.  
    margin-bottom: 10px;
99.  
    }
100.  
     .inner-btn {
101.  
     width: 80%;
102.  
     height: 50px;
103.  
     align-items: center;
104.  
     justify-content: space-around;
105.  
     }
106.  
      

js代码部分：

1.  
   export default {
2.  
   data: {
3.  
   // year:"",
4.  
   mouth:"",
5.  
   day:"",
6.  
   week:"",
7.  
   // hour:"",
8.  
   // min:"",
9.  
   planList:[
10.  
    {
11.  
    id:0,
12.  
    time:"选择时间",
13.  
    content:"",
14.  
    }
15.  
    ],
16.  
    timeValue:"",
17.  
    inputValue:"",
18.  
    selectVal:"2021-06-08",
19.  
    },
20.  
    onShow(){
21.  
    this.getDate();
22.  
    },
23.  
    getDate:function(){
24.  
    let newDate = new Date();
25.  
    this.year = newDate.getFullYear();
26.  
    this.mouth = newDate.getMonth();
27.  
    this.day = newDate.getDay();
28.  
    this.hour = newDate.getHours();
29.  
    this.min = newDate.getMinutes();
30.  
     
31.  
    let weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
32.  
    this.week = weekArray[newDate.getDay()];
33.  
    },
34.  
    clickTime(idx){//弹出
35.  
    this.$element("chooseTime").show(idx);
36.  
    this.idx = idx;
37.  
    },
38.  
    chooseDate(e){//选择时间
39.  
    let idx = this.idx;
40.  
    this.timeValue = e.year "-" e.month "-" e.day;
41.  
    this.planList[idx].time = this.timeValue;
42.  
    },
43.  
    inputPlanValue(e){//监听输入
44.  
    let idx = this.idx;
45.  
    this.inputValue = e.value;
46.  
    this.planList[idx].content = this.inputValue;
47.  
    },
48.  
    addPlan(){//增加计划表
49.  
    this.planList.push({time:"选择时间",content:""});
50.  
    },
51.  
    deleteList(idx){//删除计划
52.  
    this.$element("delDialog").show();
53.  
    this.delIdx = idx
54.  
    },
55.  
    setBack(){
56.  
    this.$element("delDialog").close();
57.  
    },
58.  
    setTure(){
59.  
    let idx = this.delIdx
60.  
    this.planList.splice(idx,1);
61.  
    this.$element("delDialog").close();
62.  
    console.log(idx)
63.  
    },
64.  
    }

三．案例效果

这篇好文章是转载于：学新通技术网