精华内容
下载资源
问答
  • DEMO下载 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML view class="tui-picker-content&...时间选择器(选择时分)view> pi

    效果体验二维码(外联图片失效了)

    如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

    声明

    bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变。
    造成原因:这一点就是由于在bindcolumnchange事件做的值改变处理造成。
    处理方法:如果需要确定后再改变值,请将bindcolumnchange事件中的处理操作放到bindchange事件中。
    感谢:感谢qq_41906890指出的问题!

    下载

    DEMO下载

    效果图

    精确到秒的微信小程序日期时间选择器

    实现原理

    利用微信小程序的picker组件的多列选择器实现!

    WXML

    <view class="tui-picker-content">
      <view class="tui-picker-name">时间选择器(选择时分)</view>
      <picker mode="time" value="{{time}}" start="09:00" end="17:30" bindchange="changeTime">
        <view class="tui-picker-detail">
          午饭时间: {{time}} 
        </view>
      </picker>
    </view>
    
    <view class="tui-picker-content">
      <view class="tui-picker-name">日期选择器(选择年月日)</view>
      <picker mode="date" value="{{date}}" start="2017-10-01" end="2017-10-08" bindchange="changeDate">
        <view class="tui-picker-detail">
          国庆出游: {{date}}
        </view>
      </picker>
    </view>
    
    <view class="tui-picker-content">
      <view class="tui-picker-name">日期时间选择器(精确到秒)</view>
      <picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
        <view class="tui-picker-detail">
          选择日期时间: {{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}:{{dateTimeArray[5][dateTime[5]]}}
        </view>
      </picker>
    </view>
    <view class="tui-picker-content">
      <view class="tui-picker-name">日期时间选择器(精确到分)</view>
      <picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}">
        <view class="tui-picker-detail">
          选择日期时间: {{dateTimeArray1[0][dateTime1[0]]}}-{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}} {{dateTimeArray1[3][dateTime1[3]]}}:{{dateTimeArray1[4][dateTime1[4]]}}
        </view>
      </picker>
    </view>
    

    WXSS

    @import "../picker/picker.wxss";
    

    使用的是三级联动选择器的样式,所以直接 import 引入!

    JS

    var dateTimePicker = require('../../utils/dateTimePicker.js');
    
    Page({
      data: {
        date: '2018-10-01',
        time: '12:00',
        dateTimeArray: null,
        dateTime: null,
        dateTimeArray1: null,
        dateTime1: null,
        startYear: 2000,
        endYear: 2050
      },
      onLoad(){
        // 获取完整的年月日 时分秒,以及默认显示的数组
        var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
        var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
        // 精确到分的处理,将数组的秒去掉
        var lastArray = obj1.dateTimeArray.pop();
        var lastTime = obj1.dateTime.pop();
        
        this.setData({
          dateTime: obj.dateTime,
          dateTimeArray: obj.dateTimeArray,
          dateTimeArray1: obj1.dateTimeArray,
          dateTime1: obj1.dateTime
        });
      },
      changeDate(e){
        this.setData({ date:e.detail.value});
      },
      changeTime(e){
        this.setData({ time: e.detail.value });
      },
      changeDateTime(e){
        this.setData({ dateTime: e.detail.value });
      },
      changeDateTime1(e) {
        this.setData({ dateTime1: e.detail.value });
      },
      changeDateTimeColumn(e){
        var arr = this.data.dateTime, dateArr = this.data.dateTimeArray;
    
        arr[e.detail.column] = e.detail.value;
        dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
    
        this.setData({
          dateTimeArray: dateArr,
          dateTime: arr
        });
      },
      changeDateTimeColumn1(e) {
        var arr = this.data.dateTime1, dateArr = this.data.dateTimeArray1;
    
        arr[e.detail.column] = e.detail.value;
        dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
    
        this.setData({ 
          dateTimeArray1: dateArr,
          dateTime1: arr
        });
      }
    })
    

    外部JS,dateTimePicker.js的引入

    function withData(param){
      return param < 10 ? '0' + param : '' + param;
    }
    function getLoopArray(start,end){
      var start = start || 0;
      var end = end || 1;
      var array = [];
      for (var i = start; i <= end; i++) {
        array.push(withData(i));
      }
      return array;
    }
    function getMonthDay(year,month){
      var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;
    
      switch (month) {
        case '01':
        case '03':
        case '05':
        case '07':
        case '08':
        case '10':
        case '12':
          array = getLoopArray(1, 31)
          break;
        case '04':
        case '06':
        case '09':
        case '11':
          array = getLoopArray(1, 30)
          break;
        case '02':
          array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
          break;
        default:
          array = '月份格式不正确,请重新输入!'
      }
      return array;
    }
    function getNewDateArry(){
      // 当前时间的处理
      var newDate = new Date();
      var year = withData(newDate.getFullYear()),
          mont = withData(newDate.getMonth() + 1),
          date = withData(newDate.getDate()),
          hour = withData(newDate.getHours()),
          minu = withData(newDate.getMinutes()),
          seco = withData(newDate.getSeconds());
    
      return [year, mont, date, hour, minu, seco];
    }
    function dateTimePicker(startYear,endYear,date) {
      // 返回默认显示的数组和联动数组的声明
      var dateTime = [], dateTimeArray = [[],[],[],[],[],[]];
      var start = startYear || 1978;
      var end = endYear || 2100;
      // 默认开始显示数据
      var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
      // 处理联动列表数据
      /*年月日 时分秒*/ 
      dateTimeArray[0] = getLoopArray(start,end);
      dateTimeArray[1] = getLoopArray(1, 12);
      dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
      dateTimeArray[3] = getLoopArray(0, 23);
      dateTimeArray[4] = getLoopArray(0, 59);
      dateTimeArray[5] = getLoopArray(0, 59);
    
      dateTimeArray.forEach((current,index) => {
        dateTime.push(current.indexOf(defaultDate[index]));
      });
    
      return {
        dateTimeArray: dateTimeArray,
        dateTime: dateTime
      }
    }
    module.exports = {
      dateTimePicker: dateTimePicker,
      getMonthDay: getMonthDay
    }
    

    总结

    1. 将初始化列表以及初始化默认显示的数组放到dateTimePicker.js,防止页面逻辑太乱,而且可以多处使用;
    2. 判断是否为闰年,在三木表达式中,必须将能别400整除放在前边,因为或运算只要一个条件满足,就会返回true,不会执行后续表达式;
    3. switch case的合并方法需要注意格式;
    4. 如果只需要联动列表更新,二结果展示栏不更新,则在changeDateTimeColumn函数中只更新dateTimeArray的值。

    WXRUI体验二维码

    WXRUI体验码

    如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

    更多微信小程序实例

    展开全文
  • react时间选择器 时间选择器组件

    千次阅读 2019-09-26 20:45:27
    react时间选择器 时间选择器组件

    react时间选择器 时间选择器组件

    展开全文
  • Android 仿IOS3D时间选择器城市选择器

    千次下载 热门讨论 2016-01-27 16:47:56
    Android 仿IOS3D时间选择器城市选择器 城市数据从数据库读取,可自由添加数据。 详情可见 http://blog.csdn.net/u014061684/article/details/50595237
  • 安卓自定义时间选择器
  • PickerView时间选择器和条件选择器

    千次阅读 2017-03-30 11:38:58
    PickerView时间选择器和条件选择器的使用
    github地址:https://github.com/Bigkoo/Android-PickerView
    PickerViewDialog.zip源码地址:http://download.csdn.net/detail/daidaishuiping/9798681
    
    step1、添加依赖compile 'com.contrarywind:Android-PickerView:3.2.5'
    
    step2、在activity代码
    public class MainActivity extends AppCompatActivity {
    
        private TimePickerView timePickerView;//时间选择器
        private OptionsPickerView optionsPickerView;//条件选择器
    
        private ArrayList<ProvinceBean> options1Items = new ArrayList<>();
        private ArrayList<ArrayList<String>> options2Items = new ArrayList<>();
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
      //最好等数据加载完毕再初始化并显示,以免数据量大的时候,还未加载完毕就显示,造成APP崩溃。
            initTimePicker();
            initOptionData();
            initOptionPicker();
    
        }
    
        public void doClick(View view) {
            switch (view.getId()) {
                case R.id.timePickerBTN:
                    timePickerView.show(view);
                    break;
                case R.id.optionPickerBTN:
                    optionsPickerView.show(view);
                    break;
            }
        }
    
        /**
         * 初始化时间选择器
         */
        private void initTimePicker() {
    
            timePickerView = new TimePickerView.Builder(this, new TimePickerView.OnTimeSelectListener() {
                @Override
                public void onTimeSelect(Date date, View v) {//选中事件回调
                    // 这里回调过来的v,就是show()方法里面所添加的 View 参数,如果show的时候没有添加参数,v则为null
                    Button btn = (Button) v;
                    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                    btn.setText(sdf.format(date));
                }
            })
                    .setType(TimePickerView.Type.YEAR_MONTH_DAY)
                    .setLabel("", "", "", "", "", "") //设置空字符串以隐藏单位提示
                    .setDividerColor(Color.DKGRAY)
                    .setContentSize(20)
                    .setDate(Calendar.getInstance())
                    .build();
        }
    
        /**
         * 条件选择器
         */
        private void initOptionPicker() {
    
            //如果是三级联动的数据 请参照 JsonDataActivity 类里面的写法。
    
            optionsPickerView = new OptionsPickerView.Builder(this, new OptionsPickerView.OnOptionsSelectListener() {
                @Override
                public void onOptionsSelect(int options1, int options2, int options3, View v) {
                    //返回的分别是三个级别的选中位置
                    String tx = options1Items.get(options1).getPickerViewText()
                            + options2Items.get(options1).get(options2);
                    ((Button) v).setText(tx);
                }
            })
                    .setTitleText("城市选择")
                    .setContentTextSize(20)//设置滚轮文字大小
                    .setDividerColor(Color.GREEN)//设置分割线的颜色
                    .setSelectOptions(0, 1)//默认选中项
                    .setBgColor(Color.BLACK)
                    .setTitleBgColor(Color.DKGRAY)
                    .setTitleColor(Color.LTGRAY)
                    .setCancelColor(Color.YELLOW)
                    .setSubmitColor(Color.YELLOW)
                    .setTextColorCenter(Color.LTGRAY)
                    .isCenterLabel(false) //是否只显示中间选中项的label文字,false则每项item全部都带有label。
                    .setLabels("省", "市", "区")
                    .build();
            /*pvOptions.setPicker(options1Items);//一级选择器*/
            optionsPickerView.setPicker(options1Items, options2Items);//二级选择器
            /*pvOptions.setPicker(options1Items, options2Items,options3Items);//三级选择器*/
    
        }
    
        /**
         * 初始化条件选择器的数据
         */
        private void initOptionData() {
            //选项1
            options1Items.add(new ProvinceBean(0, "广东", "描述部分", "其他数据"));
            options1Items.add(new ProvinceBean(1, "湖南", "描述部分", "其他数据"));
            options1Items.add(new ProvinceBean(2, "广西", "描述部分", "其他数据"));
    
            //选项2
            ArrayList<String> options2Items_01 = new ArrayList<>();
            options2Items_01.add("广州");
            options2Items_01.add("佛山");
            options2Items_01.add("东莞");
            options2Items_01.add("珠海");
            ArrayList<String> options2Items_02 = new ArrayList<>();
            options2Items_02.add("长沙");
            options2Items_02.add("岳阳");
            options2Items_02.add("株洲");
            options2Items_02.add("衡阳");
            ArrayList<String> options2Items_03 = new ArrayList<>();
            options2Items_03.add("桂林");
            options2Items_03.add("玉林");
    
            options2Items.add(options2Items_01);
            options2Items.add(options2Items_02);
            options2Items.add(options2Items_03);
    
        }
    
    }
    
    时间选择器自定义属性:
    Calendar selectedDate = Calendar.getInstance();
     Calendar startDate = Calendar.getInstance();
     startDate.set(2013,1,1);
     Calendar endDate = Calendar.getInstance();
     endDate.set(2020,1,1);
    
     pvTime = new TimePickerView.Builder(this, new TimePickerView.OnTimeSelectListener() {
                @Override
                public void onTimeSelect(Date date,View v) {//选中事件回调
                    tvTime.setText(getTime(date));
                }
            })
                    .setType(TimePickerView.Type.ALL)//默认全部显示
                    .setCancelText("Cancel")//取消按钮文字
                    .setSubmitText("Sure")//确认按钮文字
                    .setContentSize(18)//滚轮文字大小
                    .setTitleSize(20)//标题文字大小
                    .setTitleText("Title")//标题文字
                    .setOutSideCancelable(false)//点击屏幕,点在控件外部范围时,是否取消显示
                    .isCyclic(true)//是否循环滚动
                    .setTitleColor(Color.BLACK)//标题文字颜色
                    .setSubmitColor(Color.BLUE)//确定按钮文字颜色
                    .setCancelColor(Color.BLUE)//取消按钮文字颜色
                    .setTitleBgColor(0xFF666666)//标题背景颜色 Night mode
                    .setBgColor(0xFF333333)//滚轮背景颜色 Night mode
                    .setRange(calendar.get(Calendar.YEAR) - 20, calendar.get(Calendar.YEAR) + 20)//默认是1900-2100年
                    .setDate(selectedDate)// 如果不设置的话,默认是系统时间*/
                    .setRangDate(startDate,endDate)//起始终止年月日设定
                    .setLabel("年","月","日","时","分","秒")
                    .isCenterLabel(false) //是否只显示中间选中项的label文字,false则每项item全部都带有label。
                    .isDialog(true)//是否显示为对话框样式
                    .build();
    
    条件选择器自定义属性:
    pvOptions = new  OptionsPickerView.Builder(this, new OptionsPickerView.OnOptionsSelectListener() {
                @Override
                public void onOptionsSelect(int options1, int option2, int options3 ,View v) {
                    //返回的分别是三个级别的选中位置
                    String tx = options1Items.get(options1).getPickerViewText()
                            + options2Items.get(options1).get(option2)
                            + options3Items.get(options1).get(option2).get(options3).getPickerViewText();
                    tvOptions.setText(tx);
                }
            })
                    .setSubmitText("确定")//确定按钮文字
                    .setCancelText("取消")//取消按钮文字
                    .setTitleText("城市选择")//标题
                    .setSubCalSize(18)//确定和取消文字大小
                    .setTitleSize(20)//标题文字大小
                    .setTitleColor(Color.BLACK)//标题文字颜色
                    .setSubmitColor(Color.BLUE)//确定按钮文字颜色
                    .setCancelColor(Color.BLUE)//取消按钮文字颜色
                    .setTitleBgColor(0xFF333333)//标题背景颜色 Night mode
                    .setBgColor(0xFF000000)//滚轮背景颜色 Night mode
                    .setContentTextSize(18)//滚轮文字大小
                    .setLinkage(false)//设置是否联动,默认true
                    .setLabels("省", "市", "区")//设置选择的三级单位
                    .isCenterLabel(false) //是否只显示中间选中项的label文字,false则每项item全部都带有label。
                    .setCyclic(false, false, false)//循环与否
                    .setSelectOptions(1, 1, 1)  //设置默认选中项
                    .setOutSideCancelable(false)//点击外部dismiss default true
                    .isDialog(true)//是否显示为对话框样式
                    .build();
    
            pvOptions.setPicker(options1Items, options2Items, options3Items);//添加数据源
    
    


    展开全文
  • vue 日期时间选择器 Vue日期时间选择器 (Vue Datetime picker) Vue Datetime picker BY Vladyslav Shchepotin. Vue日期时间选择器Vladyslav Shchepotin。 View demo 查看演示 Download Source 下载源 要求 ...

    vue 日期时间选择器

    Vue日期时间选择器 (Vue Datetime picker)

    Vue Datetime picker BY Vladyslav Shchepotin.

    Vue日期时间选择器Vladyslav Shchepotin。

    要求 (Requirements)

    • Vue.js ^2.5.17

      Vue.js ^2.5.17

    用法 (Usage)

    npm install vue-vanilla-datetime-picker --save
    import DateTimePicker from 'vue-vanilla-datetime-picker';
    
    Vue.component('date-time-picker', DateTimePicker);
    @import "node_modules/vue-vanilla-datetime-picker/dist/DateTimePicker"

    道具: (Props:)

    NameRequiredTypeDefaultDescription
    v-model, value*String, Date, DateTime (luxon)Value
    value-formatStringyyyy-LL-dd HH:mm:ssValue format
    max-dateString, Date, DateTime (luxon)nullMax date
    min-dateString, Date, DateTime (luxon)nullMin date
    constraints-formatStringyyyy-LL-ddConstraints format
    localeStringenSet locale.
    inlineBooleanfalseEnable inline mode.
    disabledBooleanfalseDisable datetime picker.
    formatStringyyyy-LL-dd HH:mmDisplay format.
    time-pickerBooleantrueShow time picker.
    hour-timeNumber24Hour in 12/24-hour time. Values: '12', '24'.
    no-toggle-time-pickerBooleanfalseNo toggle time picker button.
    only-time-pickerBooleanfalseShow only time picker.
    start-from-sundayBooleanfalseSet Sunday as first day of week.
    minute-stepNumber1Set step for minute.
    seconds-pickerBooleanfalseShow second picker.
    initial-viewStringdaysInitial view: 'days', 'months', 'years'
    main-button-classStringClass for main button.
    disabled-datesArray[]Array of disabled dates.
    highlightedArray[]Array of highlighted dates. Example: [{ date: '2018-09-17', class: 'highlighted' }]
    auto-closeBooleanfalseClose date picker after select date.
    clear-buttonBooleanfalseShow "Clear" button.
    close-buttonBooleanfalseShow "Close" button.
    today-buttonBooleanfalseShow "Today" button.
    value-typeStringAutoSet value type. Types: 'Auto', 'String', 'Date', 'Luxon'.
    empty-valueAny''Set empty value for clear button.
    名称 需要 类型 默认 描述
    v型,价值 * 字符串,日期,日期时间(勒克斯)
    值格式 yyyy-LL-dd HH:mm:ss 格式
    最大日期 字符串,日期,日期时间(勒克斯) 空值 最长日期
    最小日期 字符串,日期,日期时间(勒克斯) 空值 最小日期
    约束格式 yyyy-LL-dd 约束格式
    地区 设置语言环境
    排队 布尔型 启用串联模式。
    残障人士 布尔型 禁用日期时间选择器。
    格式 yyyy-LL-dd HH:mm 显示格式
    时间选择器 布尔型 真正 显示时间选择器。
    小时时间 24 12/24小时制的小时。 值:“ 12”,“ 24”。
    无切换时间选择器 布尔型 没有切换时间选择器按钮。
    只能选择时间 布尔型 仅显示时间选择器。
    从星期日开始 布尔型 将星期日设置为一周的第一天。
    分钟步 1个 将步骤设置为分钟。
    秒选 布尔型 显示第二个选择器。
    初步观点 初始视图:“天”,“月”,“年”
    主按钮类 主按钮的类。
    禁用日期 数组 [] 禁用日期的数组。
    突出显示 数组 [] 突出显示日期的数组。 示例:[{date:'2018-09-17',class:'highlighted'}]
    自动关闭 布尔型 选择日期后关闭日期选择器。
    清除按钮 布尔型 显示“清除”按钮。
    关闭按钮 布尔型 显示“关闭”按钮。
    今天按钮 布尔型 显示“今天”按钮。
    值类型 汽车 设定值类型。 类型:“自动”,“字符串”,“日期”,“ Luxon”。
    空值 任何 '' 设置清除按钮的空值。

    插槽: (Slots:)

    NameDescription
    choose-dateFor main button if date not selected.
    formatted-datetimeFor main button if date selected.
    dateFor date button.
    timeFor time button.
    months-prevFor previous month button.
    months-nextFor next month button.
    years-prevFor previous year button.
    years-nextFor next year button.
    decades-prevFor previous decade button.
    decades-prevFor next decade button.
    hours-upFor hours up button.
    hours-downFor hours down button.
    minutes-upFor minutes up button.
    minutes-downFor minutes down button.
    seconds-upFor seconds up button.
    seconds-downFor seconds down button.
    meridiems-upFor meridiems up button.
    meridiems-downFor meridiems down button.
    clearFor clear button.
    closeFor close button.
    todayFor today button.
    名称 描述
    选择日期 对于主按钮(如果未选择日期)。
    格式化日期时间 对于主按钮(如果选择了日期)。
    日期 对于日期按钮。
    时间 对于时间按钮。
    上个月 对于上个月的按钮。
    下个月 对于下个月按钮。
    前几年 对于上一年按钮。
    接下来的几年 对于明年按钮。
    几十年前 对于前十年的按钮。
    几十年前 对于下一个十年按钮。
    小时以上 数小时向上按钮。
    数小时下来 对于小时下降按钮。
    分钟以上 对于分钟向上按钮。
    分钟下来 按下分钟按钮。
    秒上升 秒钟增加按钮。
    秒秒 按下秒数按钮。
    子午线 对于子午线向上按钮。
    子午线 对于子午线向下按钮。
    明确 对于清除按钮。
    用于关闭按钮。
    今天 对于今天按钮。

    大事记: (Events:)

    Name
    close
    open
    名称
    打开

    发展历程 (Development)

    npm install

    编译和热重装以进行开发 (Compiles and hot-reloads for development)

    npm run serve

    编译并最小化生产 (Compiles and minifies for production)

    npm run build-lib

    整理和修复文件 (Lints and fixes files)

    npm run lint

    翻译自: https://vuejsexamples.com/vue-datetime-picker/

    vue 日期时间选择器

    展开全文
  • Js日期时间选择器

    热门讨论 2014-08-06 16:06:30
    一个js日期和时间选择器,支持精确到毫秒的时间选择 http://blog.csdn.net/yanwushu/article/details/38401749 效果预览 http://www.helloweba.com/demo/timepicker/
  • 安卓选择器类库,包括日期选择器、时间选择器、单项选择器、城市选择器、颜色选择器、文件选择器、目录选择器、数字选择器、星座选择器、生肖选择器等。 欢迎大伙儿在issues提交你的意见或建议 地址:...
  • 实现效果: 日期选择器 时间选择器 实现方法: 1、自定义选择器dialog public class DatePickDialog extends Dialog i...
  • 需要element的DateTimePicker 日期时间选择器 部分代码如下: <el-form-item label="出发时间:" prop="startTime"> <el-date-picker v-model="editForm.startTime" :picker-options="pickerOptions"/...
  • vue滑动选择器(一键开启时间选择器)

    千次阅读 2019-06-06 14:59:23
    vue滑动选择器(一键开启时间选择器) 直接上demo npm i time_check_jiangji 之后直接用 <template> <div class="A"> <div @click="showFn">开</div> <Time v-if="show" :arr=...
  • antd vue时间选择器(年选择器)

    千次阅读 2020-08-31 23:46:30
    antd vue时间选择器(年选择器) 最近项目中用到了antd vue,项目中的版本是1.5.2版本,在做日期选择器时发现只有日,周,月份选择器,独独缺少年份选择器,如果你的项目也是怕升级对整体影响太多,不妨试试下面这种...
  • 前几天因为一个业务需求 需要实现一个预约时间的效果 效果如下(ps....利用多列选择器效果加上实现类似日历的算法实现的 下面直接贴核心代码 wxml布局 <view class='view3'> <text>...
  • ///普通简易选择器 static void openSimpleDataPicker( BuildContext context, { @required List<T> list, String title, @required T value, PickerDataAdapter adapter, @required PickerConfirmCallback ...
  • Flutter 日期选择器与时间选择器

    千次阅读 2019-07-04 14:12:42
    Flutter日期选择器
  • bootstrap时间控件--时间选择器

    千次阅读 2019-08-23 17:03:06
    对应上面的三个时间选择器,写法如下: 首先引入css和js: <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href=...
  • 直接上效果图: 图1: 图2: 图3: 图4: ...时间选择器: Calendar calendar = Calendar.getInstance(); int hourOfDay = calendar.get(Calendar.HOUR_OF_DAY); //得到小时 ...
  • bootstrap时间选择器-datetimepicker

    千次阅读 2019-08-23 17:50:55
    接上一篇文章,写引用不同的js的时间选择器,参考连接:https://github.com/uxsolutions/bootstrap-datepicker 引入连接为: <link href=...
  • layui时间选择器的使用

    万次阅读 2019-05-28 07:59:22
    时间选择器在一定程度上简化了日期的输入,而layui作为一款备受欢迎的前端框架,时间选择器主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式为基本核心,并且均支持范围...
  • 项目中常会用到时间选择器,但是找了一下layui的官方文档时间选择器是独立的存在,但是要实现end时间选择器max为start选择器最终选择时间,还需要在done(选中)事件做下一步处理 废话不多说。直接上代码 /** * @...
  • antd组件限定时间选择器日期范围

    千次阅读 2019-08-15 19:48:40
    react的antd组件时间选择器限定日期范围为指定范围 react项目中碰到一个需求,要求antd的日期选择器组件可选择范围为:只能选择开始时间的后60天 即开始时间在结束日期前60天,结束日期在开始日期后60天,以下是...
  • 利用WheelView实现的时间选择器DatePicker
  • 安卓原生自带的日期选择器DatePickerDialog、时间选择器TimePickerDialog使用方法 XML布局如下图: 代码实现如下: public class MainActivity extends AppCompatActivity {  private ...
  • H5 移动端 时间选择器

    千次阅读 2016-08-30 16:42:55
    移动端 时间选择器
  • layui 时间时间选择器最多选择30天

    千次阅读 热门讨论 2019-04-04 14:57:14
    layui 时间选择器最多选择30天https://www.layui.com/doc/modules/laydate.html html <label>时间选择:</label> <div class="layui-inline" id="start_div"> <input type="text" name=...
  • 仿iOS的PickerView控件,有时间选择和选项选择并支持...——TimePopupWindow 时间选择器,支持年月日时分,年月日,时分等格式 ——OptionsPopupWindow 选项选择器,支持一,二,三级选项选择,并且可以设置是否联动
  • 针对element-ui时间选择器进行时间选择范围的控制,最终实现的效果如下图所示,灰色的区域为不能选择区域! <el-form-item label="日期:" prop="time"> <el-date-picker v-model="time" type="date" :...
  • android开发之时间选择器

    千次阅读 2018-06-04 00:04:15
    这几天,公司UI给了一个时间选择器的设计,一听就觉得 网上一大堆,对吧 。 特别简单,只要去网上搜下就好了,然后依赖进项目就OK了 没毛病。 不过看了设计的效果图后我就崩溃了。。开源的那些控件都不是这样的。...
  • Android 只有年月的时间选择器

    热门讨论 2015-05-06 17:42:42
    只有年月的时间选择器,没有日期选项的demo

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,436,771
精华内容 574,708
关键字:

时间选择器