00:00
我准备这种,我准备我写个测试页面,这个测试页面我写个最简单的测试页面,就提供一个单号open本框,他一点出来一个日历,他选年月日,选上之后我自动给他填上就行了,我就来研究这个日历了,知道吧,好,下边我写个测试页面,那这个测试页面呢,我在我就就在CR项目里边写了啊,这个测试页面,那这个测试页面我准备写个JSP页面,那写这个JSP页面我写的话大概我这个地方来写一下吧,那写的话我写到哪呢?按理说咱们写外部iner所有的页面都放到这个,但是我们说了放到这里边页面必须经过CTRL是不是才能访问啊。那我以前这些业务页面我怕泄入数据,我我放到这里,我通过点多网了,那现在我就写个测试页面,压根就不让用户用,我就是测试都是看能不能会这个技术,我写到这里边,那我一会测试的时候,一会测试太麻烦了,所以我不准备写到这边了,写到哪对外部APP下写一个测试页面知道吧,然后这个页面我也不怕泄露数据是吧,在上面就显示个单号门框一点了出来一个日历就行了,把这个日历效果演示出来就行了,在这里边我将来写到外边不用通过control出了,从外界就可以直接访问了,所以我就准备在这里边写一个那吧,那写这个页面我就简单写了,这个地方我就写一个叫data time pick,然后呢,test.jsp,我就准备写这个测试页格啊,我就准备泄入它那这个地方来演示演示我们的日历插件不RI然呢data time啊data time然呢picker,然后呢,插件和要。
01:35
使用它了,将来一访问它就出来一个大航文本框来实现日力,那实际上的话,这是个JP网页,再看我说这个地方,那一会儿我要引入那些开发包,那引入开发包肯定要用到URL,用到URL我准备着啊,都从base斯标上去找,所以我这个地方加个base斯标签,所以那么加base斯标签的话,那我这种我就不我就不自己写了,我就随便拷了一个base斯标签,随便拷了一个base斯标签是吧,我就不一个一个写了啊,然后呢,这个地方拷贝过来,CTRLC拷贝,然后呢,放到这里边,因为我一会儿要用它这些UR,所以加上它就行了,好在这里边我准备来使用我这个插件了,使用插件我们说所有的前端插件三步走,第一步引入开发包,那我就准备引入boori叫boori,然后呢,这个是。
02:29
啊data time BOO,然后呢,这个地方来个叫data time啊time,然后呢,这个picker插角啊插件这知道吧,引入它,那引入它我先下载下来,从哪下载,官网上下载就行了,官网上下载,那官网上在哪啊对吧?来我们这个地方,然他是官网,现在找的时候不太好找了,可在官网那我们这官网。
03:10
然后呢,这个来个RI的data time。嗯,他那官网在哪儿啊。你看这都是,这都是有其他的程序员用的,你知道吧。这个不是这个,那官网上的。这个好像看着不像那种。哦,那官网以前在百度上面一搜什么前两个肯定有一个是他现在百度不知道咋回事了。搜不出来了,很难找了,这个。
04:02
这我就不找了哈,这看看这些。啊。这这都这不是这是别人用的。是吧,谷歌谷歌访访问不到谷歌他们。对百度它这个看看,那我我又不找了啊,不找了,反正总之你到了官网上你是吧,搜一下是吧,你能找到它,那官网从来下载就行了,我这个方也给大家下载好了,哪一个地方就咱们这个,呃,这样啊,在项目原型里边已经下载好了,在咱们这个页面里边的解里边,大家看data time pick看吗?就这个我已下载,你下载完了之后,从官网应该它是个点Z包一解压就它。它里边有什么GS看到吗?引入到你页面里边,然后呢,这个也有GS叫语言包,然后呢,这是GSS引到你页面里边就可以直接用了,那你说下边,下边是早期的版本,我给它加上了点bak了,这个我们说这个我们没用到早期的版本,你知道就行了,我们怎么用这个,下边我把它引进来就行了,那引进来怎么引入这个么?他用引吧,首先引引这个什么CSS怎么引这边有个什么。
05:29
对,有有一个这个是吗?这个是。叫star she是吗?告诉他我是样式表是吗?HF,然后呢,去找那个CSS是不是这样呢?那找那个CS,找那个C在哪呢?然后呢,解宽下边的叫什么,不就这个,他下边谁CSS是吧,他下边的呢。啊,他下边的接下来看看这地方看看这是下边,接下S叫布所在是吗?那引进了吧,不所好,这个地方就引进了,接下他引进了,下边引还GS能引吗?GS那什么script的引,然后呢,这个地方来个太,然后呢这个地方还有他,然后呢下边继续来,还有什么。
06:12
SRT对,引用JS,然后呢引睛了,然后呢这个地方来那JS来引睛了解query下边的谁呢不drive他master,然后呢,这个地方来个GS,然后呢引进来这个BOO drive引进来这俩用这个吧,啊好,一个是压缩的,一个是不压缩的,引用哪一个都行,知道吧,然后呢继续来这个,然后呢再引这个语言包,这个语言包也是GS,就这个语言包script来一个type,然后呢test啊然后呢这个地方来一个SC,然后呢这样下边的good,好,下边的语言包叫local下边的boori,这个引进来,然后呢大家看这样的话,它这些开发包就引进了,引进来之后我们就可以用了,知吧,但是这个用用这个大家注意一下吧,我们说这种插件是不RI那个框架下边的插件。
07:12
所以它的实现掉了步骤所在框架的一些代码,他们不能独立运行。如果只引入他们运行不了,还得引入谁,还得引入步骤所框架,因为他们是基于框架开发的,里边用了实现这个插件的时候,用了框架的一些代码。那步骤所框架出,当然就这个这步骤框架,所以你得把步骤所在框架的GS和CSS引进来,这样这个差异才能独立的运行。要不然话运行不了,所以来引入吧,那首先引入bootri框架的,Bootri框架这个这个引入boottrip,然后呢,框架框架的这些代码也得引进了。框架引进来,那引进来首先引入CSS啊,引入CSS这个地方来一个link,嗯,然后呢,这个地方来一个啊让它框架来一个if来star啊,然后呢,这个地方hif,然后呢这个是不drive好解块RY下边引用不drive good drive哪一个就这个,这是good框架的,然后呢再引入谁CS,再引入它的good drive的这个点进来行了,别引错了是吧,然后呢,再看下边引入good s框架的JS引进来type,然后呢它然后呢这个地方src,然后呢等于它,然后呢,我们这个地方来一个叫j query是j que下边的谁呢,不drive啊,不drive,然后呢,下边的呢JS,这不drive框架的叫步骤索S,然后呢这个东西好。
08:49
那我们说不得所然框架,这种框架都是前端的框架,他们开发这些框架的时候。现在基本上前端框架都使用解剖位。这些框架也不能独立运行,要想让框架独立的运行,必须引入解剖位,所以我们这个地方要引入,先引入解剖位,引的时候这些都是有顺序的。
09:10
先引被依赖的代码,所以先引解块RY,它引用解query,先引解块RY,它依赖于不得索框架,先引不得索尔框架,这些都有顺序,顺序打乱了都不能正当运行,所以烟先引入解query,那引解块RY,那这个地方我们来这来个引入解块RY,然后呢,这个是引入解分,解分这些框架,前端的这些框架基本上都是基于解分的,包括以后大家学一,那么可能会用到EE,那么EXST叫E叉T1的UI等等,这些都是基于解块位的,知道吗?所以呢,我们先引入解块的,然后呢这个,然后呢,这个地方src,然后拿这个东西解块,我们这个解块是谁呢?就是下边这个就是这个,这是我们的解块引入,这样的话再看第一步引入开发包就引好了,引入完了之后,它里边代码你就能用了,知道吗。
10:07
你以后用别的插件也都是一样的,也都是这么了,它依赖于谁,先引别的,然后再隐藏好,这是我们第一步,我们就开发网络。下边第二步提供容器,那我们这个日历的容器就是一个单行欧面框,那我这个地方就来了,好,然后呢,单行欧面框来一个开,然后呢,这个地方一会儿大家看我要对这个容器调用工具函数,我要选中这个容器,如果选中就拿到解块对象,如果拿解块对象通过选择器选,所以为了选啥,好好选这个地方来起一个ID,一会儿我要用这个ID,我这个ID随便起,我就叫麦。这样的话,大纲第二步创建容器也创建好了,下边第三步,当容器加载完成之后,对容器调用共性函数,好,那那我们在这掉了,那掉不大看掉的话,当容器加载完再看,要确保当容器加载完再调,在哪调,对按理说在这掉在它下面,因为我们说GS这种GSP这种这种代码它执行从上往下执行,他家在网上在调,按理说在这里边掉,在这里边调工具函数,工具函数肯定是GS的嘛,因为前端的函数嘛,肯定是S的嘛,那GS代码调肯定在GS标签里边调,按理说在这里边掉。
11:32
在这边调就行,在这边调函数就行,但是调函数大家这个时候就有问题了,有啥问题,其实从语法上来讲可以,但是我们说这是GS代码,这是什么?At代码,现在我们这个标签这个页面比较简单,直接调这么调可以。那我们什么将来呢?我们一个页面可能有几十行,就是别说几张几百几百行,甚至上千行GS代码和am代代码混在一起了,所以说大哥这种代码就很难维护了,所以我们调的时候呢,不准备在这里边调,但是在这里边调肯定可以知道,那我们准备在哪调在这里边钓在这。
12:14
在这里边写一个JS代码来调,然后呢来调,然后呢在这把它调啊,那我能不能在这里边直接调。直接掉可不可以?不可以,为啥不可以?大家要跟着我的思路走是吧?这都是大家以前学过的语法,这为啥不可以?嗯。因为你想啊,对,你要在这里边掉,它的执行呢,是从上往下执行。它执行的时候,调函数的时候,这个这个代码这个标签加载完了吗?对没加载完,从上往下加载吗?没加没加载完,容器没加载完,它万一生成结果放到哪不知道了,那那你说你还在这儿掉了,那我在这里边掉了,又要确保容器加载完,在这边掉什么时候掉。
13:02
对入口函数这个表,为什么入口函数可以对它是最后执行,当整个页面加载完才执行这个函数,整个页面都加载完了,这个容器是不是一定也加载完了,所以我给你在这当容器加载完成。对,容器调用工函数,容器调用工具函数这样就行了,那如何调,他文档上一定给你说了,那他这个文档官方文档,我这我这搜不出来了,他说你看下,你可以自己搜一下,我们这开堂就太耽误时间了,我就不准备给大家搜了。对,这个叫啥来着。哪一个这个是吧,以前百度很容易就搜出来了,哪一个地方这个这个这个。
14:17
啊就这个啊就这个啊,以前很容易就搜了,现在是吧,现在不知道怎么回事了,嗯,他这也你依赖于人家,这是他下载,你点了就下载下来了,然后我就不下载了,然后我就看它是么?看完之后掉,但你点这个地方也下载了知然后呢,大家看这它就做出效果,然后别的不看了,我就掉函数调什么函数,下边就告诉你了,要边有个函数,哪个地方呢,看看那啥这文文档告诉你看完就这个函数调它就行了。知道吗?这些都有例子,看到吗?如何调拿到那个容器的解块对象,直接掉就行了。那往那掉吧,那我这对调一下子哈,那掉的话,拿到那个容器的结块对象选择器,ID选择器,调函数们就调啊哪一个函数叫什data塔time pick就这个函数,然后呢,直接调就行了,调的时候我们说在这里传参数,它需要你给他传一些参数,那你说为什么传参数,那你想他这个容器它给你显示日历,它给你显示什么样的日历。
15:23
能不能随便显示,不能,你想让他给你显示什么样,他给你显示什么样的,那你说我想显示什么样子,他给你显示什么样的,我怎么告诉他,通过参数告诉他,他如果不给你提供参数。那他只能按照他自己的默认格式给你显显示了,那我万一我需要的不是这样子的,那就完了是吧,所以在这边进参数,那这个参数什么样子的,它这个参数是这样,是一个对象,大括表示GS的对象,在这个对象里边有一系列属性名,属性值,一个属性就是一个参数,参数名,参数值在这里边显示显示就行了,通过这些参数来控制这个日历的显示效果。
16:04
那他这些参数,你说老师我怎么知道有哪些参数,文档上有啊哪些,当然你看这些参数上面这些参数叫option,这是参数,你看这是参数,看吧,选项就是参数的意思,这参数这是一个一个参数,你看吧。你给他选就行了,那有哪些参数大哥,这些参数你不用全研究,有的时候他有些特效你用不到,你可以不研究,我们准备研究这几个参数啊,首先大概有一个这个参数,哪一个参数呢?这一个这一个参数,这个参数你猜猜什么意思,对语言是吧,呃,语言因为他这种插件都是外国人做的,一般都是面向全球的,他这语言什么意思啊,我们说这种日历,我们说日期,它显示日期或时间的,日期和时间,不同的国家语言的这种日期和时间格式不一样,那么将来你想让他给你显示按什么国家的语,这种日历或者这种日期习惯给你显示,你告诉他按什么国家的就行了,对,你要如果不显示,你要如果不设置,默认它是en。
17:06
En表示什么,按英语的时间给你显示是吧?啊,那我们是按照简体中文的,应该是什么写我们中国人的这种什么简体中文的在国际上的代码,他应该按简体中文的语言格式给你显示了简体中文在国际上的语言,这个代码是什么?对,叫什么Z,叫什么CN,这是简体中文,这是设置语言的语言的。这是我们这,当然你要是日本人可能小种,但都没有人日本日本的是吧,你要是别的是吧,你就写别的是吧,每一个国家这种语言都有编码了是吧?诶这是我们这还有这一个这个参数我就直接写了,还有哪个仓数呢?还有这个参数,这个参数form ma,这你猜就能猜出来是吧,什么意思,对格式,我们说日期和时间都有格式的,那么将来用户选上年月日十分秒之后,他选完了之后,你要根据他选的结果起来显示什么,拼一个字符串显示到容器里边,那这个显示的容器里边这个格式他给你拼成一个结果给你显示,那个结果是按什么格式给你显示。
18:20
这个东西要指定格式,当然参数和参数之间用逗号隔开,知道吧,逗号隔开知吧,然后呢,这个格式你可以写,就像我们在Java里边那个语言格式一样,那时候格式怎么写,它跟Java里边一样,它用几个字符,用几个字符来代替年月日是每秒,你知道吧。这是我们知道的啊,当然它这个格式跟Java里边稍微不太一样,Java里边这个是大写的,包括H也是大写的,它这个不是。啊,到底每一个字符含义是什么,大家你可以自己读一读是吧?啊那我这个读不了是吗?有有翻译软件是吧,到时你可以自己读,英语好的你可以自己看,但课堂我就不给他读了,我们这个地方按年月日,只有年月日日期嘛,只有年月日,我就直接写这个格式,这给我举例例子,直接写这个格式,这是什么,选完之后那个什么,这个日期的格式,日期的格式,嗯,这一个什么,这是么?这好,这是这样的,下边再看,还有还有什么呢?还有一些,还有一些参数,还有哪个参数呢?看看还有。
19:25
别的别的这个参数大家看一下,可以自己读一读啊,我就不给大家看了,哪个地方还有这个M6这个参数,这个参数再看它什么意思,他说日期时间选择器所能提供的最精确的时间选择器视图。他这个什么意思啊,大概是这样子,他说你将来这个日历的吧,你说一点它,它会弹一个日历,这个日历可你可以选你一点年,然后下边所有月份都出来了,一点月份,所有日期都出来了,一点日期,所有小时出来,一点小时,所有分钟,一点分钟所有秒述出来了,他说这个地方它用来让你设置最小可以选到哪一个单位的。
20:08
你要如果写年的话,你这个地方这个参数值如果写年的话,你对你只能选到,那么对你这个地方就是按理说是吧,这个地方对吧,你要写年的话,你点这个年,他只能选择月份,这个年下边月份只能选一选完月份整个他就认为你选完了,就给你显示一个,按照你选择的这种结果给你显示了,你要说我想选择日期,你这个值给它设置成月份,月份就说你点那个月份这个什么月份,下边这个所有的日期都出来了。所以这你要说我想着小时,你这个地方就要写天,然后你要是想到分钟,你写小时,你要想到秒,你选分钟知道吗?所以这个地方就是最小能选到哪什么地方,然后所以这时候我们说这个命六,那我们这个地方肯定只能选到哪啊对月份是吧,叫month月份啊,你要是什么,你别的你可以写day啊,写小时hour是吧?这些啊这些当我别的我就不多说了啊,这时候这然后呢,这是最小视图,嗯,这样好,这个地方可以选择的,可以选择的最小视图,选择的最小视图那。
21:25
好,这是这样的。除了这几个之外的啊,还有一个什么,还有这个。还有一个参数,哪一个呢,这个参数。还有一个自动关闭,什么叫auto?Auto这个这个这个这个这个说当用户选择年月日之后,选择完之后自动的会把日历关了,默认不会给你关,默认不会关,就是他选完了之后,默认那个日历还会给你显示,但是我们一般来讲选完了之后日历也关了。
22:03
它默认是false,它表示设置选择完啊日期或者时间之后,是否自动关闭,自动关闭日历啊,默认是false,就默认是false。False是不关闭是吧,那我们要想关闭阵容出就行是吧,啊当然这个参数大家什么看文档就能看到是吧,还有大哥,除了这个参数之外,还有一个参数哪一个,还有这个参数哪一个这个。刚才看到这个参数哪一个呢,这个。对叫这个initial data,它这个类型是个是个什么data类型的数据,它是表示什么?对初始化刚日历刚一打开的时候,一个初始化选择一个日期。
23:01
初始化显示的日期就刚一打开,默认选中档,默认选中哪个时间,当然咱们一般习惯了都是什么对当前时间,这样就行,好,这时候我们说到这几个参数,其实大概有这几个参数就够了,这我们日日日历就可以出来了,到我们下边来启动服务,你可以测一测啊好。然后一会访问这个页面。然后呢,口碑。然后呢,这个地方来看,我就直接访问这个页面了,因为它没有放到外部in里边,我就从项目的名字下边直接访问了看吧,这。啊,这个地方有有问题啊。这个地方默认应该默认应该是不应该显示,不应该直接显示出来,诶这个地方哪个地方写的有问题了。
24:05
啊,没有单击,按理说一开始不显示的是,诶哪个地方有问题呢。这个上来二零设置什么时间。不用打,不用你一调这工具函数,它自自动加上单击时间了啊,哎,这个容器已经告诉他了,自动加上单击时间了。哪个地方了啊,这次诶这是这个。别奇了,挂了啊。在哪个地方呢?这这这写半天白写了,不是不是默认显示的啊,这个地方哪个地方写错了。你说他得得。奇了怪了啊,哎,逮,逮到他吗?
25:10
没有问题是吧,这个东来看看这个不用这个了,不用压缩版的了,不用这不用那个版了,用压缩版了。哪个地方啊?秋。这地方我写一个东西啊啊,这个太写一下都给它写上不省啊。不省了,我说这他我给他省了T的CS这这些都不省啊,启动看一看。不应该啊,Style sheet tess。这一个就是告诉浏览器,我这里边写的是CSS,知道吗?是这里边这个引入这个文件里边写的是CSS些源程序,知这样浏览器会按照CS的原程序解析,知吗?这个地方,那我们这个地方来访问一下,看这地方访问一下切过来了,刷一下啊刷一下还是不行。
26:22
奇了怪了。看啦,亲一下。有隐,隐有隐。这个隐私。Shift control shift delete找呀。开,再全清一下吧。然后呢,这个地方来一个重新刷一下。妈,小孩不行。洗了挂了啊。
27:02
哦,是不是就是默人选就是那个对话。不是他默认不弹出来是吧,哎,哪哪个地方写错了啊。逮到他,这都没错是吧?他涛解宽看一看,F12看一看有没有报错。没有。这图片有没有问题?图片没问题,这个。啊。再复制一个,再复制一个。不行啊,你在别的班都好好的写过很多遍了,这是奇了怪了啊。
28:06
嘿,这。能好好打。那地方啊,这。最烦的就是这种是吧,代码没问题是吧,这结果出不来啊,Style。Test CSS,这是没问题啊。Language z cn。CS拉。Stylehe。哎呀,这个地方,这个地方已经错了。这个东西引错了,嗯,不是不是他看哪个地方引下边这个,下边这个步骤所在框架是他是那一个是吧,那一个只是他引用的一个什么子子文件隐错,这隐错。
29:02
部落所框架的主的那个CSS文件是这个,这是耽误时间了。有点费劲,好这个地方来刷一下它啊,看这就出来了啊,你现因为因为它依赖于C你框架吧,框架没引进了,它就不能独立运行,知道吧,然后一点它来看就出来了,知吗?我选你看啊选年份2025年这个六月份十号你看我。嗯,再一选,当然你该选了,默认选择当前时间。这是我们这个啊,但是这样选的话,有的时候什么有的做的好的这个地方还有一个什么。还有一个当天的一个按钮,嗯,当然还有这些这些这个地方还有我们下次再说吧,嗯,说我还有一些参数,但你可以试一试那些参数什么含义,我们今天不说了,我还有这还有一些参数。
30:01
好,当然,其实有这几个参数就足够你用了。所以下边呢,我们的课堂课下,大家把我们这个日历插件放到我们这个CRM项目创建市场活动那里边就行了。三步走就行了,会不会对会对自己加上就行了,好,我们这个地方就说到这儿吧,好,今天到这吧,咱下课。
我来说两句