| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- // 日期选择器
- @ComponentV2
- export struct YtDatePicker{
- @Once @Param selectedDate: Date = new Date();
- @Param linearInfo: LinearGradientOptions = {
- colors: [['#ACF4EB', 0.01], ['#D3F9FF', 0.2] ],
- angle: 150
- }
- @Param needCancel: boolean = false;
- @Event selectDateBack: (date?: Date) => void = (date?: Date) => {
- console.log("选择的日期" + date?.toLocaleString())
- }
- build() {
- Column({space: 15}){
- Row(){
- Text(this.needCancel ? "取消" : "今天")
- .fontColor(Color.Black)
- .fontSize(this.needCancel ? 16 : 18 )
- .fontWeight(this.needCancel ? 500 : 700)
- .onClick(() => {
- if(this.needCancel) {
- this.selectDateBack()
- } else {
- this.selectedDate = new Date()
- }
- })
- Text("确认")
- .fontSize(16)
- .fontWeight(500)
- .borderRadius(32)
- .fontColor(Color.Black)
- // .linearGradient(this.linearInfo)
- .padding({ left: 16, right: 16, top: 4, bottom: 4})
- .onClick(() => {
- this.selectDateBack(this.selectedDate)
- })
- }
- .width("100%")
- .justifyContent(FlexAlign.SpaceBetween)
- .padding({ left: 16, right: 16, top: 16, bottom: 16})
- Stack({alignContent: Alignment.Center}){
- Row()
- .width("100%")
- .height(55)
- .borderRadius(8)
- .linearGradient(this.linearInfo)
- DatePicker({
- // end: new Date(),
- selected: this.selectedDate,
- })
- .selectedTextStyle({
- color: Color.Black,
- })
- .onDateChange((date: Date) => {
- this.selectedDate = date
- })
- .textStyle({
- color: Color.Black,
- })
- }
- .padding({ left: 13, right: 13})
- }
- .width("100%")
- .borderRadius({topLeft: 12, topRight: 12})
- .padding({ top: 20, bottom: 20 })
- .backgroundColor(Color.White)
- .shadow({
- radius: 10,
- type: ShadowType.COLOR,
- color: Color.Black
- })
- }
- }
|