感谢网友:成都 - 前端 - 鬼鬼
iview-V1.1 的官网 参考!
图 - 01
今天第一次使用 iview 组件开发项目模块,之前使用 vue 进行数据绑定的时候通常使用 v-model 进行数据绑定,但是今天使用 v-model 进行 iview 中日期的数据绑定遇到了日期数据的格式问题。因此下班之余分享给大家,希望大家以后可以避免入坑。以后随着 iview 的使用,会将开发过程中遇到的问题每天总结汇总至此,希望可以给大家提供一点帮助。
- <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
- <link href="https://cdn.bootCSS.com/iview/2.7.4/styles/iview.css" rel="stylesheet">
- <script src="http://www.jq22.com/jquery/vue.min.js"></script>
- <script src="https://cdn.bootcss.com/iview/2.7.4/iview.min.js"></script>
- <Date-Picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px" v-model="q.date"></Date-Picker>
v-model="q.date"
- var dateTimeStart = new Date(vm.q.data[0]);
- var dateTimeEnd = new Date(vm.q.data[1]);
- dateTimeStartForm = dateTimeStart.getFullYear() + '-' + (dateTimeStart.getMonth() + 1) + '-' + dateTimeStart.getDate();
- dateTimeEndForm = dateTimeEnd.getFullYear() + '-' + (dateTimeEnd.getMonth() + 1) + '-' + dateTimeEnd.getDate();
- <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
- <link href="https://cdn.bootcss.com/iview/2.7.4/styles/iview.css" rel="stylesheet">
- <script src="http://www.jq22.com/jquery/vue.min.js"></script>
- <script src="https://cdn.bootcss.com/iview/2.7.4/iview.min.js"></script>
- <Date-Picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px" :value="q.date" @on-change="timeChange"></Date-Picker>
:value="q.date"
- timeChange: function(date) {
- this.q.date = date;
- }
- filter: function(event) {
- vm.showList = true;
- var page = $("#jqGrid").jqGrid('getGridParam', 'page');
- $("#jqGrid").jqGrid('setGridParam', {
- postData: {
- 'username': vm.q.username,
- 'dateTimeStartForm': vm.q.data[0],
- 'dateTimeEndForm': vm.q.data[1]
- },
- page: page
- }).trigger("reloadGrid");
- }
来源: http://www.jianshu.com/p/d8d13dab271b