草庐IT

element日期选择器el-date-picker样式

zttbee 2025-01-17 原文

1、基本用法

  • 代码：
<el-date-picker
	type="date"
	v-model="valueStart"
	value-format="yyyy-MM-dd"
	placeholder="开始时间" >
 </el-date-picker>
  • 代码解读：

type参数是用来定义选择器选择的对象，这里我们选择的是日期(date)，也可以只选择年（year），只选择月(month)，或只选择周(week)。
v-model是绑定一个值，如果不绑定的话，即使选择了某一个日期，框框里也没有数值。
value-format定义获取的时间的格式
placeholder是占位提示文字。

  • 效果：背景白色，与页面颜色不搭

2、调高度、颜色

  • 代码
::v-deep .el-input__inner {
	  background-color: transparent !important;
	  border-color:#80ffff;
	  box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
	  height: 30px;
	}

  • 代码解读
    background-color设置颜色，设置为透明，!important表示要覆盖以前的样式，本样式优先。
    border-color设置边框颜色
    box-shadow设置阴影样式
    height设置高度。

  • 效果
    背景变透明后与页面风格搭了起来，但日历图表没有垂直居中，反而有些靠下。

3、调日历图标位置

  • 代码
::v-deep .el-input__icon {
	    line-height: 30px;
	}
  • 代码解读
    把行高设为与日期框一样的高度就OK了，我这里日期框高是30px。
  • 效果
    图标居中了

4、调日历面板

  • 代码
    首先自定义一个样式名elDatePicker
<el-date-picker
	popper-class="elDatePicker"
	type="date"
	v-model="valueStart"
	placeholder="开始时间">
</el-date-picker>

然后在全局样式中定义该样式，我这个全局样式文件叫home.scss,在main.js引入了该文件(import “./assets/styles/home.scss”😉

.elDatePicker.el-picker-panel {
  color: #fff;//设置当前面板的月份的字体为白色，记为1
  background: #002450;//定义整体面板的颜色
  border: 1px solid #1384b4;//定义整体面板的轮廓
  .el-picker-panel__icon-btn {//设置年份月份调节按钮颜色，记为2
    color: #ffffff;
   }
  .el-date-picker__header-label{//设置年月显示颜色，记为3
  	color: #ffffff;
  }
  .el-date-table th {//设置星期颜色，记为4
      color:#ffffff;
  }
  
}
  • 效果

5、设置日期框日期颜色

细心的读者可能发现选中日期后，框里显示的日期是灰色，在之前的el-input__inner样式里加入color:#ffffff;就OK了

::v-deep .el-input__inner {
	  background-color: transparent !important;
	  border-color:#80ffff;
	  box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
	  height: 30px;
	  color:#ffffff;//字体为白色
	}

6、拓展

  • 拓展
    在修改日期框样式时，上述代码的.el-input__inner，.el-input__icon没有指明是哪个输入框，哪个图标，如果这样用的话，会污染其它框以及图标的样式，因此，可以指明是时期选择器
	::v-deep .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date{
		
	 input{//输入框，想当于.el-input__inner
			background-color: transparent !important;
			border-color:#80ffff;
			box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
			color:#ffffff;
			height: 30px;	
		  }
	.el-input__icon {//日历图标
			    line-height: 30px;
			}	
	}
el-date-pickerelementspanclasstokenjavascriptvue.js前端

有关element日期选择器el-date-picker样式的更多相关文章

  1. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  2. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  3. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  4. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  5. ruby - 检查日期是否在过去 7 天内 - 2

    我的日期格式如下:"%d-%m-%Y"(例如，今天的日期为07-09-2015)，我想看看是不是在过去的七天内。谁能推荐一种方法？ 最佳答案 你可以这样做:require"date"Date.today-7 关于ruby-检查日期是否在过去7天内，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/32438063/

  6. ruby-on-rails - 将 Ruby 中的日期/时间格式化为 YYYY-MM-DD HH :MM:SS - 2

    这个问题在这里已经有了答案:Railsformattingdate(4个答案)关闭4年前。我想格式化Time.Now函数以显示YYYY-MM-DDHH:MM:SS而不是:“2018-03-0909:47:19+0000”该函数需要放在时间中.现在功能。require‘roo’require‘roo-xls’require‘byebug’file_name=ARGV.first||“Template.xlsx”excel_file=Roo::Spreadsheet.open(“./#{file_name}“,extension::xlsx)xml=Nokogiri::XML::Build

  7. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  8. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  9. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基

  10. ruby-on-rails - ruby 日期方程不返回预期的真值 - 2

    为什么以下不同？Time.now.end_of_day==Time.now.end_of_day-0.days#falseTime.now.end_of_day.to_s==Time.now.end_of_day-0.days.to_s#true 最佳答案 因为纳秒数不同:ruby-1.9.2-p180:014>(Time.now.end_of_day-0.days).nsec=>999999000ruby-1.9.2-p180:015>Time.now.end_of_day.nsec=>999999998

随机推荐