日期去掉时间的函数
在系统中,我们经常会用到日期时间选择器,它同时包含了日历日期和时间的选择,一般是下拉列表的形式进行选择。本文作者分享了如何在Axure中用中继器制作真实日期时间效果的下拉列表的方法,一起来学习一下吧。
![](https://p0.ssl.img.360kuai.com/t0188be4a6ae1a39c5f.jpg)
在系统中,我们经常会用到日期时间选择器,它同时包含了日历日期的选择和时间的选择,一般是下拉列表的形式进行选择。
今天作者就教大家如何在Axure中用中继器制作真实日期时间效果的下拉列表。
一、效果展示
1、点击控件,可以弹出时间日期选择的下拉列表,在里面可以选择对应的日期和时间;
2、选择的日期是真实日期,即日期能一一对应真实的日期,哪一天是星期几都是真实对应的;
3、点击左箭头切换上月,右箭头切换到下月;双左箭头切换到上年,双右箭头切换至下一年;
4、可以点击年份或月份,快速选择置顶的年月;
5、选择后自动回显选择的日期和时间。
![](https://p0.ssl.img.360kuai.com/t01f415ebc371503bf5.gif)
二、制作分析
一般而言会有三种方式来制作:
第一种是写死,写死在动态面板里面写几个月的日期,然后通过动态面板切换制作出对应的效果,这种的缺点是复用性差,而且只能显示写好的几个月,如果要查几十年的数据,就要做几百页,相当浪费时间,所以我们不用这种方式。
第二种是通过js调用,js调用的好处的简单快捷,通过几行js代码就可以调用浏览器的日期时间下拉列表,但是缺点也很明显:第一,不同浏览器不同版本自带的时间日期下拉列表不一样,你看到的是这个效果,别人看到的就是另一个效果;第二,后续的交互不好做,我们做选择器,后续可能会对中继器表格进行筛选或者其他交互,如果是用js调用的话,对于不懂代码的小白就无法进行后续的交互。
第三种是通过中继器和日期时间函数,制作一个日期时间模板,这种方式虽然做起来比较困难,但是制作之后复用性很高,因为用原生元件制作,所以对后续添加对应交互比较友好,可以随心所欲的添加后续效果,所以我们会用第三种方式来制作。
三、制作教程
这个原型可以主要分成4个部分:
1. 提示框提示框包括提示文字,矩形,图标这几部分组成,大家可以根据自身需要设置样式,也可以增加移入变色,选中变色等效果来美化。
鼠标单击提示框的时候,我们用显示的交互,将隐藏的下拉组合显示出来即可。
2. 日期部分日期部分我们主要是用中继器、文本标签、箭头等内容制作。
![](https://p0.ssl.img.360kuai.com/t01a7432f2f3ff4e2d0.jpg)
中间的日期我们是用中继器来制作,里面增加圆形,去除边线,矩形设置选中样式为填充颜色为蓝色,文字颜色为白色。中继器里共两列,一列是自带的Column0,一列是xuanzhong列,默认都为空就可以了。默认我们增加42行空行。
![](https://p0.ssl.img.360kuai.com/t01c03bdf4f5e9b04ef.jpg)
下面我们简单说一下逻辑,我们主要用到下面几个函数:
- now函数:可以获取现在的详细的日期
- get.date:可以获取今天是几号
- addDays:可以加减日期天数
- get.day:获取今天是星期几
我们要找到某年某月的第一天是星期几,原理是先获取今天的日期和周几,然后在通过计算出选中日期和今天日期的差值,从而获取到指定日期是中继器里的第几格。
上面这是同一个月的情况下,如果不同月不同年的话,我们还要用add.month和add.year来计算。
我们做的时候还要分4种情况,分别是一个月有30天、31天、28天和29天这三种情况。
根据不同条件的月份要增加不同的天数。
![](https://p0.ssl.img.360kuai.com/t018535e854ef040702.jpg)
那点击做双左箭头其实就是把年份值-1,点击右箭头就是把年份值+1。
如果点击单左箭头就要分两种情况来分析了,一种是月份不等于1,那只要把记录月份的值减一就可以了,如果月份值等于1,相当于去到上年底了,所以月份值要变成12,年份值-1。
单右箭头也是同理,如果月份等于12,就去到下一年一月了,所以年费要加一,月份值变成1。
![](https://p0.ssl.img.360kuai.com/t01646b82708bda70b8.jpg)
关于年份和月份的下拉列表,点击后设置对应年月记录值为选择内容即可,因为月份是固定12个月的,所以用多个文字标签制作即可,年份比较多,建议用中继器来制作,年份太多的话还可以转为动态面板调出滚动条来处理。
那我们在鼠标单击中继器里日期的时候,就用把中继器内文字和圆设置为真,因为之前设置了选中样式所以会变白,然后用设置文本的交互,记录选中的日期,并且具体日期和时间回显到选择框。
![](https://p0.ssl.img.360kuai.com/t0160f085c4204f38b0.jpg)
这里要说一点的是,如果切换到其他年份或者月份的操作,我们要要通过更新行的交互,更新一下选中列的值,这样其他年份的同一天才不会选中变色。
3. 时间部分时间部分我们用两个中继器来制作。
小时的中继器填写00-23,分钟的中继器里填写00-59,转为动态面板,增加滚动条。
同样的里面的矩形要设置选中样式。
中继器内部我们增加一个true列用于记录那个值未选中,如果true的值等于1,我们就选中该行内容。
鼠标单击时,我们用先更新所有行把true列的值更新为0,相当于全部取消选中,然后在用更新行的交互,将当前行的值更新为1。最后我们用设置文本的交互,把年月日时分选中的记录值回显到选择框即可。
![](https://p0.ssl.img.360kuai.com/t01779dfcc95f291c3a.jpg)
这样我们就制作完成了日期时间下拉列表的原型模板了,下次使用时复制粘贴就能使用,需要增加后续交互也可以自行添加,是不是很方便呢?
那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。
本文由 @AI产品人 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自 Unsplash,基于 CC0 协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
","gnid":"9c42e3978927eeea0","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t0188be4a6ae1a39c5f.jpg","width":"900"},{"desc":"","height":"346","s_url":"https://p0.ssl.img.360kuai.com/t01f415ebc371503bf5_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t01f415ebc371503bf5.gif","width":"407"},{"desc":"","height":"245","title":"","url":"https://p0.ssl.img.360kuai.com/t01a7432f2f3ff4e2d0.jpg","width":"241"},{"desc":"","height":"201","title":"","url":"https://p0.ssl.img.360kuai.com/t01c03bdf4f5e9b04ef.jpg","width":"304"},{"desc":"","height":"431","title":"","url":"https://p0.ssl.img.360kuai.com/t018535e854ef040702.jpg","width":"774"},{"desc":"","height":"364","title":"","url":"https://p0.ssl.img.360kuai.com/t01646b82708bda70b8.jpg","width":"211"},{"desc":"","height":"166","title":"","url":"https://p0.ssl.img.360kuai.com/t0160f085c4204f38b0.jpg","width":"344"},{"desc":"","height":"191","title":"","url":"https://p0.ssl.img.360kuai.com/t01779dfcc95f291c3a.jpg","width":"342"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"hbase","pub_time":1681377720000,"pure":"","rawurl":"http://zm.news.so.com/023706040d2951af785ecb16f3df1785","redirect":0,"rptid":"01c6236448ec3c2d","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[],"title":"Axure高保真教程:日期时间下拉列表
唐玛汤3822excel表格日期减法函数 -
山仁兴19763346450 ______ 公式: =YEAR(D1)-YEAR(F1) & "-" & MONTH(D1)-MONTH(F1) & "-" & DAY(D1)-DAY(F1) 但是你要保证D1跟F1是日期格式 year(D1)是获取D1的年份 month(D1)是获取D1的月份 day(D1)是获取D1的日子
唐玛汤3822粘贴为数值时怎样把日期去掉 -
山仁兴19763346450 ______ 工具/原料 任意版本的excel和一台电脑 方法/步骤 带有时间点的日期数据去掉后面的时间点.这里主要介绍两种方法 第一种方法是采用text函数,具体写法见下图 第二种方法是采用数字进行中转,首先将日期数据变为数字. 因为带有时间点,...
唐玛汤3822Excel高手帮帮我,怎样将文档中日期如:“2012年09月29日”中批量去掉年、月、日. 谢谢 -
山仁兴19763346450 ______ 1. 替换,Ctrl +F,将年,月,日依次全部替换2. 如果不是手动输入的年月日而只是显示的话,直接把单元格格式日期选为你想要的显示形式
唐玛汤3822在同一单元格里, 怎么才能把 后面的时间去掉,只留下日期2010 - 9 - 11 14:05:38 -
山仁兴19763346450 ______ 选定此列,右键---设置单元格格式---数字----自定义---将yyyy/m/d h:mm后面的h:mm去掉,仅留下前面的yyyy/m/d确定!OK
唐玛汤3822如何去掉sql server里datetime类型里面的时间部分? -
山仁兴19763346450 ______ 1、点击“开始”——“Microsoft SQL Server 2005”——“Microsoft SQL Server Management Studio”.2、在打开的“连接到服务器”界面,输入服务器名称、数据库登录名和密码等信息.3、点击“连接”,连接到SQL SERVER数据库.4、使用Convert函数可以将字符串转换为日期类型,从而存储在日期时间类型的字段中.点击“新建查询”,新建一个SQL文本.5、在SQL文本中,输入SQL 语句,如图所示.点击“执行”,查看运行效果.6、将日期时间格式转换为字符串也是使用Convert函数,格式为Convert(字符串,日期值,格式类型).7、点击“执行”,查看运行效果.
唐玛汤3822电子表格日期相减的函数 -
山仁兴19763346450 ______ 因为你的这两个都不是EXCEL标准的日期格式,所以公式中要进行转换~~ A1 为 2009.7.13 B1 为 2008.6.6 C1 输入=DATEDIF(SUBSTITUTE(B1,".","-")*1,SUBSTITUTE(A1,".","-")*1,"D")
唐玛汤3822在EXCEL中怎样让两个时间相减? -
山仁兴19763346450 ______ 时间就是数字,数字也是时间,1天在Excel就是数字1,所以两个时间相减,整数部分就是日期,小时部分就是时间. 1、先把两列时间相减,就得到了两个日期相差的天数. 2、再把数值乘24,得到两个日期相差的小时数字. 3、再把数值乘60...
唐玛汤3822求EXCEL高手. 如何在计算日期天数时把周日减除掉. -
山仁兴19763346450 ______ 去除周六、周日的工作日:=NETWORKDAYS(A1,B1)只去掉周日:=DATEDIF(A1,B1,"d")-SUMPRODUCT(N(WEEKDAY(ROW(INDIRECT(A1&":"&B1)))=1))+1如果是2013以后版本只去掉周日:=NETWORKDAYS.INTL(A1,B1,11)
唐玛汤3822SQL 日期相减=天数 日期去掉星期天
山仁兴19763346450 ______ 使用2113 networkdays 这个函数 不用5261 datedif 函数……4102 就能解决你的1653问题了……自己查查回 networkdays 这个函答数吧 NETWORKDAYS(start_date,end_date,holidays)
唐玛汤3822在microsoft office excel2003中,有来的时间和去的时间,求之间的天数?如何设置?请详细说明.
山仁兴19763346450 ______ =datedif(开始日期,结束日期,"d") 此函数为EXCEL隐藏函数,在帮助中找不到此函数.最后的d代表天数,如果是y,则为年,m,则代表月