精华内容
下载资源
问答
  • Flutter 日期选择器与时间选择器

    千次阅读 2019-07-04 14:12:42
    Flutter日期选择器

    更多文章请查看 lutter从入门 到精通

    1 日期选择器

    在这里插入图片描述

    
    
      //设置默认显示的日期为当前
      DateTime initialDate = DateTime.now();
      
      void showDefaultYearPicker(BuildContext context) async {
        final DateTime dateTime = await showDatePicker(
          context: context,
          //定义控件打开时默认选择日期
          initialDate: initialDate,
          //定义控件最早可以选择的日期
          firstDate: DateTime(2018, 1),
          //定义控件最晚可以选择的日期
          lastDate: DateTime(2022, 1),
          builder: (BuildContext context, Widget child) {
            return Theme(
              data: CommonColors.themData,
              child: child,
            );
          },
        );
        if (dateTime != null && dateTime != initialDate) {}
      }
    
    

    2 时间选择器

    在这里插入图片描述

    
    
      //设置显示显示的时间为当前
      TimeOfDay initialTime = TimeOfDay.now();
      void showDefaultDatePicker(BuildContext context) async {
        final TimeOfDay timeOfDay = await showTimePicker(
          context: context,
          initialTime: initialTime,
          builder: (BuildContext context, Widget child) {
            return Theme(
              data: CommonColors.themData,
              child: child,
            );
          },
        );
        if (timeOfDay != null && timeOfDay != initialTime) {
          setState(() {
            initialTime = timeOfDay;
          });
        }
      }
    
    

    本公众号会首发系列专题文章,付费的视频课程会在公众号中免费刊登,在你上下班的路上或者是睡觉前的一刻,本公众号都是你浏览知识干货的一个小选择,收藏不如行动,在那一刻,公众号会提示你该学习了。

    在这里插入图片描述

    展开全文
  • 基于wheelView的自定义日期选择器

    千次下载 热门讨论 2015-06-26 17:16:52
    基于wheelView的自定义日期选择器,支持拓展,样式可以多样
  • Vue.js组件库Element中的TimePicker 时间选择器,DatePicker 日期选择器,DateTimePicker 日期时间选择器和ColorPicker 颜色选择器。

    1、TimePicker 时间选择器

    用于选择或输入日期。

    固定时间点

    提供几个固定的时间点供用户选择。


    使用 el-time-select 标签,分别通过start、end和step指定可选的起始时间、结束时间和步长。

    <el-time-select
      v-model="value"
      :picker-options="{
        start: '08:30',
        step: '00:15',
        end: '18:30'
      }"
      placeholder="选择时间">
    </el-time-select>
    
    <script>
      export default {
        data() {
          return {
            value: ''
          };
        }
      }
    </script>
    

    任意时间点

    可以选择任意时间。


    使用 el-time-picker 标签,通过selectableRange限制可选时间范围。提供了两种交互方式:默认情况下通过鼠标滚轮进行选择,打开arrow-control属性则通过界面上的箭头进行选择。

    <template>
      <el-time-picker
        v-model="value1"
        :picker-options="{
          selectableRange: '18:30:00 - 20:30:00'
        }"
        placeholder="任意时间点">
      </el-time-picker>
      <el-time-picker
        arrow-control
        v-model="value2"
        :picker-options="{
          selectableRange: '18:30:00 - 20:30:00'
        }"
        placeholder="任意时间点">
      </el-time-picker>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value1: new Date(2016, 9, 10, 18, 40),
            value2: new Date(2016, 9, 10, 18, 40)
          };
        }
      }
    </script>
    

    固定时间范围

    若先选择开始时间,则结束时间内备选项的状态会随之改变。

    <template>
      <el-time-select
        placeholder="起始时间"
        v-model="startTime"
        :picker-options="{
          start: '08:30',
          step: '00:15',
          end: '18:30'
        }">
      </el-time-select>
      <el-time-select
        placeholder="结束时间"
        v-model="endTime"
        :picker-options="{
          start: '08:30',
          step: '00:15',
          end: '18:30',
          minTime: startTime
        }">
      </el-time-select>
    </template>
    
    <script>
      export default {
        data() {
          return {
            startTime: '',
            endTime: ''
          };
        }
      }
    </script>
    

    任意时间范围

    可选择任意的时间范围。


    添加is-range属性即可选择时间范围,同样支持arrow-control属性。

    <template>
      <el-time-picker
        is-range
        v-model="value1"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围">
      </el-time-picker>
      <el-time-picker
        is-range
        arrow-control
        v-model="value2"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围">
      </el-time-picker>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
            value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
          };
        }
      }
    </script>
    

    Attributes

    参数 说明 类型 可选值 默认值
    value / v-model 绑定值 date(TimePicker) / string(TimeSelect)
    readonly 完全只读 boolean false
    disabled 禁用 boolean false
    editable 文本框可输入 boolean true
    clearable 是否显示清除按钮 boolean true
    size 输入框尺寸 string medium / small / mini
    placeholder 非范围选择时的占位内容 string
    start-placeholder 范围选择时开始日期的占位内容 string
    end-placeholder 范围选择时开始日期的占位内容 string
    is-range 是否为时间范围选择,仅对<el-time-picker>有效 boolean false
    arrow-control 是否使用箭头进行时间选择,仅对<el-time-picker>有效 boolean false
    align 对齐方式 string left / center / right left
    popper-class TimePicker 下拉框的类名 string
    picker-options 当前时间日期选择器特有的选项参考下表 object {}
    range-separator 选择范围时的分隔符 string - ‘-’
    value-format 可选,仅TimePicker时可用,绑定值的格式。不指定则绑定值为 Date 对象 string 日期格式
    default-value 可选,选择器打开时默认显示的时间 Date(TimePicker) / string(TimeSelect) 可被new Date()解析(TimePicker) / 可选值(TimeSelect)
    name 原生属性 string
    prefix-icon 自定义头部图标的类名 string el-icon-time
    clear-icon 自定义清空图标的类名 string el-icon-circle-close

    Time Select Options

    参数 说明 类型 可选值 默认值
    start 开始时间 string 09:00
    end 结束时间 string 18:00
    step 间隔时间 string 00:30
    minTime 最小时间,小于该时间的时间段将被禁用 string 00:00
    maxTime 最大时间,大于该时间的时间段将被禁用 string

    Time Picker Options

    参数 说明 类型 可选值 默认值
    selectableRange 可选时间段,例如’18:30:00 - 20:30:00’或者传入数组[‘09:30:00 - 12:00:00’, ‘14:30:00 - 18:30:00’] string / array
    format 时间格式化(TimePicker) string 小时:HH,分:mm,秒:ss,AM/PM A ‘HH:mm:ss’

    Events

    事件名 说明 参数
    change 用户确认选定的值时触发 组件绑定值
    blur 当 input 失去焦点时触发 组件实例
    focus 当 input 获得焦点时触发 组件实例

    Methods

    方法名 说明 参数
    focus 使 input 获取焦点 -

    2、DatePicker 日期选择器

    用于选择或输入日期。

    选择日

    以「日」为基本单位,基础的日期选择控件。


    基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts,禁用日期通过 disabledDate 设置,传入函数。

    <template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              },
              shortcuts: [{
                text: '今天',
                onClick(picker) {
                  picker.$emit('pick', new Date());
                }
              }, {
                text: '昨天',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit('pick', date);
                }
              }, {
                text: '一周前',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', date);
                }
              }]
            },
            value1: '',
            value2: '',
          };
        }
      };
    </script>
    

    其他日期单位

    通过扩展基础的日期选择,可以选择周、月、年或多个日期。



    <div class="container">
      <div class="block">
        <span class="demonstration">周</span>
        <el-date-picker
          v-model="value1"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">月</span>
        <el-date-picker
          v-model="value2"
          type="month"
          placeholder="选择月">
        </el-date-picker>
      </div>
    </div>
    <div class="container">
      <div class="block">
        <span class="demonstration">年</span>
        <el-date-picker
          v-model="value3"
          type="year"
          placeholder="选择年">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">多个日期</span>
        <el-date-picker
          type="dates"
          v-model="value4"
          placeholder="选择一个或多个日期">
        </el-date-picker>
      </div>
    </div>
    
    <script>
      export default {
        data() {
          return {
            value1: '',
            value2: '',
            value3: '',
            value4: ''
          };
        }
      };
    </script>
    

    选择日期范围

    可在一个选择器中便捷地选择一个时间范围。


    在选择日期范围时,默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份,可以使用unlink-panels属性解除联动。

    <template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            value1: '',
            value2: ''
          };
        }
      };
    </script>
    

    选择月份范围

    可在一个选择器中便捷地选择一个月份范围。


    在选择月份范围时,默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份,可以使用unlink-panels属性解除联动。

    <template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value2"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              shortcuts: [{
                text: '本月',
                onClick(picker) {
                  picker.$emit('pick', [new Date(), new Date()]);
                }
              }, {
                text: '今年至今',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date(new Date().getFullYear(), 0);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近六个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setMonth(start.getMonth() - 6);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            value1: '',
            value2: ''
          };
        }
      };
    </script>
    

    日期格式

    使用format指定输入框的格式;使用value-format指定绑定值的格式。
    默认情况下,组件接受并返回Date对象。以下为可用的格式化字串,以 UTC 2017年1月2日 03:04:05 为例:

    请注意大小写

    格式 含义 备注 举例
    yyyy   2017
    M 不补0 1
    MM   01
    W 仅周选择器的 format 可用;不补0 1
    WW 仅周选择器的 format 可用 01
    d 不补0 2
    dd   02
    H 小时 24小时制;不补0 3
    HH 小时 24小时制 03
    h 小时 12小时制,须和 A 或 a 使用;不补0 3
    hh 小时 12小时制,须和 A 或 a 使用 03
    m 分钟 不补0 4
    mm 分钟   04
    s 不补0 5
    ss   05
    A AM/PM 仅 format 可用,大写 AM
    a am/pm 仅 format 可用,小写 am
    timestamp JS时间戳 仅 value-format 可用;组件绑定值为number类型 1483326245000
    [MM] 不需要格式化字符 使用方括号标识不需要格式化的字符 (如 [A] [MM]) MM



    <template>
      <div class="block">
        <span class="demonstration">默认为 Date 对象</span>
        <div class="demonstration">值:{{ value1 }}</div>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">使用 value-format</span>
        <div class="demonstration">值:{{ value2 }}</div>
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">时间戳</span>
        <div class="demonstration">值:{{ value3 }}</div>
        <el-date-picker
          v-model="value3"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value1: '',
            value2: '',
            value3: ''
          };
        }
      };
    </script>
    

    默认显示日期

    在选择日期范围时,指定起始日期和结束日期的默认时刻。

    选择日期范围时,默认情况下,起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过default-time可以分别指定二者的具体时刻。default-time接受一个数组,其中的值为形如12:00:00的字符串,第一个值控制起始日期的时刻,第二个值控制结束日期的时刻。

    <template>
      <div class="block">
        <p>组件值:{{ value }}</p>
        <el-date-picker
          v-model="value"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value: ''
          };
        }
      };
    </script>
    

    Attributes

    参数 说明 类型 可选值 默认值
    value / v-model 绑定值 date(DatePicker) / array(DateRangePicker)
    readonly 完全只读 boolean false
    disabled 禁用 boolean false
    editable 文本框可输入 boolean true
    clearable 是否显示清除按钮 boolean true
    size 输入框尺寸 string large, small, mini
    placeholder 非范围选择时的占位内容 string
    start-placeholder 范围选择时开始日期的占位内容 string
    end-placeholder 范围选择时结束日期的占位内容 string
    type 显示类型 string year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange date
    format 显示在输入框中的格式 string 日期格式 yyyy-MM-dd
    align 对齐方式 string left, center, right left
    popper-class DatePicker 下拉框的类名 string
    picker-options 当前时间日期选择器特有的选项参考下表 object {}
    range-separator 选择范围时的分隔符 string ‘-’
    default-value 可选,选择器打开时默认显示的时间 Date 可被new Date()解析
    default-time 范围选择时选中日期所使用的当日内具体时刻 string[] 数组,长度为 2,每项值为字符串,形如12:00:00,第一项指定开始日期的时刻,第二项指定结束日期的时刻,不指定会使用时刻 00:00:00
    value-format 可选,绑定值的格式。不指定则绑定值为 Date 对象 string 日期格式
    name 原生属性 string
    unlink-panels 在范围选择器里取消两个日期面板之间的联动 boolean false
    prefix-icon 自定义头部图标的类名 string el-icon-date
    clear-icon 自定义清空图标的类名 string el-icon-circle-close
    validate-event 输入时是否触发表单的校验 boolean - true

    Picker Options

    参数 说明 类型 可选值 默认值
    shortcuts 设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 Object[]
    disabledDate 设置禁用状态,参数为当前日期,要求返回 Boolean Function
    cellClassName 设置日期的 className Function(Date)
    firstDayOfWeek 周起始日 Number 1 到 7 7
    onPick 选中日期后会执行的回调,只有当 daterange 或 datetimerange 才生效 Function({ maxDate, minDate })

    Shortcuts

    参数 说明 类型 可选值 默认值
    text 标题文本 string
    onClick 选中后的回调函数,参数是 vm,可通过触发 ‘pick’ 事件设置选择器的值。例如 vm.$emit(‘pick’, new Date()) function

    Events

    事件名称 说明 回调参数
    change 用户确认选定的值时触发 组件绑定值。格式与绑定值一致,可受 value-format 控制
    blur 当 input 失去焦点时触发 组件实例
    focus 当 input 获得焦点时触发 组件实例

    Methods

    方法名 说明 参数
    focus 使 input 获取焦点

    3、DateTimePicker 日期时间选择器

    在同一个选择器里选择日期和时间。

    DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。

    日期和时间点




    通过设置type属性为datetime,即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。

    <template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value2"
          type="datetime"
          placeholder="选择日期时间"
          align="right"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">设置默认时间</span>
        <el-date-picker
          v-model="value3"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              shortcuts: [{
                text: '今天',
                onClick(picker) {
                  picker.$emit('pick', new Date());
                }
              }, {
                text: '昨天',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit('pick', date);
                }
              }, {
                text: '一周前',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', date);
                }
              }]
            },
            value1: '',
            value2: '',
            value3: ''
          };
        }
      };
    </script>
    

    日期和时间范围



    设置type为datetimerange即可选择日期和时间范围。

    <template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            value2: ''
          };
        }
      };
    </script>
    

    默认的起始与结束时刻



    使用datetimerange进行范围选择时,在日期选择面板中选定起始与结束的日期,默认会使用该日期的00:00:00作为起始与结束的时刻;通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组,数组每项值为字符串,形如12:00:00,其中第一项控制起始日期的具体时刻,第二项控制结束日期的具体时刻。

    <template>
      <div class="block">
        <span class="demonstration">起始日期时刻为 12:00:00</span>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">起始日期时刻为 12:00:00,结束日期时刻为 08:00:00</span>
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00', '08:00:00']">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value1: '',
            value2: ''
          };
        }
      };
    </script>
    

    Attributes

    参数 说明 类型 可选值 默认值
    value / v-model 绑定值 date(DateTimePicker) / array(DateTimeRangePicker)
    readonly 完全只读 boolean false
    disabled 禁用 boolean false
    editable 文本框可输入 boolean true
    clearable 是否显示清除按钮 boolean true
    size 输入框尺寸 string large, small, mini
    placeholder 非范围选择时的占位内容 string
    start-placeholder 范围选择时开始日期的占位内容 string
    end-placeholder 范围选择时结束日期的占位内容 string
    time-arrow-control 是否使用箭头进行时间选择 boolean false
    type 显示类型 string year/month/date/week/ datetime/datetimerange/daterange date
    format 显示在输入框中的格式 string 日期格式 yyyy-MM-dd HH:mm:ss
    align 对齐方式 string left, center, right left
    popper-class DateTimePicker 下拉框的类名 string
    picker-options 当前时间日期选择器特有的选项参考下表 object {}
    range-separator 选择范围时的分隔符 string - ‘-’
    default-value 可选,选择器打开时默认显示的时间 Date 可被new Date()解析
    default-time 选中日期后的默认具体时刻 非范围选择时:string / 范围选择时:string[] 非范围选择时:形如12:00:00的字符串;范围选择时:数组,长度为 2,每项值为字符串,形如12:00:00,第一项指定开始日期的时刻,第二项指定结束日期的时刻。不指定会使用时刻 00:00:00
    value-format 可选,绑定值的格式。不指定则绑定值为 Date 对象 string 日期格式
    name 原生属性 string
    unlink-panels 在范围选择器里取消两个日期面板之间的联动 boolean false
    prefix-icon 自定义头部图标的类名 string el-icon-date
    clear-icon 自定义清空图标的类名 string el-icon-circle-close

    Picker Options

    参数 说明 类型 可选值 默认值
    shortcuts 设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 Object[]
    disabledDate 设置禁用状态,参数为当前日期,要求返回 Boolean Function
    cellClassName 设置日期的 className Function(Date)
    firstDayOfWeek 周起始日 Number 1 到 7 7

    Shortcuts

    参数 说明 类型 可选值 默认值
    text 标题文本 string
    onClick 选中后的回调函数,参数是 vm,可通过触发 ‘pick’ 事件设置选择器的值。例如 vm.$emit(‘pick’, new Date()) function

    Events

    Event Name Description Parameters
    change 用户确认选定的值时触发 组件绑定值。格式与绑定值一致,可受 value-format 控制
    blur 当 input 失去焦点时触发 组件实例
    focus 当 input 获得焦点时触发 组件实例

    Methods

    方法名 说明 参数
    focus 使 input 获取焦点

    Slots

    Name 说明
    range-separator 自定义分隔符

    4、ColorPicker 颜色选择器

    用于颜色选择,支持多种格式。

    基础用法



    使用 v-model 与 Vue 实例中的一个变量进行双向绑定,绑定的变量需要是字符串类型。

    <div class="block">
      <span class="demonstration">有默认值</span>
      <el-color-picker v-model="color1"></el-color-picker>
    </div>
    <div class="block">
      <span class="demonstration">无默认值</span>
      <el-color-picker v-model="color2"></el-color-picker>
    </div>
    
    <script>
      export default {
        data() {
          return {
            color1: '#409EFF',
            color2: null
          }
        }
      };
    </script>
    

    选择透明度


    ColorPicker 支持普通颜色,也支持带 Alpha 通道的颜色,通过show-alpha属性即可控制是否支持透明度的选择。

    <el-color-picker v-model="color" show-alpha></el-color-picker>
    
    <script>
      export default {
        data() {
          return {
            color: 'rgba(19, 206, 102, 0.8)'
          }
        }
      };
    </script>
    

    预定义颜色


    ColorPicker 支持预定义颜色。

    <el-color-picker
      v-model="color"
      show-alpha
      :predefine="predefineColors">
    </el-color-picker>
    
    <script>
      export default {
        data() {
          return {
            color: 'rgba(255, 69, 0, 0.68)',
            predefineColors: [
              '#ff4500',
              '#ff8c00',
              '#ffd700',
              '#90ee90',
              '#00ced1',
              '#1e90ff',
              '#c71585',
              'rgba(255, 69, 0, 0.68)',
              'rgb(255, 120, 0)',
              'hsv(51, 100, 98)',
              'hsva(120, 40, 94, 0.5)',
              'hsl(181, 100%, 37%)',
              'hsla(209, 100%, 56%, 0.73)',
              '#c7158577'
            ]
          }
        }
      };
    </script>
    

    不同尺寸

    <el-color-picker v-model="color"></el-color-picker>
    <el-color-picker v-model="color" size="medium"></el-color-picker>
    <el-color-picker v-model="color" size="small"></el-color-picker>
    <el-color-picker v-model="color" size="mini"></el-color-picker>
    
    <script>
      export default {
        data() {
          return {
            color: '#409EFF'
          }
        }
      };
    </script>
    

    Attributes

    参数 说明 类型 可选值 默认值
    value / v-model 绑定值 string
    disabled 是否禁用 boolean false
    size 尺寸 string medium / small / mini
    show-alpha 是否支持透明度选择 boolean false
    color-format 写入 v-model 的颜色的格式 string hsl / hsv / hex / rgb hex(show-alpha 为 false)/ rgb(show-alpha 为 true)
    popper-class ColorPicker 下拉框的类名 string
    predefine 预定义颜色 array

    Events

    事件名称 说明 回调参数
    change 当绑定值变化时触发 当前值
    active-change 面板中当前显示的颜色发生改变时触发 当前显示的颜色值
    展开全文
  • 自定义酒店日期选择器

    千次阅读 2018-09-05 10:38:11
    自定义酒店日期选择器 自定义日期区间选择器,类似于途家等酒店、旅游日期区间选择器: 重写PopupWindow 制定区间日历 添加日历日期选中监听 *封装插件化 github开源 CustomDatePicker l类似于途家等酒店...

    自定义酒店日期选择器

    自定义日期区间选择器,类似于途家等酒店、旅游日期区间选择器:

    • 重写PopupWindow
    • 制定区间日历
    • 添加日历日期选中监听
    • 封装插件化
    • github开源

    CustomDatePicker

    类似于途家等酒店日期选择器,弹出自定义的PopupWindow,监听日期选中,返回结果。代码已经开源到GitHub上,提供插件化。 —— [ Wiki ]

    Github 地址:https://github.com/atuan07/CustomHotelCalender

    1. 添加依赖:


     Step 1.Add it in your root build.gradle at the end of repositories:
    
        allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
         }
    
     Step 2. Add the dependency
    
        dependencies {
            implementation 'com.github.atuan07:CustomHotelCalender:V1.0.2'
        }
    

    2.使用方法:


        private int startGroup = -1;//全局量
        private int endGroup = -1;
        private int startChild = -1;
        private int endChild = -1;
        ...
             new DatePopupWindow
                .Builder(MainActivity.this, Calendar.getInstance().getTime(), view)//初始化
                .setInitSelect(startGroup, startChild, endGroup, endChild)//设置上一次选中的区间状态
                .setInitDay(false)//默认为true,UI内容为共几天、开始、结束;当为false时,UI内容为共几晚、入住、离开
                .setDateOnClickListener(new DatePopupWindow.DateOnClickListener() {//设置监听
                    //点击完成按钮后回调返回方法
                    @Override
                    public void getDate(String startDate, String endDate, int startGroupPosition, int 
                                       startChildPosition, int endGroupPosition, int endChildPosition) {
                        startGroup = startGroupPosition;//开始月份位置
                        startChild = startChildPosition;//开始对应月份中日的位置
                        endGroup = endGroupPosition;//结束月份位置
                        endChild = endChildPosition;//结束对应月份中日的位置
                        String mStartTime = CalendarUtil.FormatDateYMD(startDate);
                        String mEndTime = CalendarUtil.FormatDateYMD(endDate);
                        result.setText("您选择了:" + mStartTime + "到" + mEndTime);
                    }
                }).builder();
    

    效果图:

    这里写图片描述

    展开全文
  • 实现效果: 日期选择器 时间选择器 实现方法: 1、自定义选择器dialog public class DatePickDialog extends Dialog i...

    实现效果:

    日期选择器                                                                                       时间选择器

                   

     

     

    实现方法:

     

    1、自定义选择器dialog

    public class DatePickDialog extends Dialog implements OnChangeLisener {
    
        private TextView titleTv;
        private FrameLayout wheelLayout;
        private TextView cancel;
        private TextView sure;
        private TextView messgeTv;
        private TextView timete;
    
        private String title;
        private String format;
        private DateType type = DateType.TYPE_ALL;
    
        //开始时间
        private Date startDate = new Date();
        //年分限制,默认上下5年
        private int yearLimt = 5;
    
        private OnChangeLisener onChangeLisener;
    
        private OnSureLisener onSureLisener;
    
        private DatePicker mDatePicker;
    
    
        //设置标题
        public void setTitle(String title) {
            this.title = title;
        }
    
        //设置模式
        public void setType(DateType type) {
            this.type = type;
        }
    
        //设置选择日期显示格式,设置显示message,不设置不显示message
        public void setMessageFormat(String format) {
            this.format = format;
        }
    
        //设置开始时间
        public void setStartDate(Date startDate) {
            this.startDate = startDate;
        }
    
        //设置年份限制,上下年份
        public void setYearLimt(int yearLimt) {
            this.yearLimt = yearLimt;
        }
    
        //设置选择回调
        public void setOnChangeLisener(OnChangeLisener onChangeLisener) {
            this.onChangeLisener = onChangeLisener;
        }
    
        //设置点击确定按钮,回调
        public void setOnSureLisener(OnSureLisener onSureLisener) {
            this.onSureLisener = onSureLisener;
        }
    
        public DatePickDialog(Context context) {
            super(context, R.style.dialog_style);
        }
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.cbk_dialog_pick_time);
    
            initView();
            initParas();
        }
    
        private DatePicker getDatePicker() {
            DatePicker picker = new DatePicker(getContext(), type);
            picker.setStartDate(startDate);
            picker.setYearLimt(yearLimt);
            picker.setOnChangeLisener(this);
            picker.init();
            return picker;
        }
    
    
        private void initView() {
            this.sure = (TextView) findViewById(R.id.sure);
            this.cancel = (TextView) findViewById(R.id.cancel);
            this.wheelLayout = (FrameLayout) findViewById(R.id.wheelLayout);
            this.titleTv = (TextView) findViewById(R.id.title);
            this.timete = (TextView) findViewById(R.id.timete);
            messgeTv = (TextView) findViewById(R.id.message);
    
            mDatePicker = getDatePicker();
            this.wheelLayout.addView(mDatePicker);
    
            //setValue
            this.titleTv.setText(title);
            this.timete.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    setType(DateType.TYPE_HM);
                    wheelLayout.removeAllViews();
                    initView();
                }
            });
            this.titleTv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    setType(DateType.TYPE_YMD);
                    wheelLayout.removeAllViews();
                    initView();
                }
            });
    
    
            this.cancel.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    dismiss();
                }
            });
    
            this.sure.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    String endtime = messgeTv.getText().toString();
                    myLisener.onChanged(endtime);
                    dismiss();
                    if (onSureLisener != null) {
                        onSureLisener.onSure(mDatePicker.getSelectDate());
                    }
                }
            });
        }
    
        private MyLisener myLisener;
    
        public void setMyLisener(MyLisener onChangeLisener) {
            this.myLisener = onChangeLisener;
        }
    
        private void initParas() {
            WindowManager.LayoutParams params = getWindow().getAttributes();
            params.gravity = Gravity.BOTTOM;
            params.width = DateUtils.getScreenWidth(getContext());
            getWindow().setAttributes(params);
        }
    
        @Override
        public void onChanged(Date date) {
    
            if (onChangeLisener != null) {
                onChangeLisener.onChanged(date);
            }
    
            if (!TextUtils.isEmpty(format)) {
                String messge = "";
                try {
                    messge = new SimpleDateFormat(format).format(date);
                } catch (Exception e) {
                    e.printStackTrace();
                }
                messgeTv.setText(messge);
    
            }
        }
    
    
    }
    

    2、activity调用

    private OnChangeLisener onChangeLisener;
    private MyLisener myLisener;
            onChangeLisener =new OnChangeLisener() {
                @Override
                public void onChanged(Date date) {
                    String messge = "";
                    try {
    //                    messge = new SimpleDateFormat("HH:mm").format(date);
                        messge = new SimpleDateFormat("yyyy-MM-dd").format(date);
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            };
            myLisener = new MyLisener() {
                @Override
                public void onChanged(String date) {
                    Log.i("lgq","...回来了...."+date);
                }
            };

    3、起调方法

    private void showDatePickDialog(DateType type) {
        DatePickDialog dialog = new DatePickDialog(this);
        //设置上下年分限制
        dialog.setYearLimt(5);
        //设置标题
        dialog.setTitle("选择时间");
        //设置类型
        dialog.setType(type);
        //设置消息体的显示格式,日期格式
        dialog.setMessageFormat("yyyy-MM-dd HH:mm");
        //设置选择回调
        dialog.setOnChangeLisener(onChangeLisener);
        dialog.setMyLisener(myLisener);
        //设置点击确定按钮回调
        dialog.setOnSureLisener(null);
    
        dialog.show();
    }
      showDatePickDialog(DateType.TYPE_YMD);
    //        showDatePickDialog(DateType.TYPE_HM);

     

    demo链接:https://download.csdn.net/download/meixi_android/11434566

    展开全文
  • 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。 看下相应的属性: 具体的来看看代码,布局:<view
  • ElementUI中日期选择器级联

    千次阅读 2020-03-03 14:00:18
    需求: 两个日期选择器进行级联,使得开始日期始终小于或等于结束日期
  • android日期选择器DatepickerDialog

    千次阅读 2018-03-06 23:15:25
    android日期选择器DatepickerDialog 最新版见github地址:https://github.com/huangdali/DatepickerDialog 日期选择器,日历选择器,可标记某一天,DatepickerDialog,Tagged calendar 单选某一天 标记某一天 ...
  • Android自定义日期选择器源码

    万次下载 热门讨论 2014-08-23 15:42:54
    配套博客地址:http://blog.csdn.net/wwj_748/article/details/38778631
  • DatePicker从底部弹出的日期选择器使用把整个项目git clone后,把关键代码复制到工程中,注意资源文件的复制 初始化选择器:DatePickerView pickerView=new DatePickerView(MainActivity.this, new DatePickerView...
  • Confluence添加日期选择器

    千次阅读 2018-12-27 18:00:42
    Confluence添加日期选择器Confluence添加日期选择器参考 Confluence添加日期选择器 在页面中输入//,即可以激活日期选择器,然后选择你所需要的日期就行。 参考 [1] ...
  • Android轻松实现日期选择器、生日选择器、自定义起始时间 废话不多说 看下效果 效果图 代码实现 代码实现比较简单 按照步骤 你也可以实现同样的效果 第一步 设置依赖 android 和androidX都可以 //时间选择器 ...
  • vue日期选择器 移动端 约会时间 (vue-datetime) Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates. Vue的移动友好日期时间选择器。 支持日期,日期...
  • JAVA自定义日期选择器

    千次阅读 2016-12-09 21:05:11
    用java swing写的一个日期选择器
  • 本文就时间和日期选择器做一个简单的使用时间选择器一般设置时间我们都会选择TimePicker或者TimePickerDialog,因为TimePickerDialog直接就是对话框使用方便,所以很多初学的就会更多选择TimePickerDialog,不说他会...
  • android 日期选择器

    千次阅读 2014-11-24 16:00:39
    android日期选择器,开源项目地址:https://github.com/roomorama/Caldroid
  • 日期选择器浏览器兼容问题

    千次阅读 2017-10-19 15:25:19
    兼容各种浏览器的日期选择器问题 我在需要用到日期选择器的jsp页面上,以前用的是下面的方法: <input type="data"/> 这种方法在大部分浏览器显示是正常的,但是我用火狐和IE浏览器测试的时候日期下拉框显示不出来...
  • Datepicker日期选择器插件

    千次阅读 2018-08-07 14:23:45
    Datepicker日期选择器插件 这个插件还是比较简单的,而且样式也比较漂亮,可以自定义选择年月日、年月日时分、年月、时间段选择等等。 效果预览: 这个插件是基于jQuery和bootstrap的。因此我们需要引入的...
  • Bootstrap Datetimepicker(日期选择器

    千次阅读 2017-02-17 19:22:27
    Bootstrap-Datetimepicker日期选择器
  • react自制日期选择器

    千次阅读 2018-05-31 20:25:37
    自己写的react日期选择器,有bug请留言。效果如图:代码如下:import React from 'react';class Calendar extends React.Component { constructor(props) { super(props); this.state = { year: props.year, ...
  • picker-view日期选择器

    千次阅读 2019-02-24 20:54:07
    基于picker-view组件实现嵌入页面的选择器,用来实现日期选择器和时间选择器,可以更便捷、简单的选择时间日期。 二、使用方法: 点击页面时间,弹出悬浮窗,悬浮窗内是时间选择器,选定时间日期后点击确定即可。 三...
  • 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。 普通选择器:mode = selector 属性名 类型 默认值 说明 ...
  • MUI实现日期选择器

    千次阅读 2019-08-28 11:22:35
    一般来讲,日期选择器会出现在预约类的APP中,比如酒店预约、旅游预约、图书预约等等,而实现的方式也有许多种,笔者最近在学习MUI了,觉得该小技巧挺不错的,所以做此笔记希望能够对大家有所帮助。 实现的效果 ...
  • 安卓原生自带的日期选择器DatePickerDialog、时间选择器TimePickerDialog使用方法 XML布局如下图: 代码实现如下: public class MainActivity extends AppCompatActivity {  private ...
  • Date picker for distant dates, such as birthday. Just three clicks to choose any month and day 20 or 50 years ago. 日期选择器,用于遥远的日期,例如生日。 只需单击三下即可选择20或...
  • 其中,用到的组件有两个,一个是城市选择器element-china-area-data,另外一个是日期选择器vue-datepicker 接下来介绍一下这两个选择器的使用,github地址已经在上面标明了,点击组件的名字即可抵达。 一、城市选择...
  • picker从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。 html部分: <view class="">日期选择器</...
  • iOS自定义UIDatepicker日期选择器视图

    千次阅读 2017-01-03 14:59:52
    由于项目需要,需要定制一个日期选择器,找了半天没找到合适的就自己写了个demo; 自定义UIDatePicker日期选择器视图 效果如下: 下面贴上相关代码: ViewController: #import "ViewController.h" #import ...
  • DatePicker日期选择器隐藏Day选择

    千次阅读 2018-03-23 17:02:31
    DatePicker日期选择器隐藏Day,7.0Pad出错 项目中用到DatePicker日期选择器,但是由于其他原因只想使用年和月选择,于是就隐藏了日选择器 ((ViewGroup) ((ViewGroup) dp.getChildAt(0)).getChildAt(0))....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 244,049
精华内容 97,619
关键字:

日期选择器