h5 datePicker日期选择与时间选择组件,适配ios

最新推荐文章于 2024-04-30 17:18:50 发布
最新推荐文章于 2024-04-30 17:18:50 发布
阅读量3.6k 收藏 2
点赞数 1
分类专栏： app 文章标签： iosSelect datePicker app  ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianyel/article/details/101354783
版权

原项目用的Weui 的时间选择组件在ios上不好使，之前也有用iosSelect.js写过datePicker的插件也有些问题，重新整理了代码，完善了一下。

 效果如下图：

 

html页面代码,需要引入：

    <link rel="stylesheet" type="text/css" href="iosSelect/iosSelect.css" />

    <script src="js/jquery-2.1.4.js"></script>
    <script src="iosSelect/iosSelect.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/Utils.js" type="text/javascript" charset="utf-8"></script>

 

<!DOCTYPE html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	<style>
		html,
		body {
			height: 100%;
		}
		
		body {
			background-color: #f8f9fa;
			color: #000;
			font-family: "Microsoft YaHei";
		}
		
		.bg {}
		
		.item {
			// padding: 30px 30px 50px;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="iosSelect/iosSelect.css" />

</head>

<body>

	<ul  style="margin-top: 2em;">

		<li>
			时间选择：
			<div class="leftItem" style="overflow-x: auto; display: inline-block;line-height: 50px;height: 60px;">
				<input class="weui-input minput" id="dateTime" style="width: 300px;font-size: 15px;float: left;
			text-align: center;height: 50px;line-height: 50px;" type="text" value="" readonly="true" />
			</div>

		</li>

		<li>

			日期选择：
			<div class="leftItem" style="overflow-x: auto; display: inline-block;line-height: 50px;height: 60px;">
				<input class="weui-input minput" id="date" style="width: 300px;font-size: 15px;float: left;
			text-align: center;height: 50px;line-height: 50px;" type="text" value="" readonly="true" />
			</div>

		</li>
	</ul>

	<script src="js/jquery-2.1.4.js"></script>
	<script src="iosSelect/iosSelect.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/Utils.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		var util = new Utils();
		var dateTimeStr;
		var dateStr;
		var curentDate;

		window.onload = function() {
			// $("#itempop").popup();
			dateTimeStr = util.getNowFormatDateTime();
			curentDate = util.getNowFormatDate();
最低0.47元/天 解锁文章
qianyel
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5 时间选择器 datepicker
02-16
H5 时间选择器 datepicker
H5移动端选择器，layPicker移动端日期选择器，jquery移动端自定义选择器
weixin_43992507的博客
09-11 2419
H5移动端选择器，layPicker移动端日期选择器，jquery移动端自定义选择器
H5 中时间预约筛选 利用Vant 组件中picker
最新发布
m0_73035846的博客
04-30 171
今天要做一个上门洗衣预约时间的流程，就是用户在今天的日期可以进行选择某一刻时间段，但是如果说是现在上午10：30分 ，那么就不可以选10：30分之前的时间段和当前的时间段，都不可以进行选择，但是在当天看其他的日期，是可以选择任意时间段的，听着感觉简单，但是操作下来 还是听麻烦的，废话不多说，直接代码展示，大家可以赋值直接用的。
Vue.js 手机端H5，时间选择器实现：年月日时分秒、年月日时分、年月日时、年月日、年月、年、月、日、时、分、秒，时分秒、时分多种类型
bueryao527的博客
04-14 8310
目录 一、效果查看 二、目录 三、index.vue <template> <div> <date-picker keys="0" :time="0" height="40" width="45" bgColor="#eeeeee" placeholder="年月日 时分秒" title="年月日 时分秒" :defaultTime.sync="defaultTime1" pos
HTML5时间控件
huangmingcsdn的博客
11-26 2351
日期控件 - date <input type="date" value="2015-09-24"/> 时间控件 - time <input type="time" value="13:59"/> <input type="time" value="13:59:59"/> 日期时间控件 - datetime-local 日期控件12小时制,可点击下午或上午后输入a或p修改 <input type="datetime-local" value="2015-09
h5使用iosselect.js实现日期选择器datepicker
肖波的博客
01-01 9644
之前有在weui datepicker在pc端无法正常使用，使用iOSSelect代替这篇文章中提到用iOSselect.js实现datepicker，但是没有上传例子，今天在这里上传一个实例给大家看看，如果有需要的可以直接用。 先看一下实例：datePicker. 源码下载：datePicker源码 效果图如下: 然后看看代码 html: <!DOCTYPE html&g......
Android中TimePicker与DatePicker时间日期选择组件的使用实例
09-02
在Android开发中，TimePicker和DatePicker是两个常用的UI组件，用于让用户选择时间和日期。它们提供了类似于iOS系统中设置闹钟时的时间调整界面，方便用户进行交互。本文将详细介绍如何在Android应用中使用这两个...
DatePicker for UnityUI Unity日期选择DatePicker工具
10-13
其中，DatePicker就是一种用于选择日期的组件，它允许用户在界面上方便地选取特定日期。在本文中，我们将深入探讨UnityUI的DatePicker工具，以及如何在项目中有效利用它。 首先，我们需要理解UnityUI的核心概念。...
React Native日期时间选择组件的示例代码
08-27
总的来说，`react-native-datepicker`为React Native开发者提供了一个方便易用的日期时间选择组件，它具有丰富的可配置性，可以帮助我们快速构建出美观且功能完善的日期时间选择功能。通过深入理解和实践，我们可以...
react-native DatePicker日期选择组件的实现代码
08-29
在React Native中，`DatePicker`组件是用于用户选择日期或时间的交互元素。这篇教程主要讲解了如何使用`react-native-datepicker`这个第三方组件来创建一个自定义的日期选择器，以实现更丰富的功能，如淡入淡出效果...
自定义html5中日期选取器的样式
@素素~的博客
12-28 2951
自定义html5中日期选取器的样式
h5日期选择控件_日期时间的选择 - 前台架构
weixin_39523280的博客
11-29 1376
日期或者时间作为较长使用的输入方式，通常需要利用功能控件来支持较为友好的处理方式。由于日期、时间对格式的要求，不能通过使用者随意的输入来完成内容的填充，一种较好的统一处理，前台架构需要提供统一处理的方法来支持实现过程对于不同场景的需要以及格式等问题的一致性。日期/时间控件日期/时间控件，通过普通的输入框完成加载过程，不需要特殊的支持。加载之后的输入框将不可以通过编辑修改日期内容，只能够通过控件的操...
时间控件（选择时间范围的插件）
snow_love_xia的博客
09-17 2万+
后台开发，一般都是有筛选条件的查询，那么问题就来了，根据日期范围搜索的情况下，插件要怎么选？？？？Laydate时间控件 这个是最开始，我采用的是两个时间插件，其他也没啥，就是运营部门使用起来可能感觉太麻烦，为啥不能一次让我选了，还有说老是忘记选择结束时间，然后就有了我接下来的工作。。。 在此，给大家推荐一款很好使用的日期与时间组件...
HTML5新控件 - 日期和时间选择输入
热门推荐
u014063717的博客
03-17 23万+
HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历，供用户选择。 注意：目前只有Chrome和Opera提供下拉式日历支持，其它浏览器仍是一个普通文本框。1，日期控件 - date<input type="date" value="2015-09-24"/>2，时间控件 - time<input type="time" value="13:59"/> <inpu
TP5.1框架下给H5中日期时间选择器datetime-local设置默认值
Sol的博客
08-02 3434
在H5中我们可以通过将input标签的type属性设置为“datetime-local”的方式来获取一个可以精确到小时分钟的简易日期时间选择器，但是实际需求中往往需要设置一个默认值，比如将选择器设置为当前时间或者在编辑界面中设置数据库中已有的时间戳数据，此时如果直接通过TP5.1模板变量的时间戳转换赋值value则无法将时间设为选择器的默认值。 以下是将获取到的时间戳转换格式后直接赋值给选择器后的...
实现H5时间选择器点击输入框和图标均可弹出日期选择
m0_46627730的博客
09-10 7321
前言 最近写一个 chrome 插件，里面需要用到日期选择器，为了图轻便，便直接用了 H5的<input type="date"> ，但这个有个问题，只能通过点击右侧那个图标才可以弹出日期选择框，这使用起来就非常不爽了。 网上找了很久都没找到一个有点用处的博客，最后只能自己一点点去尝试，如今问题解决了，就像记录下来给各位看看，希望能帮到大家～～～ 解决点击输入框不弹出日期选择 思路：首先我们知道点击图标是可以弹出的，那么我们就可以将图标进行绝对定位并覆盖掉输入框，这不就可以变象实现了点击输入框
几款实用的前端日历时间日期选择控件
lianzhang861的博客
06-07 15万+
1.Bootstrap的datetimepicker具体用法：https://blog.csdn.net/lianzhang861/article/details/804197752.layui-laydate具体用法：https://blog.csdn.net/lianzhang861/article/details/804228793.My97DatePicker-WdatePicker具体用...
HTML5前端如何实现日期选择（日历）
qq_41905051的博客
12-12 5382
HTML5前端如何实现日期选择（日历）
react实现antd组件DatePicker日期选择框清空
06-08
antd的DatePicker组件也可以通过类似的方式实现清空功能。antd的DatePicker组件提供了一个allowClear属性，设置为true时就可以显示清空按钮。在清空按钮的点击事件中，可以将DatePicker组件的值设置为null或默认值。 示例代码： ``` import React, { useState } from 'react'; import { DatePicker } from 'antd'; function App() { const [date, setDate] = useState(null); const handleClear = () => { setDate(null); }; return ( <> <DatePicker value={date} onChange={value => setDate(value)} allowClear /> <button onClick={handleClear}>清空</button> </> ); } export default App; ``` 在这个示例中，另一个需要注意的点是，antd的DatePicker组件的值是一个Moment.js对象，而不是一个Date对象。因此，在onChange事件中获取到的value是一个Moment.js对象。如果需要将其转换为Date对象，可以使用toDate方法，例如：value.toDate()。 另外，antd的DatePicker组件还提供了一个ref属性，可以通过获取到这个ref来调用DatePicker组件的方法，包括clear方法。使用方式与React中的示例类似。 示例代码： ``` import React, { useRef } from 'react'; import { DatePicker } from 'antd'; function App() { const datePickerRef = useRef(null); const handleClear = () => { datePickerRef.current.clear(); }; return ( <> <DatePicker ref={datePickerRef} allowClear /> <button onClick={handleClear}>清空</button> </> ); } export default App; ``` 以上是在React中使用antd的DatePicker组件实现清空功能的方法，可以根据实际需要选择适合自己的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值