html5年月日的,jquery-weui 时间选择器datetimepicker只要年月日不要时间解决方案

2021年06月18日2021年06月18日

只想选择年月日，jquery-weui建议使用日历

但实际的需求如果选择生日等等，日历选择的用户体验很不好，所以进行源码修改，看下面颜色标注。

下面是HTML部分

下面是JS部分$("#birth").birthdayPicker({ title: '请选择生日', min: '192021年06月18日-07',//只限制最大可以这样写'192021年06月18日-07  ' max: '192021年06月18日-07',//只限制最小可以这样写'192021年06月18日-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修改为 自定义名称

源码是2021年06月18日~2021年06月18日，实际需求自定义最大最小年+ 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; }) } }}($);