vuejs日历、表单、多行录入

最新推荐文章于 2024-07-04 19:32:13 发布
最新推荐文章于 2024-07-04 19:32:13 发布
阅读量336 收藏
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30812457/article/details/122926079
版权

前端

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="calendar.aspx.cs" Inherits="YKTWeb.Example.calendar" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vuejs日历、表单、多行录入</title>
    <style type="text/css">
        #calendar {
            width: 100%;
            border-collapse: collapse;
        }

            #calendar tr th {
                font-size: 10px;
                height: 30px;
                text-align: center;
            }

            #calendar tr td {
                font-size: 8px;
                height: 45px;
                text-align: center;
                color: black;
                border: 0.5px solid black;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="app" style="width: 500px;">
            <div style="text-align:center;">           
                <select v-model="year" @change="selectChange">
	                <option v-for="item in years" :value="item">
		                {{item}}
	                </option>
                </select>
                <label>年</label>          
                <select v-model="month" @change="selectChange">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
	             </select>
                <label>月</label>
            </div>
            <table id="calendar">
                <tbody>
                    <tr>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                        <th>星期四</th>
                        <th>星期五</th>
                        <th>星期六</th>
                        <th>星期日</th>
                    </tr>
                    <tr v-for="item in info">
                        <td v-for="dayData in item">{{dayData.day}}</td>
                    </tr>
                </tbody>
            </table>
            <div>
                <table>
                    <tr>
                        <td>文本</td>
                        <td><input v-model="formData.message" placeholder="文本输入..."/></td>
                    </tr>
                    <tr>
                        <td>多行文本</td>
                        <td>
                            <textarea v-model="formData.message2" placeholder="多行文本输入..."></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>下拉</td>
                        <td>
                            <select v-model="formData.message3">
                               <option value="">请选择</option>
	                           <option value="1">选项1</option>
                               <option value="2">选项2</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <button type="button" @click="onSubmit($event)">提交</button>
                        </td>
                    </tr>
                </table>

                <table>
                     <tr>
                        <td colspan="2">
                            <button type="button" @click="AddRow($event)">添加一行</button>
                            <button type="button" @click="RowsSubmit($event)">提交</button>
                        </td>
                    </tr>
                    <tr v-for="(item,index) in rows">
                        <td>第{{index+1}}行</td>
                        <td>
                            <input v-model="item.inputvalue" placeholder="文本输入..."/>
                        </td>
                        <td>
                            <button type="button" @click="del(index)">删除</button>
                        </td>
                    </tr>
                </table>


            </div>
        </div>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
        <script type="text/javascript">
            var obj = new Vue({
                el: '#app',
                data() {
                    return {
                        info: null,
                        year: new Date().getFullYear(),
                        month: new Date().getMonth() + 1,
                        years: new Array(),
                        formData: {
                            //message2:null
                        }, rows: [{ inputvalue: "第一行内容" }]
                    }
                },
                created() {
                    this.send(this.year, this.month);
                    for (var i = 2022; i >= 2010; i--) {
                        this.years.push(i);
                    }
                    //绑定表单数据
                    axios({
                        url: "/Example/calendar.aspx/GetData",
                        method: "post",
                        headers: {
                            'Content-Type': 'application/json; charset=utf-8'
                        },
                        data: {
                            id: 1
                        }
                    }).then(response => (this.formData = response.data.d)).
                        catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                },
                watch: {//监听函数
                    'formData.message2': function (val) {
                        this.formData.message2 = val.replace(/\D/g, '');//只能输入数字
                        console.log(val);
                    }, month: function (val) {
                        console.log(val);
                    }
                },
                methods: {//自定义函数
                    send: function (year, month) {//日历
                        axios({
                            url: "/Example/calendar.aspx/GetCalendar",
                            method: "post",
                            headers: {
                                'Content-Type': 'application/json; charset=utf-8'
                            },
                            data: {
                                year: year,
                                month: month
                            }
                        }).then(response => (this.info = response.data.d)).
                            catch(function (error) { // 请求失败处理
                                console.log(error);
                            });
                    },
                    selectChange: function () {//切换日历月份
                        this.send(this.year, this.month);
                    },
                    onSubmit: function (event) {//提交表单
                        var result = this.validate();
                        if (result.valiState) {
                            axios({
                                url: "/Example/calendar.aspx/formSubmit",
                                method: "post",
                                headers: {
                                    'Content-Type': 'application/json; charset=utf-8'
                                },
                                data: {
                                    formData: JSON.stringify(this.formData)
                                }
                            }).then(response => (alert(response.data.d))).
                                catch(function (error) { // 请求失败处理
                                    console.log(error);
                                });
                        } else {
                            alert(result.msg.join(','));
                        }
                    }, validate: function () { //表单验证
                        var result = {
                            valiState: true,
                            msg: new Array()
                        }
                        if (!this.formData.message) {
                            result.valiState = false;
                            result.msg.push("项目1不能为空");
                        }
                        if (!this.formData.message2) {
                            result.valiState = false;
                            result.msg.push("项目2不能为空");
                        }
                        if (!this.formData.message3) {
                            result.valiState = false;
                            result.msg.push("项目3不能为空");
                        }
                        return result;
                    }, AddRow: function ($event) {
                        this.rows.push({ inputvalue: "" });
                    }, RowsSubmit: function ($event) {
                        console.log(this.rows);
                    }, del: function (index) {
                        this.rows.splice(index, 1);
                    }
                }
            })
        </script>
    </form>
</body>
</html>

后端

 /// <summary>
        /// 日历
        /// </summary>
        [WebMethod]
        public static List<List<Dictionary<string, object>>> GetCalendar(int year, int month)
        {
            List<List<Dictionary<string, object>>> monthList = new List<List<Dictionary<string, object>>>();
            List<Dictionary<string, object>> weekList = new List<Dictionary<string, object>>();
            DateTime day1 = new DateTime(year, month, 1);
            int week1 = (int)day1.DayOfWeek;//获取此月1号的星期
            if (week1 == 0)
            {
                week1 = 7;
            }
            int lastday = day1.AddMonths(1).AddDays(-1).Day; //获取此月的最后一天
            bool bl = true;
            for (int i = 1; i <= lastday; i++)
            {
                Dictionary<string, object> dayData = new Dictionary<string, object>();
                if (bl)
                {
                    for (int week = week1; week > 1; week--)
                    {
                        dayData = new Dictionary<string, object>();
                        dayData.Add("day", null);
                        dayData.Add("AQI", null);
                        weekList.Add(dayData);
                    }
                    bl = false;
                }
                dayData = new Dictionary<string, object>();
                //DataRow[] rows = dt.Select("iDay=" + i);
                dayData.Add("day", i);
                dayData.Add("AQI", null);
                //if (rows.Length > 0)
                //{
                //    dayData["AQI"] = rows[0]["CityAQI24"];
                //}
                weekList.Add(dayData);
                if ((i + week1 - 1) % 7 == 0)
                {
                    monthList.Add(weekList);
                    weekList = new List<Dictionary<string, object>>();
                }
                if (lastday == i)
                {
                    for (int j = lastday + week1; j <= 42; j++)
                    {
                        dayData = new Dictionary<string, object>();
                        dayData.Add("day", null);
                        dayData.Add("AQI", null);
                        weekList.Add(dayData);
                        if (j % 7 == 0)
                        {
                            monthList.Add(weekList);
                            weekList = new List<Dictionary<string, object>>();
                        }
                    }
                }
            }
            return monthList;
            //return JsonConvert.SerializeObject(monthList);
        }

 

qq_30812457
关注
VCalendar是一个轻量级的无依赖关系的Vuejs日历插件
08-07
在JavaScript开发中，日历控件是常见的表单元素之一，常用于日期选择、日程安排等场景。VCalendar的出现为Vue.js开发者提供了一个高效且易于使用的解决方案。通过其API，开发者可以轻松实现诸如日期范围选择、多日...
vuefullcalendar一个基于vuejs的全日历组件
08-10
Vue FullCalendar是一个专门为Vue.js框架设计的全功能日历组件，它允许开发者在Vue应用程序中轻松集成日历功能。这个组件并不依赖jQuery，也不需要直接使用fullCalendar.js库，因此对于那些希望保持代码轻量级和 Vue...
vue实现日历表格（element-ui）
10-14
主要为大家详细介绍了vue实现日历表格（element-ui），文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue 3 自定义多行文本输入组件
qq_45861961的博客
03-01 825
在Vue 3项目中，我们经常需要创建自定义的UI组件，以满足特定的业务需求。本篇博客将介绍一个基于Vue 3的自定义多行文本输入组件，该组件具有灵活的配置选项和一些特定的功能，使其适用于各种场景。
vue2+element-ui实现多行行内表格编辑
最新发布
weixin_53541596的博客
07-04 2048
vue2+element-ui实现多行行内表格编辑
vue实现一行多列的表单校验
qq_42383970的博客
11-08 1450
在开发过程中，经常会遇到一行多列的情况，并且需要做表单校验，element文档给的required案列是单列输入框，使用场景不符合动态一行多列验证
用在表单中的JS日历[转]
08-11 436
function replaceAll(value, rep1, rep2){ if(value==null || value==""){    return ""; }else{    return value.replace(new RegExp(rep1,"gm"), rep2); } } alert(replaceAll("abcabcabc","a","*")); 调用方法很简单，
TOASTUI日历的一个Vuejs封装
08-10
**Vue.js TOAST UI 日历组件详解** 在前端开发中，日历控件是一种常见的交互元素，用于展示日期选择或事件安排。TOAST UI 提供了一系列高质量的 UI 组件，其中包括一个功能强大的日历组件。在 Vue.js 框架中，我们...
桌面日历，桌面显示日历，随时录入代办事项
05-14
windows系统安装后，在桌面生成日历显示窗口，双击可以录入日历计划，一目了然
Awe采用Vuejs开发materialdesign风格的日历组件
08-10
在JavaScript开发中，表单日历控件是一种常见的交互元素，常用于日期输入。Vue.js的双向数据绑定使得日历组件与表单数据的同步变得容易。开发者可以监听用户的日期选择，实时更新关联的数据模型，同时也能根据模型的...
我的js（日历，表单操作，js验证）
04-07
兼容ie和firefox 包括常用JS操作（复选框、单选框、下拉框） 日历控件，支持换肤等 封装的js表单验证 demo目录里有js库（jskey_core）中提供的部分功能例子 其中themes目录里jskey_core中用到的样式，与js文件同级存放。 如果想不想使用日历类，则去掉jskey_core里【if(true)】【应该是第8行】及之后的代码 如果只是想使用日历类，则使用jskey_calendar.js source里的是包含注释、未去掉排版前的代码 以后有更新，则在http://www.cnblogs.com/skey_chen/中更新
三款非常经典的JS日历表单
03-09
国外三款非常经典的JS日历表单,通过几个简单的调用和设置就可以满足你的要求
javascript 实现输入多行动态输入
05-31
JSP用中收集数据:javascript 实现输入多行动态输入 在网上找了一下,只有一篇此类文章,还是PHP的,害得我要特意去看一下PHP,感觉很不好,是一种弱类型的语言,可以不声明就使用,因此,还要在每个变量前加$.不知道那些高手们为什么不谈谈自己写过报关系统等时候,一次性动态输入多行数据的经历. 一般,我们用 request.getParameter("value"); 来获得静态HTML输入的值.然后不要忘记判断是否为空,是否含有特殊字符等. 还可以用 Enumeration paramNames=request.getParameterNames(); while(paramNames.hasMoreElements()){String paramName=(String)paramNames.nextElement();} 来收集<input type="text" name="name"/>中的name 但是我们每增加新的一行,参数名同上一行一样,那么,我们将如何获得value的值? 这里我又去看书(servlet 和 JSP 核心编程,极好的一本书,该讲的都讲了,读明白了它servlet/JSP也就可以说精通了)p70页里面:getParameterValues()返回字符串数组,然后我们用循环判断这个字符串数组的长度,再就是获得值了
Vue实现textarea固定输入行数与添加下划线样式的思路详解
01-19
先上效果图###   textarea下划线 设置一张1*35 //行高 的图片 , 设置背景图即可. background: url(‘./img/linebg.png’) repeat; border: none;outline: none;overflow: hidden; line-height: 35px;//注意行高要和背景图高度一致resize: none; 固定输入行数 需求:用户固定不论多少字节,只能输入2行. 因为是限制行数,所以不能用maxlength设置. 实现思路 首先想到计算出用户输入了几行,然后超出部分字符删除掉就OK. <textarea class='
vue实现多行数据提交_JSON 数据搭建 Vue 页面
weixin_39598501的博客
11-20 404
今天给大家带来的是一个使用 JSON 数据来进行页面搭建的工具 juggle 此项目是基于公司内部一个开发工具重新整理并开源的。 目前功能还不是特别完善，但是基本的渲染引擎可以正常工作。 先看一个演示的 demo，你所看到的都是通过JSON渲染而成： Juggle​juggle.isjs.cn页面截图：GitHubadminV/juggle​github.com## ...
JS写的时间日历表
小张的编程之旅
04-10 3546
/* 调用方法：不能用onfocus，要用onclick   */ // 删除前后空格 String.prototype.trim = function(){return this.replace(/(^\s+)|(\s+$)/g,"");} var cal_Width = 180;//定义日历显示的宽度，至少140 document.write(""); docu
js之日历
时光清浅处，一步一安然
07-27 2811
js之日历 本文通过基础js来实现日历，如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } #calendar { width: 210px; margin: 100px auto;
html js 日期表单,一个表单日期输入的JS脚本 非常实用
weixin_33376046的博客
06-26 666
var DS_x,DS_y;function dateSelector()//构造dateSelector对象，用来实现一个日历形式的日期输入框。{var myDate=new Date();this.year=myDate.getFullYear(); //定义year属性，年份，默认值为当前系统年份。this.month=myDate.getMonth()+1; //定义month属性，月份，...
用HTML表单写一个日历
03-31
日历表单 请选择日期 日期： <br> 提交"> ``` 此代码将创建一个带有标签和文本输入框的表单，并使用“type”属性指定输入框类型为“date”，以便用户可以选择日期。提交按钮将允许用户提交...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值