HarmonyOS原子化服务-计划本的实现

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

<div class="container">
    <div class="content">
        <div class="hengStyle">
            <text class="text"><span>时间:</span></text>
            <input type="button" value="{{startTime}}" class="inputDate" onclick="startClick"></input>
            <label style="font-size: 16px;color: #333;">至</label>
            <input type="button" value="{{endTime}}" class="inputDate" onclick="endClick"></input>
            <picker id="startPicker" type="date" value="" selected="{{ selectVal }}" columns="5" onchange="startDate" oncancel=""></picker>
            <picker id="endPicker" type="date" value="" selected="{{ selectVal }}" columns="5" onchange="endDate" oncancel=""></picker>
        </div>
        <div class="hengStyle">
            <text class="text"><span>计划：</span></text>
            <input id="positionContent" class="inputTxt" type="text" value="" onchange="input"></input>
        </div>
        <div class="hengStyle">
            <text class="text"><span>内容：</span></text>
            <input id="witness" class="inputTxt" type="text" value="" onchange="input"></input>
        </div>
        <div class="hengStyle">
            <text class="text"><span>实现方式：</span></text>
            <input id="witness" class="inputTxt" type="text" value="" onchange="input"></input>
        </div>
    </div>
</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;
}
.content{
    flex-direction: column;
    margin-bottom: 10px;
}
.hengStyle{
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 2px 0px;
}
.text{
    font-size: 16px;
    padding-left: 16px;
}
.inputDate{
    width: 100px;
    height: 40px;
    font-size: 16px;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
}
.inputTxt{
    width: 64%;
    height: 40px;
    font-size: 16px;
    border-radius: 4px;
}
.inputBtn{
    width: 30%;
    height: 40px;
    font-size: 16px;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
}

js代码部分

export default {
    data: {
        //        学习时间
        dateValue:"",
        startTime: '开始时间',
        endTime: '结束时间',
        selectVal:"2021-06-08",
    },
    startClick(){
        this.$element("startPicker").show();
    },
    endClick(){
        this.$element("endPicker").show();
    },
    startDate(e){
        this.startTime = e.year + "-" + e.month + "-" + e.day;
    },
    endDate(e){
        this.endTime = e.year + "-" + e.month + "-" + e.day;
    },
    input(e){
        let idName = e.target.id;
        if (idName === "school") {
            this.schoolValue = e.value
        }
    },
    inputBtn(){
        this.$element("education").show();
    },
    chooseEducation(e){
        this.educationValue = e.newValue
    }
}

三．示例效果