js前端日历控件(悬浮、拖拽、自由变形)

很少发现网上有简洁好用的自定义前端控件的贴子,最近项目中需要,自己YY开始写前端控件,在此给大家分享

控件是基于jQuery.UI的Widget写的,写起来就方便很多,使用起来跟普通jQuery控件一样$(#id).control(option),看着眼熟吧,下面就开始了。

首先说下控件的依赖包,加载控件的时候必须先加载jQuery, jQuqery.UI, 另外jquery-ui.css

这个包也需要引用,此包主要应用了jQuery拖拽和放缩的样式,控件样式方面大家自由发挥,给了个自己写的默认样式包 (献丑了)。

控件本身支持颜色自定义,可根据日期自定义日历上某日的颜色,另外可悬浮,拖拽,自由变形算是卖点吧,哈哈

控件包加载是这样的:

<link href="../../Content/themes/base/jquery-ui.css" rel="external nofollow" rel="stylesheet" />
<link href="../../Content/datePrinter.css" rel="external nofollow" rel="stylesheet" />

<script src="../../Scripts/default/jquery-ui-1.8.20.min.js"></script>
<script src="../../Scripts/control/datePrinter.js"></script>

控件中的核心部分就是打印选中月的日历,是参考网上的代码,偷懒嘛,欢迎认领

例如页面代码如下:

<input type="text" id="datepickerInput"/>

调用的写法:

var dpCon = $("#datepickerInput").datePrinter({
      initDate: "2017-4-5", //初始化日期
      language: "EN", //语言
      resizable: true, //可自由变形
      draggable: true, //可悬浮拖拽
      showYearAndMonth: true, //是否显示年月下拉框
      getColor: getColor, //自定义颜色接口
      chooseDone: chooseDone //选中日历某日执行事件接口
    });

    //选中日期时让日历消失 当然此处可以执行比较复杂的业务,如服务器数据请求
    function chooseDone(date) {
      dpCon.datePrinter("dpHide");
    }

    //自定义日期颜色
    function getColor(day){
      if(day == 3 || day==7 || day==15)
        return "dpdisabled";
      else if(day== 5 || day==18 || day==23)
        return "dpyellow";
      else
        return "dpenable";
    }

    //获取当前选中的日期 调用控件提供的API getSelectDate
    dpCon.datePrinter("getSelectDate");

这样子就给上面的input text控件注册了一个日历控件,在点击input时,日历就会浮出,效果如下

你可能注意到右下角的小三角了,鼠标放上去之后可以随意变化日历的长宽,另外在日历上按住鼠标左键可以随意移动日期控件的位置,不挤占页面位置

下面这段是打印日历的代码,供参考:

//默认获取当前日期
    var today = option.initDate ? option.initDate : new Date();
    this.options.initDate = today;
    //获取日期中的年份
    var y = today.getFullYear(),
    //获取日期中的月份(需要注意的是:月份是从0开始计算,获取的值比正常月份的值少1)
    m = today.getMonth(),
    //获取日期中的日(方便在建立日期表格时高亮显示当天)
    d = today.getDate(),
    //获取当月的第一天
    firstday = new Date(y, m, 1),
    //判断第一天是星期几(返回[0-6]中的一个,0代表星期天,1代表星期一,以此类推)
    dayOfWeek = firstday.getDay() == 0 ? 7 : firstday.getDay(),
    //创建月份数组
    days_per_month = new Array(31, 28 + self._isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),
    //确定日期表格所需的行数
    str_nums = Math.ceil((dayOfWeek + days_per_month[m] - 1) / 7);
    //二维数组创建日期表格
    for (i = 0; i < str_nums; i += 1) {
      var tr = '<tr>';
      for (k = 0; k < 7; k++) {
        //为每个表格创建索引,从0开始
        var idx = 7 * i + k;
        //将当月的1号与星期进行匹配
        var day = idx - dayOfWeek +2;
        var styleName = self._getColor(day);
        if (option.getColor && typeof (option.getColor) == 'function')
          styleName = option.getColor(day);
        styleName += " dateTD";

        (day <= 0 || day > days_per_month[m]) ?
        //索引小于等于0或者大于月份最大值就用空表格代替
        (day = ' ', styleName = "dpBlank") : (day = idx - dayOfWeek + 2);
        day == d ? tr += '<td class="' + styleName + ' today">' + day + '</td>' :
        //高亮显示当天
        tr += '<td class="' + styleName + '">' + day + '</td>';
      }
      tr += '</tr>';
      self._dpTable.append(tr);
      tr = "";
    }

以前都是写后台,玩前端的时间不长,有不对的地方欢迎指正

datePrinter.js的全部代码如下:

var _datePrinter_tmpl_CN = "<tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th></tr>";
var _datePrinter_tmpl_EN = "<tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr>";

Date.prototype.Format = function (fmt) { //author: meizz
 var o = {
  "M+": this.getMonth() + 1,     //月份
  "d+": this.getDate(),     //日
  "h+": this.getHours(),     //小时
  "m+": this.getMinutes(),     //分
  "s+": this.getSeconds(),     //秒
  "q+": Math.floor((this.getMonth() + 3) / 3), //季度
  "S": this.getMilliseconds()    //毫秒
 };
 if (/(y+)/.test(fmt))
  fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
 for (var k in o)
  if (new RegExp("(" + k + ")").test(fmt))
   fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
 return fmt;
}

$.widget("ui.datePrinter", {
 options: {
  initDate: null,
  language: null, // CN,EN
  resizable: false,
  draggable: false,
  width: "240px",
  dateFormat:'yyyy/MM/dd',
  getColor: null, //自定义颜色
  showYearAndMonth: false,
  chooseDone: function (selectDate) { return selectDate }, //选中日期后执行的自定义事件
  autoId:null //控件Id
 },
 _dpTable: null,
 _dpRoot:null,
 _selectDate:null, //选中日期
 _create: function () {
  var self = this, option = this.options, ele = this.element;
  $(ele).after("<div class='dpRoot'></div>");
  self._dpRoot = $(ele).parent().find('div.dpRoot');
  self._dpRoot.empty();

  self._dpRoot.append("<div class='dpTitle' style='text-align:right;background-color:#e8edf4; width:" + option.width +
   "'><select class='selYear'></select><select class='selMonth'></select><a style='color:#000;text-decoration:none;font-size:18px;padding-left:10px; padding-right:10px;width:10px;' href='javascript:void(0);'>x</a></div>");
  self._dpRoot.append("<table style='width:" + option.width + "' cellspacing='0'></table>");
  option.autoId = self._newGuid();
 },
 _init: function () {
  var self = this, option = this.options, ele = this.element;
  if (option.initDate && typeof option.initDate == 'string')
   option.initDate = new Date(option.initDate.replace("-", "/"));

  //初始化日历
  self._initDate();

  //点击事件
  self._dpTable.delegate("td", "click", function () {
   if (!$(this).hasClass("dpBlank")) {
    self._dpTable.find("td").removeClass("today");
    $(this).addClass("today");
    //控件设置值
    $.proxy(self._setDate($(this).text()), self);

    if (option.chooseDone && typeof (option.chooseDone) == 'function')
     $.proxy(option.chooseDone(self._selectDate), self);
   }
  });

  if (option.resizable)
   self._dpRoot.resizable({
    minHeight: self._dpRoot.css("height").replace("px",''),
    minWidth:option.width.replace("px",''),
    resize: function (event, ui) {
     var titleHeight = self._dpRoot.find("div.dpTitle").css("height").replace("px", "");

     //最小值时不再缩小
     if (ui.size.width >= Number(option.width.replace("px",''))) {
      $(ui.element).find("table").css({ "width": ui.size.width, "height": ui.size.height - titleHeight, "text-align": "center" });
      $(ui.element).find("div.dpTitle").css({ "width": ui.size.width });
     }
    }
   });

  if(option.draggable)
   self._dpRoot.draggable();

  //关闭按钮事件
  self._dpRoot.find("div.dpTitle > a").bind("click", function () {
   $.proxy(self.dpHide(), self);
  });

  if (option.showYearAndMonth) {
   self._initSelYear();
   self._initSelMonth();
  }

  $(ele).focus(function () {
   self.dpShow();
  });

  $(ele).click(function () {
   self.dpShow();
  });

  //$(ele).blur(function (e) {
  // if ($(e.target).closest('div.dpRoot').length == 0) {
  //  self.dpHide();
  // }
  //});
 },

 _destroy: function () {
  var self = this, option = this.options, ele = this.element;
  self._dpRoot.empty();
  this._prototype._destroy.call(self);
 },

 _getColor: function (date) {
  var styleName = null;
  if (date == 3 || date == 5 || date == 12)
   styleName = "dpdisabled";
  else if (date == 20 || date == 23 || date == 27)
   styleName = "dpyellow";
  else
   styleName = "dpenable";

  return styleName;
 },

 _initSelYear: function () {
  var self = this, option = this.options, ele = this.element;
  //根据初始化设置时间计算
  var today = option.initDate ? option.initDate : new Date();
  this.options.initDate = today;
  var y = today.getFullYear(),
  m = today.getMonth();

  //打印年 + - 10
  for (var i = 0; i < 20; i++) {
   var varSel = (y == (y + i - 10)) ? "selected='selected'" : "";
   self._dpRoot.find("select.selYear").show().append("<option value='" + (y + i - 10) + "' " + varSel + ">" + (y + i - 10) + "</option");
  }

  //年事件
  self._dpRoot.find("select.selYear").bind("change", function () {
   option.initDate = new Date(option.initDate.setYear($(this).val()));
   self._initDate();
  });
 },

 _initSelMonth: function () {
  var self = this, option = this.options, ele = this.element;
  //根据初始化设置时间计算
  var today = option.initDate ? option.initDate : new Date();
  this.options.initDate = today;
  var y = today.getFullYear(),
  m = today.getMonth();
  //打印月
  for (var i = 0; i < 12; i++) {
   var varSel = (m == i) ? "selected='selected'" : "";
   self._dpRoot.find("select.selMonth").show().append("<option value='" + (i + 1) + "' " + varSel + ">" + (i + 1) + "</option");
  }

  //月事件
  self._dpRoot.find("select.selMonth").bind("change", function () {
   var selMon = Number($(this).val()) - 1;
   option.initDate = new Date(option.initDate.setMonth(selMon));
   self._initDate();
  });
 },

 _initDate: function () {
  var self = this, option = this.options, ele = this.element;

  self._dpTable = self._dpRoot.find("table");
  self._dpTable.empty();
  if (option.language == "EN") {
   self._dpTable.wrapInner(_datePrinter_tmpl_EN);
  }

  //默认获取当前日期
  var today = option.initDate ? option.initDate : new Date();
  this.options.initDate = today;
  //获取日期中的年份
  var y = today.getFullYear(),
  //获取日期中的月份(需要注意的是:月份是从0开始计算,获取的值比正常月份的值少1)
  m = today.getMonth(),
  //获取日期中的日(方便在建立日期表格时高亮显示当天)
  d = today.getDate(),
  //获取当月的第一天
  firstday = new Date(y, m, 1),
  //判断第一天是星期几(返回[0-6]中的一个,0代表星期天,1代表星期一,以此类推)
  dayOfWeek = firstday.getDay() == 0 ? 7 : firstday.getDay(),
  //创建月份数组
  days_per_month = new Array(31, 28 + self._isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),
  //确定日期表格所需的行数
  str_nums = Math.ceil((dayOfWeek + days_per_month[m] - 1) / 7);
  //二维数组创建日期表格
  for (i = 0; i < str_nums; i += 1) {
   var tr = '<tr>';
   for (k = 0; k < 7; k++) {
    //为每个表格创建索引,从0开始
    var idx = 7 * i + k;
    //将当月的1号与星期进行匹配
    var day = idx - dayOfWeek +2;
    var styleName = self._getColor(day);
    if (option.getColor && typeof (option.getColor) == 'function')
     styleName = option.getColor(day);
    styleName += " dateTD";

    (day <= 0 || day > days_per_month[m]) ?
    //索引小于等于0或者大于月份最大值就用空表格代替
    (day = ' ', styleName = "dpBlank") : (day = idx - dayOfWeek + 2);
    day == d ? tr += '<td class="' + styleName + ' today">' + day + '</td>' :
    //高亮显示当天
    tr += '<td class="' + styleName + '">' + day + '</td>';
   }
   tr += '</tr>';
   self._dpTable.append(tr);
   tr = "";
  }
 },

 _isLeap: function (year) {
  var self = this, option = this.options, ele = this.element;
  return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
 },

 //选中日期时设置选中值 day为currentDate当月的第几日
 _setDate: function (day) {
  var self = this, option = this.options, ele = this.element;
  self._selectDate = new Date(option.initDate.getFullYear() + '/' + (option.initDate.getMonth() + 1) + '/' + day);
  //设置输入框值
  $(ele).val(self.getSelectDate(), self);
 },

 //获取所选日期
 getSelectDate: function () {
  var self = this, option = this.options, ele = this.element;
  return self._selectDate.Format(option.dateFormat);
 },

 //显示
 dpShow: function () {
  var self = this, option = this.options, ele = this.element;
  self._dpRoot.show();
 },

 //隐藏
 dpHide: function () {
  var self = this, option = this.options, ele = this.element;
  self._dpRoot.hide();
 },

 //new Guid
 _newGuid: function () {
  var guid = "";
  for (var i = 1; i <= 32; i++) {
   var n = Math.floor(Math.random() * 16.0).toString(16);
   guid += n;
   if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) {
    //guid += "-";
   }
  }
  return guid;
 }

});

样式本人是业余的,勉强看看吧,由于datePrinter.js有依赖css的class名称,贴出来datePrinter.css文件代码如下

.dpBlank {
 background-color: white;
 cursor: not-allowed;
}

.dpRoot {
 width: 240px;
 position:absolute;
 display:none;
}

.today {
 border: 2px double #FF9900 !important;
}

.dpenable {
 background-color: #AABBFF;
}

.dpyellow {
 background-color: #FFC266;
}

.dpdisabled {
 background-color: #B0AEA4;
}

.dpRoot table {
 font-size: 13px;
 width: inherit;
}

.dpRoot table th {
 font-size: 12px;
 border: solid 2px #e8eef4;
 padding: 2px 3px;
 background-color: #e8eef4;
 border-collapse:initial;
 text-align: center;
 width: 22px;
}

.dpRoot table td {
 color: white;
 padding: 4px 5px;
 border: solid 2px #e8eef4;
}

.dpTitle {
 padding: 3px 0 0 0;
}

.dateTD {
 cursor: pointer;
}

.selYear {
 margin-right: 5%;
 display: none;
 font-size:14px;
}

.selMonth {
 margin-right: 5%;
 display: none;
 font-size:14px;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-02-28

一起学写js Calender日历控件

最近看了一下关于js日期的一些函数,突然想到了日历控件,于是试着写了一个,作为后台程序员的我水平有限,大家抱着学习的态度看看我写的这个例子吧,一起学习进步! 首先一个常用的日期函数: Date(year,month,day) var   date=new  Date(); 获取年份 var   year=this.date.getFullYear(); 获取月份,这里是月索引所以要+1 var   month=this.date.getMonth()+1; 获取当天是几号 var   day=t

修改js Calendar日历控件 兼容IE9/谷歌/火狐

修改Calendar日历控件 兼容IE9,谷歌,火狐. 只是能用,出现的位置有所不同,希望有高手再帮我改改吧,谢谢 一. 复制代码 代码如下: this.iframe = window.frames("meizzCalendarIframe"); 修改为 复制代码 代码如下: this.iframe = window.frames["meizzCalendarIframe"]; 二. 复制代码 代码如下: var a = (arguments.length==0)

php+javascript的日历控件

复制代码 代码如下: <html> <head> <title>js calendar</title> <script language="javascript"> /* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo * ----------------------------------------------------------- * * The DHT

javascript特殊日历控件分享

本文为大家分享了一个炫酷的js日历控件,供大家参考,具体内容如下 引用JSLit.js 下载 JSLite.io,兼容 JSLite 和 jQuery 安装方法 页面引用 JSLite 或者jQuery <div id="JSLiteCalenbar4"><input type="text"></div> <script type="text/javascript" src="../JSLite

js日历控件(可精确到分钟)

.menu_iframe{position:absolute; visibility:inherit; top:0px; left:0px; width:170px; z-index:-1; filter: Alpha(Opacity=0);} .cal_table{ border:#333333 solid 1px; border-collapse:collapse; background:#ffffff; font-size:12px} .cal_table td{ border:1px #

简约JS日历控件 实例代码

运行结果如下: 复制代码 代码如下: <script type="text/javascript" language="javascript">function choose_date_czw(date_id,objtd){if(date_id=="choose_date_czw_close"){    document.getElementByIdx_x_x("choose_date_czw_id").style

JavaScript blog式日历控件新算法

使用说明: 程序比较简单,代码中都有说明,这里说说怎么使用. 首先是实例化一个Calendar,并设置参数. 参数说明: Year:要显示的年份 Month:要显示的月份 SelectDay:选择日期 onSelectDay:在选择日期触发 onToday:在当天日期触发 onFinish:日历画完后触发 一般SelectDay设置成选择了的日期,并在onSelectDay中设置一个函数用来设置这个日期的样式, 例如实例里SelectDay设置成今个月10号并在那天样式设为onSelect: 复

JS学习之一个简易的日历控件

这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo

原生js制作日历控件实例分享

本文实例为大家分享了js实现一个简单的日历控件,供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>date</title> <style type="text/css"> *{ margin:0; padding:0;} a{ text-decoration:none

纯javascript版日历控件

平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo

纯javascript制作日历控件

以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就是让input控件内部右边显示一个按钮,我是直接给input加了个背景,然后把input的边框去掉实现的. 这个是最初版的,再往后打算做出纯javascript版的,再往后打算用JQuery做一套. <!doctype html> <html> <head> <met

ASP.NET中日历控件和JS版日历控件的使用方法(第5节)

今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一  Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个

javascript实现日历控件(年月日关闭按钮)

经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: <div id="a"><div id="head"><span id="yface">年:<select id="year"></select></span><span id=&quo

支持IE,Firefox的javascript 日历控件

效果图:其实学习的方法,就是会搜索的方法,会搜索才能更快的解决问题.搜索方法: javascript 日历控件 site:jb51.net| 日期输入框演示-jb51.net script body{font-size:12px;font-family:Verdana,Arial,"宋体";} a:link {color:#464646;text-decoration:none;} a:visited {color:#464646;text-decoration:none;}ifram

.net mvc页面UI之Jquery博客日历控件实现代码

一.效果图 二.页面文件 页面上需要添加<div id="cal"></div>标记. 三.JS代码 复制代码 代码如下: // JavaScript 日历 $(document).ready(function () { //当前时间 $now = new Date();                      //当前的时间 $nowYear = $now.getFullYear();          //当前的年 $nowMonth = $now.get