jQueryweui時間選擇器datetimepicker只要年月日解決方案
只想選擇年月日,jquery-weui建議使用日曆
但實際的需求如果選擇生日等等,日曆選擇的使用者體驗很不好,所以進行原始碼修改,看下面顏色標註。
HTML部分
<input class="weui-input" type="text" id="birth" value="1977-07-07 ">
下面是JS部分
$("#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年,實際需求自定義最大最小年
+ 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;
})
}
}
}($);
相關文章
- jquery-weui時間選擇器datetimepicker只要年月日不要時間解決方案jQueryUI
- 小程式年月日時間段區間選擇
- 短視訊平臺搭建,選擇年月日時間軸日期
- element-ui 時間選擇器設定時間選擇範圍UI
- 自定義時間選擇器
- BootStrapDatePicker時間選擇器--TangobootGo
- iOS簡易時間選擇器iOS
- 選擇高可用性解決方案
- vue 手寫一個時間選擇器Vue
- 如何選擇HFM解決方案整合產品
- 直播帶貨原始碼,日期時間選擇器 選擇範圍限制原始碼
- iOS 時間校準解決方案iOS
- 內網外網伺服器時間同步解決方案內網伺服器
- 移動端時間選擇器(更新 1.2.0 版本)
- NTP時間同步伺服器(區域網時鐘同步)解決方案伺服器
- 時間選擇外掛ClockPickerKPI
- elementUI中日期選擇器,控制開始時間小於結束時間UI
- iOS仿滴滴預約用車時間選擇器iOS
- element plus 選擇多個日期(年月日)時功能不生效問題
- vue中selected預設選擇空白解決方案)Vue
- 時間年月日格式轉化
- AngularJS教程十六—— 時間選擇AngularJS
- 根據datetimepicker選擇的日期計算年齡
- 如何進行實時ELT解決方案選型?
- iOS全埋點解決方案-時間相關iOS
- CSS 選擇器詳解CSS
- jQuery - 選擇器詳解jQuery
- 002---選擇器(標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器)字元
- React Native日期時間選擇元件React Native元件
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- 選擇正確DevSecOps解決方案的七個技巧dev
- 關於設定選擇條顏色多個ListView之間切換問題解決方案View
- jQuery選擇器——基本選擇器jQuery
- JavaScript 時間戳轉換為年月日JavaScript時間戳
- Java 8 的日期與時間問題解決方案Java
- 基本CSS選擇器,複合選擇器,後代選擇器CSS
- 【MySQL】時間型別儲存格式選擇MySql型別
- 內穆爾(Nemours)兒童健康系統選擇HIDGlobal解決方案