jQuery weui时间选择器datetimepicker只要年月日完美解决方案

为什么80%的码农都做不了架构师?>>>   hot3.png

只想选择年月日,jquery-weui建议使用日历
但实际的需求如果选择生日等等,日历选择的用户体验很不好,所以进行源码修改,看下面颜色标注。

 

下面是HTML部分
```python

```

 

下面是JS部分
```python
$("#birth").birthdayPicker({
    title: '请选择生日',
    min: '1970-07-07',//只限制最大可以这样写'1970-07-07  '
    max: '1990-07-07',//只限制最小可以这样写'1990-07-07  '
    times: function() {
        return [{
            values: [' ']
        }]
    },
    onChange: function(picker, values, displayValues) {
        console.log(values);
        console.log(values.slice(0, 3));
    },
    onClose: function(picker) {
        console.log(picker.value);
        console.log(picker.value.slice(0, 3));
    },
});
```

 

下面是需要引入的JS文件
把jquery-weui.js的源码提取出来把datetimePicker修改为 自定义名称
源码是1950年~2030年,实际需求自定义最大最小年
```python
+ function($) {
    "use strict";

    var defaults;

    var formatNumber = function(n) {
        return n < 10 ? "0" + n : n;
    }

    var Datetime = function(input, params) {
        this.input = $(input);
        this.params = params;

        this.initMonthes = ('01 02 03 04 05 06 07 08 09 10 11 12').split(' ');

        this.initYears = (function() {
            var arr = [];
            for(var i = 1928; i <= 2028; i++) {
                arr.push(i);
            }
            return arr;
        })();

        var p = $.extend({}, params, this.getConfig());
        $(this.input).picker(p);
    }

    Datetime.prototype = {
        getDays: function(max) {
            var days = [];
            for(var i = 1; i <= (max || 31); i++) {
                days.push(i < 10 ? "0" + i : i);
            }
            return days;
        },

        getDaysByMonthAndYear: function(month, year) {
            var int_d = new Date(year, parseInt(month) + 1 - 1, 1);
            var d = new Date(int_d - 1);
            return this.getDays(d.getDate());
        },
        getConfig: function() {
            var today = new Date(),
                params = this.params,
                self = this,
                lastValidValues;

            var config = {
                rotateEffect: false, //为了性能
                cssClass: 'datetime-picker',

                value: [today.getFullYear(), formatNumber(today.getMonth() + 1), formatNumber(today.getDate()), formatNumber(today.getHours()), (formatNumber(today.getMinutes()))],

                onChange: function(picker, values, displayValues) {
                    var cols = picker.cols;
                    var days = self.getDaysByMonthAndYear(values[1], values[0]);
                    var currentValue = values[2];
                    if(currentValue > days.length) currentValue = days.length;
                    picker.cols[4].setValue(currentValue);

                    //check min and max
                    var current = new Date(values[0] + '-' + values[1] + '-' + values[2]);
                    var valid = true;
                    if(params.min) {
                        var min = new Date(typeof params.min === "function" ? params.min() : params.min);

                        if(current < +min) {
                            picker.setValue(lastValidValues);
                            valid = false;
                        }
                    }
                    if(params.max) {
                        var max = new Date(typeof params.max === "function" ? params.max() : params.max);
                        if(current > +max) {
                            picker.setValue(lastValidValues);
                            valid = false;
                        }
                    }

                    valid && (lastValidValues = values);

                    if(self.params.onChange) {
                        self.params.onChange.apply(this, arguments);
                    }
                },

                formatValue: function(p, values, displayValues) {
                    return self.params.format(p, values, displayValues);
                },

                cols: [{
                        values: (function() {
                            var years = [];
                            for(var i = 1928; i <= 2028; i++) years.push(i);
                            return years;
                        })()
                    },
                    {
                        divider: true, // 这是一个分隔符
                        content: params.yearSplit
                    },
                    {
                        values: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
                    },
                    {
                        divider: true, // 这是一个分隔符
                        content: params.monthSplit
                    },
                    {
                        values: (function() {
                            var dates = [];
                            for(var i = 1; i <= 31; i++) dates.push(formatNumber(i));
                            return dates;
                        })()
                    },

                ]
            }

            if(params.dateSplit) {
                config.cols.push({
                    divider: true,
                    content: params.dateSplit
                })
            }

            config.cols.push({
                divider: true,
                content: params.datetimeSplit
            })

            var times = self.params.times();
            if(times && times.length) {
                config.cols = config.cols.concat(times);
            }

            var inputValue = this.input.val();
            if(inputValue) config.value = params.parse(inputValue);
            if(this.params.value) {
                this.input.val(this.params.value);
                config.value = params.parse(this.params.value);
            }

            return config;
        }
    }

    $.fn.birthdayPicker = function(params) {
        params = $.extend({}, defaults, params);
        return this.each(function() {
            if(!this) return;
            var $this = $(this);
            var datetime = $this.data("datetime");
            if(!datetime) $this.data("datetime", new Datetime(this, params));
            return datetime;
        });
    };

    defaults = $.fn.birthdayPicker.prototype.defaults = {
        input: undefined, // 默认值
        min: undefined, // YYYY-MM-DD 最大最小值只比较年月日,不比较时分秒
        max: undefined, // YYYY-MM-DD
        yearSplit: '-',
        monthSplit: '-',
        dateSplit: '', // 默认为空
        datetimeSplit: ' ', // 日期和时间之间的分隔符,不可为空
        times: function() {
            return [ // 自定义的时间
                {
                    values: (function() {
                        var hours = [];
                        for(var i = 0; i < 24; i++) hours.push(formatNumber(i));
                        return hours;
                    })()
                },
                {
                    divider: true, // 这是一个分隔符
                    content: ':'
                },
                {
                    values: (function() {
                        var minutes = [];
                        for(var i = 0; i < 60; i++) minutes.push(formatNumber(i));
                        return minutes;
                    })()
                }
            ];
        },
        format: function(p, values) { // 数组转换成字符串
            return p.cols.map(function(col) {
                return col.value || col.content;
            }).join('');
        },
        parse: function(str) {
            // 把字符串转换成数组,用来解析初始值
            // 如果你的定制的初始值格式无法被这个默认函数解析,请自定义这个函数。比如你的时间是 '子时' 那么默认情况这个'时'会被当做分隔符而导致错误,所以你需要自己定义parse函数
            // 默认兼容的分隔符
            var t = str.split(this.datetimeSplit);
            return t[0].split(/\D/).concat(t[1].split(/:|时|分|秒/)).filter(function(d) {
                return !!d;
            })
        }
    }

}($);
```

转载于:https://my.oschina.net/af666/blog/1603835

你可能感兴趣的:(jQuery weui时间选择器datetimepicker只要年月日完美解决方案)