zoukankan      html  css  js  c++  java
  • 原生JS实现日期选择

    JS声明方法

    /*
    *生日下拉框
    *把sel_year、sel_month、sel_day修改即可
    */ var birthday1 = { date_picker: function(options){ var defaults = { YearSelector: "#sel_year", MonthSelector: "#sel_month", DaySelector: "#sel_day", FirstText: "", FirstValue: 0 }; var opts = $.extend({}, defaults, options); var $YearSelector = $(opts.YearSelector); var $MonthSelector = $(opts.MonthSelector); var $DaySelector = $(opts.DaySelector); var FirstText = opts.FirstText; var FirstValue = opts.FirstValue; // 初始化 var str = "<option value="" + FirstValue + "">" + FirstText + "</option>"; $YearSelector.html(str); $MonthSelector.html(str); $DaySelector.html(str); // 年份列表 var yearNow = new Date().getFullYear(); var yearSel = $YearSelector.attr("rel"); for (var i = yearNow; i >= 1900; i--) { var sed = yearSel==i?"selected":""; var yearStr = "<option value="" + i + "" " + sed+">" + i + "</option>"; $YearSelector.append(yearStr); } // 月份列表 var monthSel = $MonthSelector.attr("rel"); for (var i = 1; i <= 12; i++) { var monthStr=null; var sed = monthSel==i?"selected":""; if(i<10){ monthStr="<option value="" + i + "" "+sed+">" + '0' +i + "</option>"; }else{ monthStr = "<option value="" + i + "" "+sed+">" +i + "</option>"; } $MonthSelector.append(monthStr); } // 日列表(仅当选择了年月) function BuildDay() { if ($YearSelector.val() == 0 || $MonthSelector.val() == 0) { // 未选择年份或者月份 $DaySelector.html(str); } else { $DaySelector.html(str); var year = parseInt($YearSelector.val()); var month = parseInt($MonthSelector.val()); var dayCount = 0; switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: dayCount = 31; break; case 4: case 6: case 9: case 11: dayCount = 30; break; case 2: dayCount = 28; if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) { dayCount = 29; } break; default: break; } var daySel = $DaySelector.attr("rel"); for (var i = 1; i <= dayCount; i++) { var dayStr=null; var sed = daySel==i?"selected":""; if(i<10){ dayStr = "<option value="" + i + "" "+sed+">" + +'0'+i + "</option>"; // dayStr =`<option>0${i}</option>` }else{ dayStr = "<option value="" + i + "" "+sed+">" + i + "</option>"; // dayStr =`<option>${i}</option>` } $DaySelector.append(dayStr); } } } $MonthSelector.change(function () { BuildDay(); }); $YearSelector.change(function () { BuildDay(); }); if($DaySelector.attr("rel")!=""){ BuildDay(); } } }

    HTML

    <select id="year" rel="2020"></select><select id="month" rel="05"></select><select id="day" rel="12"></select>

    JS调用

    $(function() {
        //声明三个下拉框 birthday.date_picker({ YearSelector:
    "#year", MonthSelector: "#month", DaySelector: "#day", });       
        //调用三个下拉框点击事件 birchange(
    "year"); birchange("month"); birchange("day"); }

    下拉框点击事件

        function birchange(field){
            $("#"+field).change(function(){
                $.ajax({
                    url:"../php/zyf.php",
                    data:{type:"birthday",num:field,val:$(this).val()},
                    success:function(res){
                        if(res == "ok"){
                            layer.msg('修改成功');
                        }
                        window.location.reload();
                    }
                })
            })
        }

    后台就是表单接收字段,就不献丑了

  • 相关阅读:
    适配器
    JAVA对list集合进行排序Collections.sort()
    ORACLE 日期加减操作
    将TIMESTAMP类型的差值转化为秒的方法
    Oracle 日期加减运算
    legend3---阿里云配置cdn服务
    legend3---阿里云添加 CNAME 记录提示和 A 记录冲突如何解决
    legend3---laravel将静态资源转移到阿里云oss
    legend3---laravel配置文件(自定义配置文件)
    laravel 自定义常量方法
  • 原文地址:https://www.cnblogs.com/zyfeng/p/12877860.html
Copyright © 2011-2022 走看看