今天介绍下 采用 jQuery所开发的DatePicker 组件和基于Eht开发平台框架对DatePicker组件的应用,在讲述如何开发之前,先给大家show下DatePicker组件开发出来的效果。
具体demo验证地址:http://demo.ehtsoft.com/
点击年 2013 的效果
上面图的开发原理如下:
计算当前日期的一号的位置及大小月闰年情况,同时计算上一个月在本次显示所剩的天数及下一个月应显示的天数
DatePicker 代码如下:(Eht 对象为Eht开发平台框架中的UI核心对象,具体见下载 http://www.ehtsoft.com/module/webpage/eht-download.jsp ,DatePicker 演示地址:http://demo.ehtsoft.com/)
Eht.DatePicker=function(options){
var dp = this;
var defaults = {
selector:null,
year:null,
month:null,
format:"yyyy-MM-dd",
yearprev:40,
yearnext:20,
show:true,
selectedDate:function(value){},
width:170,
closeButton:true
};
this.options = $.extend(defaults,options);
this.header = $("<div class='eht-date-picker-head'><table align='center'><tr><td style='width:30px;text-align:left;'><span id='date-year-prev'></span></td><td id='date-year'>year</td><td id='date-month'></td><td style='width:30px;text-align:right;'><span id='date-year-next'></span></td></tr></table></div>");
this.yearpanel = $("<div class='eht-date-picker-year-panel'></div>");
this.table=$("<table class='eht-date-picker-table'>");
this.footer=$("<div style='text-align:right;'><span><a href='#' id='date-current' style='color:#00f;font-size:11px;'>今天</a></span> <span><a href='#' id='date-close' style='color:#00f;font-size:11px;'>关闭</a></span></div>");
this.selector = this.options.selector==null?$("<div style='border:0px;width:"+this.options.width+"px;'></div>"):$(this.options.selector);
if(this.options.show==true){
this.selector.show();
}else{
this.selector.hide();
}
this.selector.children().remove();
this.selector.css({"border":"0px","width":this.options.width+"px","background-color":"#fff"});
this.selector.append(this.header);
this.selector.append(this.table);
this.selector.append(this.footer);
if(this.options.selector==null){
$(document.body).append(this.selector);
}
this.date = new Date();
this.selectDate = new Date();
this.months = $("<select>");
for(var i=1;i<=12;i++){
this.months.append("<option value='"+i+"'>"+i+"月</option>");
}
this.header.find("#date-month").append(this.months);
this.setDate(this.options.year, this.options.month);
if(this.options.show==true){
this.selector.show("show");
}
this.months.change(function(){
dp.setDate(dp.header.find("#date-year").text(), $(this).val());
});
this.header.find("#date-year-prev").css("cursor","pointer");
this.header.find("#date-year-prev").click(function(){
dp.setDate(dp.date.getFullYear()-1, dp.months.val());
});
this.header.find("#date-year-next").css("cursor","pointer");
this.header.find("#date-year-next").click(function(){
dp.setDate(dp.date.getFullYear()+1, dp.months.val());
});
this.header.find("#date-year").css("cursor","pointer");
this.header.find("#date-year").click(function(){
if(!$(this).attr("yearpanelshow")){
dp.yearpanel.children().remove();
dp.yearpanel.remove();
var l = dp.header.position().left;
var t = $(this).position().top+$(this).outerHeight();
if(dp.header.offset().left + 375 > $(window).width()){
l = $(window).width() - (dp.header.offset().left + 380);
}
dp.yearpanel.css({position:"absolute",left:l,top:t});
var yearTable = $("<table>");
for(var i=0;i<7;i++){
yearTable.append("<tr></tr>");
}
var row = 0;
for(var y=$(this).text()-dp.options.yearprev;y<$(this).text()-0+dp.options.yearnext;y++){
var td = $("<td>"+y+"</td>");
if(y==$(this).text()-0){
td.addClass("eht-date-picker-selected");
}
if(row==7){
row=0;
}
yearTable.find("tr").eq(row).append(td);
row++;
td.click(function(){
dp.setDate($(this).text(), dp.months.val());
});
}
dp.yearpanel.append(yearTable);
dp.selector.append(dp.yearpanel);
dp.yearpanel.hide();
dp.yearpanel.show("show");
$(this).attr("yearpanelshow",true);
}else{
dp.yearpanel.hide("show",function(){
dp.yearpanel.children().remove();
dp.yearpanel.remove();
});
$(this).removeAttr("yearpanelshow");
}
});
this.footer.find("#date-current").click(function(e){
dp.selectDate = new Date();
dp.setDate(dp.selectDate.getFullYear(), dp.selectDate.getMonth()+1);
if(dp.options.selectedDate){
dp.options.selectedDate(dp.selectDate.format(dp.options.format));
}
dp.selectedDate(dp.selectDate.format(dp.options.format));
});
if(this.options.closeButton==true){
this.footer.find("#date-close").show();
}else{
this.footer.find("#date-close").hide();
}
this.footer.find("#date-close").click(function(){
dp.close();
});
};
Eht.DatePicker.prototype.selectedDate=function(value){
};
Eht.DatePicker.prototype.removeYPanel=function(){
this.yearpanel.children().remove();
this.yearpanel.remove();
this.header.find("#date-year").removeAttr("yearpanelshow");
};
Eht.DatePicker.prototype.show=function(value){
this.selector.show(100);
if(value){
var reg = new RegExp("\\d{4}-\\d{1,2}-\\d{1,2}");
if(reg.test(value)){
this.selectDate= new Date(value.replace(/\-/g,"/"));
}
}else{
this.selectDate = new Date();
}
this.setDate(this.selectDate.getFullYear(), this.selectDate.getMonth()+1);
};
Eht.DatePicker.prototype.setDate=function(year,month){
this.removeYPanel();
if(year==undefined || year==null || ""==year){
year = new Date().getFullYear();
}
if(month==undefined || month==null || ""==month){
month = new Date().getMonth();
}else{
month = month - 1;
}
this.header.find("#date-year").text(year);
this.months.val(month+1);
this.date.setFullYear(year, month,1);
this._showpicker();
};
Eht.DatePicker.prototype.setPosition=function(comp){
if(comp){
var left = comp.position().left;
var top = Eht.offsetBottom(comp) + 1;
if(left + this.options.width > $(window).width()){
left = $(window).width() - this.options.width - 10;
}
if(top + 190 > $(window).height()){
top = $(window).height() - 190 - comp.outerHeight() - 1;
}
this.selector.css({"position":"absolute","left":left,"top":top});
}
};
Eht.DatePicker.prototype._showpicker=function(){
var dp = this;
this.table.children().remove();
var maxdate=isMaxMonth(this.date.getMonth()+1)?31:30;
if(this.date.getMonth()==1){
if(isRunnan(this.date.getFullYear())){
maxdate = 29;
}else{
maxdate = 28;
}
}
var prevDate = new Date(this.date.getFullYear(),this.date.getMonth()-1);
var prevmaxdate = isMaxMonth(prevDate.getMonth()+1)?31:30;
if(prevDate.getMonth()==1){
if(isRunnan(prevDate.getFullYear())){
prevmaxdate = 29;
}else{
prevmaxdate = 28;
}
}
var nextDate = new Date(this.date.getFullYear(),this.date.getMonth()+1);
var tr = $("<tr class='eht-date-picker-title'>");
tr.append("<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>");
this.table.append(tr);
var v = 0;
var nextdate = 1;
var prevday = prevmaxdate - this.date.getDay()+1;
if( this.date.getDay()==0){
prevday = prevday - 7;
}
for(var i=0;i<42;i++){
if(i%7==0){
tr = $("<tr class='eht-date-picker-day'>");
this.table.append(tr);
}
if(this.date.getDay()==i){
v = 1;
}
var td = $("<td align='center'></td>");
if(v==0 || (this.date.getDay()==0 && i<7)){
td.html(prevday++);
td.attr("year",prevDate.getFullYear());
td.attr("month",prevDate.getMonth()+1);
td.css({"color":"#aaa"});
}
if(v > maxdate){
td.html(nextdate++);
td.attr("year",nextDate.getFullYear());
td.attr("month",nextDate.getMonth()+1);
td.css({"color":"#aaa"});
}
if(this.date.getDay()!=0){
if(v!=0 && v <= maxdate){
td.attr("year",this.date.getFullYear());
td.attr("month",this.date.getMonth()+1);
if(this.selectDate.getDate()==v &&
this.selectDate.getFullYear()==this.date.getFullYear() &&
this.selectDate.getMonth()==this.date.getMonth()){
td.addClass("eht-date-picker-current");
}
td.html(v);
v++;
}
}else if(i>=7){
if(v!=0 && v <= maxdate){
td.attr("year",this.date.getFullYear());
td.attr("month",this.date.getMonth()+1);
if(this.selectDate.getDate()==v &&
this.selectDate.getFullYear()==this.date.getFullYear() &&
this.selectDate.getMonth()==this.date.getMonth()){
td.addClass("eht-date-picker-current");
}
td.html(v);
v++;
}
}
tr.append(td);
td.click(function(){
$(this).parent().parent().find("td").removeClass("eht-date-picker-selected");
$(this).addClass("eht-date-picker-selected");
var value = new Date($(this).attr("year"),$(this).attr("month")-1,$(this).text());
if(dp.options.selectedDate){
dp.options.selectedDate(value.format(dp.options.format));
}
dp.selectedDate(value.format(dp.options.format));
});
}
function isRunnan(year){
return (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
}
function isMaxMonth(month){
var rtn = false;
var maxmonth=[1,3,5,7,8,10,12];
for(var i=0;i<maxmonth.length;i++){
if(maxmonth[i]==month){
rtn = true;
break;
}
}
return rtn;
}
};
Eht.DatePicker.prototype.close=function(){
this.selector.hide(50);
};
上面代码是DatePicker的全部代码了
下面介绍下DatePicker在Eht开发框架平台的Form表单中的应用
<div id="form">
<input type="text" ehtType="date"/>
</div>
ehtType="date" 表示 该 input 组件为 DatePicker 组件,通过Eht.Form 类就可以生成如图的用法
具体调用方法:new Eht.Form({"selector":"#form"});
具体demo见 http://demo.ehtsoft.com/ DatePicker
相关推荐
《UnityUI中的DatePicker工具详解及应用》 在Unity游戏开发中,经常需要处理与时间相关的交互,例如玩家的生日设置、事件触发等。UnityUI(以前称为Unity3D的UGUI系统)提供了一套强大的界面元素,使得创建复杂的...
Unity引擎作为一款强大的游戏开发工具,其内置的Unity UI系统为开发者提供了丰富的界面元素,其中包括了时间选择器——DatePicker。在UnityUI 1.18版本中,这个组件进一步优化,为用户提供了更便捷的方式来处理与...
《UnityUI日期选择器DatePicker详解及应用》 在Unity3D开发中,用户界面(UI)的设计与交互至关重要,其中日期选择器(DatePicker)是常见的一种交互元素,它允许用户选择特定的日期。本文将深入探讨UnityUI 1.18中的...
《UnityUI日期选择器DatePicker详解及应用》 在Unity3D开发中,用户界面(UI)的设计与交互至关重要,其中日期选择器(DatePicker)是常见的一种交互元素,它允许用户在预设的日期范围内进行选择。在UnityUI系统中,...
Unity是一款强大的跨平台游戏开发引擎,它被广泛用于创建2D和3D的互动内容,包括游戏、模拟器以及各种可视化应用。"DatePicker for UnityUI" 是一个专门为Unity设计的日期选择组件,它使得在Unity界面中集成日期选择...
在本文中,我们将深入探讨如何基于JQuery UI的datepicker进行二次开发,以实现对时分秒的支持,并且提供皮肤切换的功能。JQuery UI是一个强大的JavaScript库,提供了多种用户界面组件,其中datepicker是一个常用的...
首先,jQuery UI Datepicker是一个基于jQuery库的日期选择器插件,它提供了一套完整的日期选择解决方案,包括各种格式化选项、日期范围限制、多语言支持等特性。开发者可以通过简单的API调用来集成到项目中,极大地...
在AngularJS开发中,UI-Grid是一个非常强大的数据网格组件,它允许开发者以灵活和高效的方式展示和操作表格数据。而“angularjs ui-grid datepicker”则是UI-Grid的一个扩展功能,它为表格中的日期字段提供了集成的...
基于bootstrap的UI框架,且继承了大量其他框架和组件,例如bootstrap-colorpicker,bootstrap-datepicker,chart.js,font-awesomejquery-ui等,并开源了js和less源码。
本文将深入探讨jQuery UI Datepicker及其全主题,帮助开发者更好地理解和应用这一工具。 首先,让我们了解jQuery UI Datepicker的基本功能。Datepicker是一个基于jQuery的插件,它可以被添加到任何HTML元素上,通常...
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
### jQuery UI 中 Datepicker 控件使用详解 #### 一、简介与基本使用 **Datepicker** 是 jQuery UI 提供的一个非常实用的日期选择插件,它可以帮助开发者轻松地在网页上添加日期选择功能。要使用 Datepicker,首先...
总的来说,图鸟UI是uni-app开发者的强大工具,它以其丰富的组件库、酷炫的页面模板和良好的易用性,极大地推动了跨平台应用的开发效率和质量。无论你是初学者还是经验丰富的开发者,图鸟UI都能够成为你构建高效、...
**jQuery UI Datepicker是最受欢迎的JavaScript日历插件之一,尤其在jQuery库的广泛使用下,它成为开发人员实现日期选择功能的首选工具。本文将深入探讨Datepicker控件的关键特性、使用方法以及如何与其他技术如Java...
在安卓应用开发中,`DatePicker`和`TimePicker`是两个非常重要的组件,它们用于让用户选择日期和时间,广泛应用于各种需要用户输入日期或时间的场景,如日程安排、事件记录等。本篇文章将详细讲解这两个组件的使用...
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
在iOS开发中,UI设计是用户体验的关键部分,而DatePicker作为一种常用的UI组件,常用于日期和时间的选择,如在创建一个简单的点菜选择界面、国旗选择或生日选择等场景。本篇我们将深入探讨如何使用DatePicker来实现...
在Web开发领域,jQuery UI是一个不可或缺的工具,它基于流行的JavaScript库jQuery,提供了丰富的用户界面组件和交互功能。jQuery UI为开发者提供了强大的功能,使得创建美观、易用且响应式的网页界面变得更加简单。 ...
《jQuery UI Datepicker增强版:时间输入功能详解》 在Web开发中,日期选择器是一个常见且实用的组件,它能够帮助用户方便地输入日期,提高用户体验。jQuery UI中的Datepicker是一个广泛使用的日期选择器插件,而在...