gozoro/yii2-widgets

为 Bootstrap 3 设计的 Yii2 小部件。

维护者

详细信息

github.com/gozoro/yii2-widgets

主页

源代码

问题

安装次数: 7

依赖项: 1

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

类型:yii2-extension

v1.0.3 2024-06-11 13:42 UTC

Requires

MIT e9f15374495a72c2b66d018f585df3a59d3a055d

  • Gozoro <gozoro.woop@yandex.ru>

bootstrapwidgetwidgetsdatepickeryii2bootstrap3autocompleter

This package is auto-updated.

Last update: 2024-09-11 14:11:43 UTC

README

为 Bootstrap 3 设计的 Yii2 小部件。

日期选择器

<div style="width:200px;">
<?=Datepicker::widget(['name'=>'date', 'placeholder'=>'Date'])?>
</div>
带有选择月份的日期选择器示例 
<div style="width:200px;">
<?=Datepicker::widget([
	'name'=>'date',
	'placeholder' => 'Month',
	'readonly' => true,
	'style' => 'background:white;',
	'value' => '01.04.2024',
	'clientOptions'=>[
		'startDate' => '01.02.2024',
		'startView' => 1,
		'minViewMode' => 1,
		'todayBtn' => false,
		'todayHighlight' => false,
		'clearBtn' => true,
]])?>
</div>
范围日期选择器示例 
<div style="width:400px">
<?=Datepicker::widget([
	'name'=>['dateBegin', 'dateEnd'],
	'value'=>['2024-05-01', '2024-05-10'],
	'placeholder'=>['begin date', 'end date'],
	'style'=>['color:red', 'color:blue'],
	'clientOptions'=>[
		'format'  =>'yyyy-mm-dd'
	]
])?>
</div>

您可以在小部件配置中使用任何允许的 input-tag 属性。 clientOptions 是一个用于 jQuery 插件选项的特殊属性。

您可以在 这里 查看完整的客户端选项列表。您可以根据需要调整这些选项；结果和代码将实时显示在页面下方 datepicker-sandbox 页面上。

自动完成

基于 jQuery 插件的自动完成小部件 gozoro/jquery-autocompleter。

<div style="width:400px">

<?=Autocompleter::widget([
	'name' => 'county',
	'items' => [
			"Afghanistan",
			"Albania",
			"Algeria",
			"Andorra",
			"Angola",
			"Antigua and Barbuda",
			"Argentina",
			"Armenia",
			"Australia",
			"Austria",
			"Azerbaijan"
		],
	'clientOptions'=>[
		'value' => 'function(item, index){return index;}'
		]
])?>
</div>

选择器

基于 jQuery 插件的选择器小部件 gozoro/jquery-autocompleter。

<div style="width:400px">

<?=Selector::widget([
	'name' => 'county',
	'items' => [
			"Afghanistan",
			"Albania",
			"Algeria",
			"Andorra",
			"Angola",
			"Antigua and Barbuda",
			"Argentina",
			"Armenia",
			"Australia",
			"Austria",
			"Azerbaijan"
		],
	'clientOptions'=>[
		'value' => 'function(item, index){return index;}'
		]
])?>
</div>

多选择器

基于 jQuery 插件的多选择器小部件 gozoro/jquery-multiselect。

<div style="width:400px">
<?=MultiSelector::widget([
	'name' => 'countries[]',
	'items' => [
		"Afghanistan",
		"Albania",
		"Algeria",
		"Andorra",
		"Angola",
		"Antigua and Barbuda",
		"Argentina",
		"Armenia",
		"Australia",
		"Austria",
		"Azerbaijan"
	],

	'selection' => [1,2],
	'placeholder'=>'Enter countries',
])?>
</div>