My97DatePicker，年份加周显示 YYYY-WW

直接上代码

<input id="endDate" readOnly="ture" type="text" placeholder="请选择结束时间" id="GtimeField_end" class="Wdate TimeFiled conMargin"
style="height:28px;width: 200px; background-color: white; border-radius: 5px !important;"
onclick="WdatePicker({vel:'endDate',opposite:'true',disabledDays:[1,2,3,4,6],el:'endDateReal',firstDayOfWeek:5,isShowWeek:true,realDateFmt:'yyyy 第W周',dateFmt : 'yyyy-MM-dd '})" />
<input id="endDateReal" style="display:none">

控件的样式是用的bootstrap风格的，这个可以不用管。

今天收到需求要选择时间控件年份加周，并要求周的起始日为本周星期五，结束日为下周星期四，显示格式为：2019第12周

本身想用boostrap风格的 datepicker，后来看了官网api没找到该控件是否支持显示 W 周的，

最后还是用了My97DatePicker

查了api 最后用到的关键配置

Element 或 String

null

指定一个控件或控件的ID,必须具有value或innerHTML属性(如input,textarea,span,div,p等标签都可以),用户存储日期显示值(也就是dateFmt格式化后的值)

vel

Element 或 String

null

指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值)

dateFmt

string

'yyyy-MM-dd'

日期显示格式
你可以参考自定义格式

realDateFmt

string

'yyyy-MM-dd'

计算机可识别的,真正的日期格式

firstDayOfWeek

int

周的第一天 0表示星期日 1表示星期一

isShowWeek

bool

false

是否显示周

disabledDays

Array

null

可以使用此功能禁用周日至周六所对应的日期
0至6 分别代表周日至周六

最后生成的wdate

//由于My97DatePicker 的时间选择界面是根据配置dateFmt 来显示，
//如果只配置yyyy则界面上只会显示年份,所以考虑将控件的值绑定到一个隐藏的input里，
//这里必须将el绑定到隐藏控件里，不让My97DatePicker会默认将el值初始化成当前控件
{
vel:'endDate',//绑定控件 用于现在真实的值也就是最终我先要的值（2019第19周），对应realDateFmt
el:'endDateReal',//绑定控件，用于显示控件的值，该控件隐藏
firstDayOfWeek:5,//起始日，（0对应周日，1对应周一以此类推,配置后则把周五定为周日 5-》0,）
disabledDays:[1,2,3,4,5,6],//（该值就是以周为基础，即一周的七天，不和firstDayOfWeek影响。）
//这里有点难描述，就是firstDayOfWeek和disabledDays是独立的，当firstDayOfWeek配置成5，
//disabledDays如果要只能选一周的第一天，不需要配成[0,1,2,3,4,6],只要配置[1,2,3,4,5,6]就行
isShowWeek:true,//是否显示周，在时间界面左侧显示周数
realDateFmt:'yyyy 第W周',//真实日期格式
dateFmt : 'yyyy-MM-dd'//控件日期格式
}

My97DatePicker，年份加周显示 YYYY-WW相关推荐

SQL Server 使用DATEADD()函数实现秒、分钟、小时、日、周、月份、季度、年份加减
1 使用详解 DATEADD() 说明:在日期中添加或减去指定的时间间隔. 语法: DATEADD(datepart,number,date) 参数: (1)date 参数是合法的日期表达式,类型可以 ...
根据年份获取周次，根据周次获取日期范围，获取当前年份，周次列表信息。
在原文的基础上改的,适应我这边的需求,从周一开始到周日(姑且算个原创哈,原文链接在最下边). (1)根据年份获取周次 (2) 获取当前年份周次 (3) 根据选择周次获取日期时间范围谁有更简单的方法也 ...
three.js 加载显示文字
three.js 加载显示文字代码放到 ./three.js/examples/ 下 <!DOCTYPE html> <html lang="en">&l ...
Android 四大组件之——Acitivity(四) Activity是如何加载显示内容的？
1. 在Activity调用onCreate()等生命周期之前,Activity会调用attach()方法,而在attach()方法中会调用如下代码 onAttach() {PolicyManager ...
thinkphp+ajax无刷新分页并加载显示图片
2019独角兽企业重金招聘Python工程师标准>>> 最近自己用thinkphp和bootstrap做一个小站点,在用到ajax与后台数据库交互实现无刷新分页时,因为我需要返回的数 ...
Ionic+Angular+Express实现前后端交互使用HttpClient发送get请求数据并加载显示(附代码下载)
场景 Ionic介绍以及搭建环境.新建和运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166 在上面搭建起 ...
opengl加载显示3D模型UC类型文件
opengl加载显示3D模型UC类型文件前置条件注意事项项目展示项目完整C++源代码前置条件 opengl三方库freeglut,显示uc格式的三维模型文件, 注意事项源代码 model_ ...
opengl加载显示3D模型3d类型文件
opengl加载显示3d模型UC类型文件前置条件注意事项项目展示项目完整C++源代码前置条件 opengl三方库freeglut,显示3d格式的三维模型文件, 注意事项源代码 model_ ...
opengl加载显示3DS模型3DS类型文件
opengl加载显示3DS模型UC类型文件前置条件注意事项项目展示项目完整C++源代码前置条件 opengl三方库freeglut,显示3DS格式的三维模型文件注意事项源代码 model ...

My97DatePicker，年份加周显示 YYYY-WW

My97DatePicker，年份加周显示 YYYY-WW相关推荐

最新文章

热门文章