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组件设置默认日期并限制可选日期范围

前言         在前端 element-ui 组件库中有一款组件叫做 DatePicker,是一个灵活选择日期的封装组件,它既能选择单个日期,也能选择一个日期范围(两个日期的组合),后者的应用场景主要有以下两类:1、作为一个搜索条件来查询特定日期范围内的数据;2、作为一个表单用来输入一份协议等文件的生效日期和结束日期并提交到后台。        经验告诉我们,业务同事也好产品经理也罢基本

DatePicker获取时间时,如何转换时区的问题

实现日期选取器: 想在每次加载软件的时间都能将选取器加载到当前的日期和时间,需要在viewDidLoad中创建一个新的NSDate对象,通过这种方式创建这个对象包含当前的时间和时间。然后将datePicker设置为该日期,这样就可以确保每次从nib中加载此视图时,选取器都会重置为当前得日期和时间.. -(void)viewDidLoad{NSDate *now = [[NSDate al

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