jquery-weui時間選擇器datetimepicker只要年月日不要時間解決方案

佀無極發表於2018-09-10
jQueryUI

2018年1月7日

只想選擇年月日，jquery-weui建議使用日曆
但實際的需求如果選擇生日等等，日曆選擇的使用者體驗很不好，所以進行原始碼修改，看下面顏色標註。

下面是HTML部分

<input class="weui-input" type="text" id="birth" value="1977-07-07 &nbsp;">

下面是JS部分

$("#birth").birthdayPicker({
    title: `請選擇生日`,
    min: `1970-07-07`,//只限制最大可以這樣寫`1970-07-07 &nbsp;`
    max: `1990-07-07`,//只限制最小可以這樣寫`1990-07-07 &nbsp;`
    times: function() {
        return [{
            values: [`&nbsp;`]
        }]
    },
    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年，實際需求自定義最大最小年

+ 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;
            })
        }
    }

}($);


相關文章