最近公司在做一个法律搜索的系统,系统设计到日期的地方,设计人员希望使用日期插件,对用户更友好一些,当然大家都知道如果使用插件,输入的日期的格式的灵活性会或多或少的下降,一般我们使用日期插件就只能输入**年**月**日。
这里我们选择的是WdatePicker,比较好用的一款日期插件,但是该功能添加完成以后,测试人员提出要不仅仅能够按照日期进行查询,还要直接按照月份,或者是按照年份查询,当然 这个通过选择某一年的第一天和最后一天也可以查询一年,但是这样对用户多少有些不友好了。
功能改进前:
下面是我对系统改进后的界面:
默认情况下,当文本框获得焦点时,还是以日期的形式出现,当点击按月或者按年的以后,文本框再次获得焦点的时候,此时弹出的日期 picker就是 按年或者按月的了。。
默认的按日期
点击按月单选按钮后,按月选择
点击 按年单选按钮后,按年选择。。
代码很简单:
// 界面加载完成后运行
$(document).ready(function(){
// 默认绑定按日期
$(".t").click(function(){
WdatePicker({dateFmt:'yyyyMMdd'})
});
// 当选择形式发生变化以后,重新绑定click事件,或者是focus事件
$(".tt").change(function() {
$(".t").unbind();
if($(this).val() == "yyyy") {
$(".t").click(function(){
WdatePicker({dateFmt:'yyyy'})
});
} else if($(this).val() == "yyyyMM") {
$(".t").click(function(){
WdatePicker({dateFmt:'yyyyMM'})
});
} else if($(this).val() == "yyyyMMdd") {
$(".t").click(function(){
WdatePicker({dateFmt:'yyyyMMdd'})
});
}
});
});
这个是日期时间 一起的。。
- 大小: 10.5 KB
- 大小: 7 KB
- 大小: 23 KB
- 大小: 18.4 KB
- 大小: 15.5 KB
- 大小: 22.3 KB
分享到:
相关推荐
picker-view时间选择器/年、月、日,闰年、天数、大月、小月 自定义picker-view年月日选择器 picker选择器picker-view选择器(案例)
使用uniapp制作微信小程序时候,需要一个城市选择框,但是微信中的弹框样式不可自定义,出现了与项目主题样式不一致问题,于是使用uniapp中picker-view封装底部选择弹框选择器,实现支持自定义确定和取消按钮颜色...
bootstrap-daterangepicker-master 时间段选择器
使用IndexedDB,因此与其他表情符号选择器相比,它消耗的得多 (最小41kB,约1.4.4kB压缩) 仅呈现本机表情符号,没有子画面 默认可访问 不需要框架和捆绑器,只需添加一个[removed]标记并使用它 目录: 用法 通过...
表情符号选择器React V3 ...Emoji-picker-react可以立即使用,需要零配置。 您唯一需要做的就是添加自己的表情符号点击回调。 import React , { useState } from 'react' ; import Picker from 'em
bootstrap-daterangepicker- 基于 Bootstrap 框架的日期范围选择控件
自定义小程序picker样式
Range-Time-Picker-Dialog Simple Android Library that provide you a custom dialog that allow you to set a start time and end time. Screenshot Install Add this to your project ...
react native的picker组件,它模拟ios和android的native'select'接口
ionic3使用cordova-plugin-ImagePicker 插件实现仿微信相册选图。因为直接add plugin 下载不下来。故直接github上下载然后打包上传以便日后使用
onedrive-picker-android, Android的OneDrive文件选取器SDK示例应用程序 Android的 OneDrive选择器 选择器是将 Android 应用 与OneDrive和OneDrive集成到业务中的最快方法。 它提供了一组 Java api,应用程序可以...
HSV 颜色选择面板 源码
微信小程序-自定义picker选择器wxminiprogram-picker-master.zip
用vue 编写一个日历组件用vue
$ yarn add react-native-country-picker-modal 基本用法 有关更完整的示例,请打开 import React , { useState } from 'react' import { View , Text , StyleSheet , PixelRatio , Switch } from 'react-native' ...
uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip
React Native Wheel Picker V2 一个简单的Android 轮选择器(对于IO 使用来自react-native 的Picker) 示例 您可以克隆repo 并从./example 文件夹运行示例安装 yarn add react-native-wheel-picker-android 自动安装...
使用和为Expo SDK(React Native)选择多个图像(视频等)包。 带有导航栏和压缩功能的 特征 选择多个图像 更改方向(垂直方向连续4个,水平方向连续7个) 显示所选的图像编号 权限请求 客制化 从新到旧排序 用法 ...
它在Android上使用React Native的Picker ,并在iOS上的Modal使用显示Picker Text 。 安装 npm i react-native-picker-modal --save // OR yarn add react-native-picker-modal 用法 它接收并传递与接收的相同的道具...
Android仿微信图片选择器Demo/具备剪裁/自定义图片加载器等功能