<
meta charset
=
"UTF-8"
>
<
!
--
import
CSS
--
>
<
link rel
=
"stylesheet"
href
=
"https://unpkg.com/element-ui/lib/theme-chalk/index.css"
>
<
style type
=
"text/css"
>
.
el
-
date
-
editor
.
el
-
input
,
.
el
-
date
-
editor
.
el
-
input__inner
{
width
:
360
px
;
<
/
style
>
<
/
head
>
<
div id
=
"app"
>
<
div
class
=
"block"
>
<
span
class
=
"demonstration"
>
周
<
/
span
>
<
el
-
date
-
picker @change
=
"changeOne"
v
-
model
=
"value1"
type
=
"week"
:
format
=
"startTimeStamp + ' 至 ' + endTimeStamp"
placeholder
=
"选择周"
>
<
/
el
-
date
-
picker
>
<
/
div
>
<
/
div
>
<
/
body
>
<
!
--
import
Vue before Element
--
>
<
script src
=
"https://unpkg.com/vue/dist/vue.js"
>
<
/
script
>
<
!
--
import
JavaScript
--
>
<
script src
=
"https://unpkg.com/element-ui/lib/index.js"
>
<
/
script
>
<
script
>
new
Vue
(
{
el
:
'#app'
,
data
(
)
{
return
{
value1
:
""
,
startTimeStamp
:
""
,
endTimeStamp
:
""
methods
:
{
changeOne
(
val
)
{
let
timeStamp
=
val
.
getTime
(
)
;
this
.
startTimeStamp
=
this
.
fun
(
timeStamp
-
24
*
60
*
60
*
1000
)
;
this
.
endTimeStamp
=
this
.
fun
(
timeStamp
+
(
24
*
60
*
60
*
1000
)
*
5
)
;
console
.
log
(
this
.
startTimeStamp
,
this
.
endTimeStamp
)
;
fun
(
unixtimestamp
)
{
var
unixtimestamp
=
new
Date
(
unixtimestamp
)
;
var
year
=
1900
+
unixtimestamp
.
getYear
(
)
;
var
month
=
"0"
+
(
unixtimestamp
.
getMonth
(
)
+
1
)
;
var
date
=
"0"
+
unixtimestamp
.
getDate
(
)
;
var
hour
=
"0"
+
unixtimestamp
.
getHours
(
)
;
var
minute
=
"0"
+
unixtimestamp
.
getMinutes
(
)
;
var
second
=
"0"
+
unixtimestamp
.
getSeconds
(
)
;
return
year
+
"-"
+
month
.
substring
(
month
.
length
-
2
,
month
.
length
)
+
"-"
+
date
.
substring
(
date
.
length
-
2
,
date
.
length
)
+
" "
+
hour
.
substring
(
hour
.
length
-
2
,
hour
.
length
)
+
":"
+
minute
.
substring
(
minute
.
length
-
2
,
minute
.
length
)
+
":"
+
second
.
substring
(
second
.
length
-
2
,
second
.
length
)
;
<
/
script
>
<
/
html
>
vue，
element
-ui，DatePicker
日期
选择
器，vue2
element
UI
日期
选择
器
选择
一
周
7天的数据格式怎么拿到，el-date-picker设置type等于
week
后怎么设置format属性，format和value-format怎么设置，范围
选择
器
周
，一
周
，
选择
一
周
7天时间，el-date-picker，
周
，type=
week
，
周
选择
器，面板显示
周
数，显示第n年第n
周
数据，详细示例代码教程，
element
ui官方文档，vue2
element
-UI
日期
时间
选择
器怎么设置
week
周
选
以下是实现的多种方法，可根据您的自身需要进行使用 //所在
周
的
第一天
日期
select dateadd(dd,datediff(dd,1900-01-01,getdate()) - datepart(dw,getdate()) + 1,1900-01-01) //所在
周
的
最后
一天
日期
select dateadd(dd,datediff(dd,1900-01-01,getdate
这个日历插件右上角的按钮上个月下个月事件，切换后默认是那月1号，传入这个时间就可以重新获得切换后的月份的时间范围，用v-model绑定切换后的数据。已知星期排版是固定的，
第一天
是星期天，
最后
一天
是星期六。通过当月1号和
最后
一天
再往前推算需要展示上个月几天，和下个月几天。需求是要传入当前显示的
第一天
和
最后
一天
来
获取
范围，再判断某个
日期
是否有内容标记。watch监听变动来做事件。
element
-ui中的el-date-picker
日期
选择
器,
周
选择
器
获取
当前
选中
周
，并显示当
日期
时间段
今天又做了一个小功能,是一个
日期
选择
器,并且是
周
,
element
-ui 官方给的 type=“
week
”,就可以变成
周
选择
器,但是显示的只是第几
周
,并没有时间段,看到大家的帖子很多都是利用input 况,透明放地下,造成视觉上的效果达成.
接下来给大家介绍一个小玩意,dayjs,利用它很好实现时间段.
废话不多说直接上代码图.
format 就是格式化我们所选的时间的作用,v-mode
