Bootstrap的Datepicker插件的使用

最新推荐文章于 2024-09-13 22:06:59 发布

Small_Pang

最新推荐文章于 2024-09-13 22:06:59 发布

阅读量309

点赞数 1

分类专栏： JS 文章标签： js datepicker

本文链接：https://blog.csdn.net/small_pang/article/details/103661750

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

记录一下自己在实际项目中使用Datepicker插件方法

给出Datepicker官方文档地址，想知道更多参数信息，可以查看官方文档

这只是一个日期选择框，如果还需要时间信息的话；

使用DateTimePicker插件就可以了。

先上效果图：

在这里插入图片描述

下面只展示主要部分的代码：

html部分：

<div class="form-group" id="datepicker" >
	<label for="recipient-addUserBirthday" class="col-form-label">生日:</label>
    <div class='input-group date' >
    	<input type='text' class="form-control" id="recipient-addUserBirthday" v-model="addUserBirthday" placeholder="请选择出生年月日" readonly="true"/>
        <span class="input-group-addon">
        	<span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

js部分：

var today = new Date();
var year = today.getFullYear();
var minYear = year - 100;
var month = today.getMonth() + 1;
var day = today.getDate();
var todayStr = year + "-" + month+  "-" + day;
var start = minYear + "-" + month+  "-" + day;

使用了mounted（）勾子：

test() {
    $('#datepicker .input-group.date').datepicker({
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        todayHighlight: true,
        startDate: start,
        endDate: todayStr,
        autoclose: true,
    });
}

指定勾子：

mounted() {
    this.test();
},

添加按钮add触发下面的js：

var addDatepicker = $('#datepicker .input-group.date').datepicker('getDate');
var addDate = addDatepicker.getFullYear() + "-" + addDatepicker.getMonth() + "-" + addDatepicker.getDate();
//下面这个赋值是上面input的v-model的值
vm.addUserBirthday = addDate;


//完成添加操作后，进行更新datepicker里面的值。如果需要清空赋予空对象
//$('#datepicker .input-group.date').datepicker('update', '');
$('#datepicker .input-group.date').datepicker('update', todayStr);