YtDatePicker.ets 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. // 日期选择器
  2. @ComponentV2
  3. export struct YtDatePicker{
  4. @Once @Param selectedDate: Date = new Date();
  5. @Param linearInfo: LinearGradientOptions = {
  6. colors: [['#ACF4EB', 0.01], ['#D3F9FF', 0.2] ],
  7. angle: 150
  8. }
  9. @Param needCancel: boolean = false;
  10. @Event selectDateBack: (date?: Date) => void = (date?: Date) => {
  11. console.log("选择的日期" + date?.toLocaleString())
  12. }
  13. build() {
  14. Column({space: 15}){
  15. Row(){
  16. Text(this.needCancel ? "取消" : "今天")
  17. .fontColor(Color.Black)
  18. .fontSize(this.needCancel ? 16 : 18 )
  19. .fontWeight(this.needCancel ? 500 : 700)
  20. .onClick(() => {
  21. if(this.needCancel) {
  22. this.selectDateBack()
  23. } else {
  24. this.selectedDate = new Date()
  25. }
  26. })
  27. Text("确认")
  28. .fontSize(16)
  29. .fontWeight(500)
  30. .borderRadius(32)
  31. .fontColor(Color.Black)
  32. // .linearGradient(this.linearInfo)
  33. .padding({ left: 16, right: 16, top: 4, bottom: 4})
  34. .onClick(() => {
  35. this.selectDateBack(this.selectedDate)
  36. })
  37. }
  38. .width("100%")
  39. .justifyContent(FlexAlign.SpaceBetween)
  40. .padding({ left: 16, right: 16, top: 16, bottom: 16})
  41. Stack({alignContent: Alignment.Center}){
  42. Row()
  43. .width("100%")
  44. .height(55)
  45. .borderRadius(8)
  46. .linearGradient(this.linearInfo)
  47. DatePicker({
  48. // end: new Date(),
  49. selected: this.selectedDate,
  50. })
  51. .selectedTextStyle({
  52. color: Color.Black,
  53. })
  54. .onDateChange((date: Date) => {
  55. this.selectedDate = date
  56. })
  57. .textStyle({
  58. color: Color.Black,
  59. })
  60. }
  61. .padding({ left: 13, right: 13})
  62. }
  63. .width("100%")
  64. .borderRadius({topLeft: 12, topRight: 12})
  65. .padding({ top: 20, bottom: 20 })
  66. .backgroundColor(Color.White)
  67. .shadow({
  68. radius: 10,
  69. type: ShadowType.COLOR,
  70. color: Color.Black
  71. })
  72. }
  73. }