HarmonyOS原子化服务-时间管理

案例效果


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

<div class="container">
    <div class="showTime">
        <text class="showText"><span>{{mouth}}月{{day}}日</span></text>
        <text class="showText"><span>{{week}}</span></text>
    </div>
    <div class="boxTitle">
        <text class="text" style="width: 30%;"><span>时间</span></text>
        <text class="text" style="width: 70%;border-left-width: 1px;"><span>内容</span></text>
    </div>
    <div class="hengStyle" for="{{ planList }}" onlongpress="deleteList({{$idx}})">
        <input class="inputTitle" type="button" value="{{ $item.time }}" onclick="clickTime({{$idx}})"></input>
        <input class="inputTxt" type="text" value="{{ $item.content }}" onchange="inputPlanValue"></input>
    </div>
    <dialog id="delDialog" style="height: 120px;margin-bottom: 40%;">
        <div style="flex-direction: column; align-items: center;justify-content: center;">
            <text class="dialogText">
                <span>是否删除该条计划</span>
            </text>
            <div class="inner-btn">
                <input style="background-color: dodgerblue;" type="button" value="取消" onclick="setBack" class="btn-txt"></input>
                <input style="background-color: dodgerblue;" type="button" value="确认" onclick="setTure" class="btn-txt"></input>
            </div>
        </div>
    </dialog>
    <div class="btnStyle">
        <input id="school" class="inputBtn" type="button" value="＋" onclick="addPlan"></input>
    </div>
    <picker id="chooseTime" type="date" value="" selected="{{ selectVal }}" columns="3" onchange="chooseDate" oncancel="">
    </picker>
</div>

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)
    },
}

三．案例效果