Плагин календаря времени на стороне ПК полностью функционален и не имеет зависимостей

JavaScript

В Интернете существует множество версий подключаемого модуля календаря времени, бесчисленное количество мощных и простых функций, так зачем мне писать подключаемый модуль календаря?

Серьезно сказать вам:

  • У меня чешутся руки, и я просто тапаю и тапаю, когда свободен.
  • Разработать полнофункциональный плагин выбора даты
  • Непрерывная оптимизация и обновление в соответствии с потребностями вашего бизнеса

Ну ладно перейдем к кратким пояснениям по поводу использования плагинов, если вы не дурак, то наверняка второй разбираетесь в его использовании.

Примечание: Из-за коротких сроков разработки еще остались некоторые функции, которые не были реализованы и будут добавлены позже: например, фестивальное отображение, функции скинов и т. д. Конечно, код тоже нужно упростить.

Давайте посмотрим на картинку, чтобы увидеть эффект селектора времени:


Правильно, это висящий образец.Если вам не нужен этот тон, вы можете разветвить мой проект github, чтобы изменить красивый тон по своему желанию.

Конечно, вы также можете принести мне много-много багов, чтобы я их исправил 😃 .

адрес нпм:woohoo. эта лошадь plus.com/package/we…

адрес гитхаба:GitHub.com/Ван Вэйан и…

демонстрационный адрес:ву ву ву.SEOthinking.com/да дата/в…


проиллюстрировать:

  • Узлом DOM подключаемого модуля может быть поле ввода или любой другой закрытый HTML-тег.

  • Этот плагин не зависит от каких-либо сторонних плагинов, поэтому его можно использовать где угодно самостоятельно.

  • Плагин не совместим с более ранними версиями браузеров IE, будьте осторожны с браузерами IE

  • В настоящее время поддерживается только выбор одного периода времени, а методы выбора нескольких периодов времени будут представлены позже.

Инструкции:

Сторона браузера напрямую применяет css, js

<link href="./dist/zane-calendar.css">
<script src="./dist/zane-calendar.js"></script>

<!-- 需要加时间插件的输入框 -->
<input type="text" name="" id="zane-calendar">

初始化
zaneDate({
	elem:'#zane-calendar',
})

метод внедрения разработки webpack

const zaneDate = require('zane-calendar')
或
import zaneDate from 'zane-calendar'

<!-- 需要加时间插件的输入框 -->
<input type="text" name="" id="zane-calendar">

初始化
zaneDate({
	elem:'#zane-calendar',
})


Код gitHub вытаскивается для запуска

git clone https://github.com/wangweianger/zane-data-time-calendar.git
npm install
npm run dev
npm run build


Описание параметров плагина

{	
        elem:'#zane-calendar',   控件的dom原生 注意：仅限制于id选择器
	type:'day',   可选类型 day year month time oubleday doubleyear doublemonth doubletime
	lang:'cn',   可选择语言类型 cn , en 
	width:280,  插件宽度配置
	format:'yyyy-MM-dd HH:mm:ss',  时间格式化
	begintime:'',  开始时间  （单选择器默认选择此项）
	endtime:'',       结束时间  （double选择器需要）
	min:'',  可选取时间最小范围 1900-10-01
	max: '',  可选取时间最大范围 2099-12-31
	position:'fixed',  定位方式  暂时只支持 fixed
	event:'click',   事件方式 暂时只支持 click 
        zindex:100,  z-index的值
	showtime:true,  是否显示选择时间
	showclean:true,  是否显示清除按钮
	shownow:true,  是否显示当前按钮
	showsubmit:true, 是否显示提交按钮
	haveBotBtns:true, 是否有底部按钮列表
	calendarName:'', 此参数勿动 表示当前时间插件实例化对象
	mounted:()=>{}, 插件加载完成之后调用
	change:(fulltime,begintime,endtime)=>{}, 时间变更之后调用
	done:(fulltime,begintime,endtime)=>{}, 选择完成之后调用
}


Конкретную конфигурацию параметров см. в демонстрационном файле.

Метод вызова случая

默认完整选项
	zaneDate({
		elem:'#zane-calendar',
	})

	只选择年月日
	zaneDate({
		elem:'#zane-calendar',
		showtime:false,
	})

	使用英文
	zaneDate({
		elem:'#zane-calendar',
		lang:'en',
	})

	只选择年
	zaneDate({
		elem:'#zane-calendar',
		type:'year',
	})

	只选择月
	zaneDate({
		elem:'#zane-calendar',
		type:'month',
	})

	只选择时间
	zaneDate({
		elem:'#zane-calendar',
		type:'time',
	})

	格式化方式
	zaneDate({
		elem:'#zane-calendar',
		format:'yyyy年MM月dd日 HH时mm分ss秒',
	})

	限定能选择的最小最大区间
	zaneDate({
		elem:'#zane-calendar',
		min:'2017-08-01',
		max:'2017-08-20',
	})


Версия 1.1.0 Добавлена ​​настройка времени двойного выбора

config.type  新增double类型  可选类型如下：
day year month time doubleday doubleyear doublemonth doubletime

双日期范围选择
zaneDate({
	elem:'#demo21',
	type:'doubleday',
	showtime:false
})

双年范围选择
zaneDate({
	elem:'#demo22',
	type:'doubleyear',
})

双月范围选择
zaneDate({
	elem:'#demo23',
	type:'doublemonth',
})

双时间选择
zaneDate({
	elem:'#demo24',
	type:'doubletime',
})


1.2.0

  • Добавлен выбор времени для типа doubleday, поддерживает выбор часов, минут и секунд

  • Двойной тип определяет расстояние от края окна справа, если его недостаточно, оно будет автоматически располагаться как верхняя и нижняя даты.

config.type doubleday支持选择时间范围

双日期范围选择
zaneDate({
	elem:'#demo25',
	format:'yyyy-MM-dd HH:mm:ss',
	type:'doubleday',
	showtime:true
})


Версия 1.2.1 Добавлен параметр z-index

zaneDate({
	elem:'#zane-calendar',
	zindex:500,
})


2.0.5 исправить значение двойного селектора по умолчанию


Если у вас есть хорошие предложения или вопросы, пожалуйста, оставьте мне сообщение.



Следите за моим блогом:личный блог Зейна

Оригинальный адрес:Плагин календаря zaneDate не зависит от каких-либо сторонних плагинов и прост в использовании.


Категории