28HUI - DatePicker(hui.datePicker())

2024-01-12 07:40
文章标签 datepicker hui 28hui

本文主要是介绍28HUI - DatePicker(hui.datePicker()),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果图

在这里插入图片描述

HUI Date Picker 基于html5 的date组件,会调用手机系统的时间控件(不同手机展示效果不同,实现目的是一样的)。

使用方法
<input type="month|year|time" class="hui-button hui-button-large hui-date-picker" placeholder="请选择月份" />
使用 js 统一修正picker样式

hui.datePicker();

演示代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI Picker</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header"><div id="hui-back"></div><h1>HUI Date Picker</h1>
</header>
<div class="hui-wrap"><div class="hui-center-title" style="margin-top:15px;"><h1>演示样例</h1></div><div style="padding:28px;"><input type="month" class="hui-button hui-button-large hui-date-picker" placeholder="请选择月份" /><input type="date" class="hui-button hui-button-large hui-date-picker" placeholder="请选择日期" style="margin-top:20px;" /><input type="time" class="hui-button hui-button-large hui-date-picker" placeholder="请选择时间" style="margin-top:20px;" /> </div>
</div>
<script type="text/javascript" src="../js/hui.js" charset="utf-8"></script>
<script type="text/javascript">
/* 修正 datepicker 样式 */
hui.datePicker();
</script>
</body>
</html>

这篇关于28HUI - DatePicker(hui.datePicker())的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/597206

相关文章

datepicker 日期连续选择(需要改源码)

先上效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-e

JavaFX DatePicker

JavaFX DatePicker允许从给定日历中选择一天。DatePicker控件包含一个带有日期字段和日期选择器的组合框。JavaFX DatePicker控件使用JDK8日期时间API。 import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.DatePi

Datepicker值为空的时候如何处理?

写在前面 最近在做vue的页面开发,不得不说遇到不少大大小小的坑,网上相关资料也不是很多,所以既然遇到并解决了,就做个记录造福其他人吧。 简述 先简单说一下我做的这个项目的内容,主要是公司内部的议题查询、录入和编辑三个页面。 三个页面页面都需要用户输入日期,我用datepicker这个tag来实现 <FormItem :label="$t('录入时间')"><DatePicker class=

DatePicker和TimePicker入门

今天学习日期控件和时间控件 效果图: activity_main.xml中的代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"an

Android Setting 日期相关API,自定义DatePicker

最近在做Setting日期相关的工作,整理一下相关的API(相关代码源自Android 8.0高通代码) 注意:以下API来自Setting,使用的地方也在Setting中,如果其他非系统应用使用,可能需要加权限 设置日期API void setDate(int year, int month, int day) {Calendar c = Calendar.getInstance();Lo

DatePicker日期选择框(antd-design组件库)简单使用

1.DatePicker日期选择框 输入或选择日期的控件。 2.何时使用 当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。 组件代码来自: 日期选择框 DatePicker - Ant Design 3.本地验证前的准备 参考文章【react项目+antd组件-demo:hello-world react项目+antd组件-demo:hello-world_react+a

bootstrap datepicker 在bootstrap modal中不显示问题

在普通的网页中显示datepicker比较简单,将bootstrap-datepicker-zh_CN.js 和 bootstrap-datepicker.css 拷贝到rails工程中相应的assets目录中,并在application.js 和 application.css文件中加载这两个文件 //= require bootstrap-datepicker-zh_CN

WPF中的日期控件Calendar和DatePicker

Calendar允许用户使用可视的日历显示来选择日期,DatePicker允许用户选择日期的控件。 Canlendar讲解 Canlendar常用属性 属性 SelectionMode选中日历类型DisplayDate展示的日期SelectedDate选着的日期DisplayDateStart展示的起始时间DisplayDateEnd展示的结束时间 Canlendar实例 <Ca

bootstrap-datepicker限定可选时间范围 一、应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,

bootstrap-datepicker限定可选时间范围 一、应用场景  实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,结束时间不能小于开始时间,此时就要为开始日期选择器和结束日期选择器动态的设置startDate和endDate的值。 二、相关知识点 1、boo

Element-plus DatePicker 日期选择器【正则校验时间范围】

效果图:          利用element-plus中的form表单验证完成效果。  <el-form-item label="检查计划截止日期:" prop="deadline"><el-date-pickerv-model="form.deadline"value-format="YYYY-MM-DD"style="width: 100%"type="date"placeh