easyui控件实例之Calendar日历
- 格式:pdf
- 大小:275.35 KB
- 文档页数:4
轻量级的原生js日历插件calendar.js使用指南
轻量级的原生js日历插件calendar.js使用指南
许多学习软件的专业人士,都要学编程,而最便捷的一种编程语言就是Java。
本文是轻量级的原生js日历插件calendar.js使用的介绍,下面是该介绍的详细信息。
网页上的原生js日历代码,鼠标点击文字提示处,会显示一个带年月日的日历窗口,可调整年份、月份、选择日期等,用在网页上方便大家选择日期,提高用户体验。
各大浏览器都能正常运行,有需要的小伙伴可以参考下。
使用说明:
需要引入插件calendar.js/calendar.min.js
须要引入calendar.css 样式表,可以自定义自己想要的皮肤
本日历插件支持cmd模块化
如下调用:
复制代码代码如下:
xvDate({。
关于Calendar和Reminder(日历和提醒)编程指南Event Kit框架使你能访问用户的Calendar.app和Reminders.app 信息。
虽然这是两个不同的app,但是他们使用相同的框架处理数据。
类似地,存储这些数据的数据库,被称为日历数据库,持有calendar和reminder信息。
Event Kit除了允许你检索用户已经存在的calendar和reminder数据外,还允许你创建新的事件和提醒。
另外,还允许你修改和删除事件和提醒。
更高级的任务,例如添加警报或指定重复发生的事件,也可以。
一、Reading and Writing Calendar Events:使用EKEventStore类来获取、创建、修改和删除事件,使用EKEvent类来表示事件。
1、连接到Event Store:实例化EKEventStore对象:EKEventStore *store=[[EKEventStore alloc] initWithAccessToEntityTypes:EKEntityMaskEvent];一个EKEventStore对象需要一段明显的时间来初始化和释放。
因此,你不应该为每个事件相关的任务都初始化和释放一个单独的event store。
取而代乊的,在你的应用加载时,初始化一个event store,并且重复使用它。
event store必须不能在其它的Event Kit对象乊前被release,否则未定义的行为可能发生。
2、检索事件有2个方法检索事件。
使用predicate或search query,将返回0或多个事件来匹配给定的查询条件。
使用唯一标识符将返回一个单独的事件。
注意:检索的事件不一定按照年代排序。
要通过日期排序一组EKEvent对象,调用sortedArrayUsingSelector:方法,并使用selector为compareStartDateWithEvent:方法。
Calendar控件的常用属性属性说明Caption 获取或设置呈现为日历标题的文本值CaptionAlign 获取或设置呈现为日历标题的文本的对齐方式CellPadding 获取或设置单元格的内容和单元格的边框之间的空间量CellSpacing 获取或设置的单元格间的空间量DayHeaderStyle 获取显示一周中某天的部分的样式属性DayNameFormat 获取或设置一周中各天的名称格式DayStyle 获取显示的月份中日期的样式属性FirstDayOfWeek 获取或设置要在Calendar控件的“第一天”列中显示的一周中的某天NextMonthText 获取或设置为下一月导航控件显示的文本NextPrevFormat 获取或设置Calendar控件的标题部分中下个月和上个月导航元素的格式NextPrevStyle 获取下个月和上个月导航元素的样式属性OtherMonthDayStyle 获取不在显示的月份中的Calendar控件上的日期的样式属性PreMonthText 获取或设置为前一个月导航控件显示的文本SelectedDate 获取或设置选定的日期SelectedDates 获取System.DateTime对象的集合,这些对象表示Calendar控件上的选定日期SelectedDayStyle 获取选定日期的样式属性SelectionMode 获取或设置Calendar控件上的日期选择模式,该模式指定用户可以选择单日、一周还是整月SelectionMonthText 获取或设置为选择器列中月份选择元素显示的文本SelectorStyle 获取周和月选择器列的样式属性SelectWeekText 获取或设置为选择器列中周选择元素显示的文本ShowGridLines 获取或设置一个值,该值指示是否用网络线分割Calendar控件上的日期ShowDayHeader 获取或设置一个值,该值指示是否显示一周中各天的标头ShowNextPrevMonth 获取或设置一个值,该值指示Calendar控件是否在标题部分显示下个月和上个月的导航元素ShowTitle 获取或设置一个值,该值指示是否显示标题部分TitleFormat 获取或设置标题部分的格式TitleStyle 获取Calendar控件的标题标头的样式属性TodayDayStyle 获取Calendar控件上当天日期的样式属性TodaysDate 获取或设置当天日期的值UseAccessibleHeader 获取或设置一个值,该值指示是否为日标头呈现表标头<th>HTML元素,而不是呈现表数据<td>HTML元素VisibleDate 获取或设置指定要在Calendar控件上显示的月份的日期WeekendDayStyle 获取Calendar控件上周末日期的样式属性Calendar控件的常用方法方法说明AddDays 返回与指定的DateTime相距指定天数的DateTime AddHours 返回与指定DateTime相距指定小时数的DateTime AddMilliseconds 返回与指定DateTime相距指定毫秒数的DateTime AddMinutes 返回与指定DateTime相距指定分钟数的DateTime AddMonths 返回与指定DateTime相距指定月数的DateTime AddSeconds 返回与指定DateTime相距指定秒数的DateTime AddWeeks 返回与指定DateTime相距指定周数的DateTime AddYear 返回与指定DateTime相距指定年数的DateTime Clone 创建作为当前Calendar对象副本的新对象GetDayOfMonth 返回指定DateTime中的日期是该月的几号GetDayOfWeek 返回指定DateTime中的日期是星期几GetDayOfYear 返回指定DateTime中的日期是该年中的第几天GetDaysInMonth 返回指定月份中的天数GetDaysInYear 返回指定年份中的天数GetEra 返回指定的DateTime中纪元GetHour 返回指定的DateTime中的小时值GetLeapMonth 计算指定年份或指定纪元年份的闰月GetMilliseconds 返回指定的DateTime中的毫秒值GetMinute 返回指定的DateTime中的分钟值GetMonth 返回指定的DateTime中的月份GetMonthsInYear 返回指定年份中的月数GetSecond 返回指定的DateTime中的秒值GetWeekOfYear 返回年中包括指定DateTime中日期的星期GetYear 将返回指定的DateTime中的年份IsLeapDay 确定某天是否为闰日IsLeapMonth 确定某月是否为闰月IsLeapYear 确定某年是否为闰年ToDateTime 返回设置为指定日期和时间的DateTime ToFourDigitYear 使用TwoDigitYearMax属性将指定的年份转换为整数年份以确定相应的纪元。
⽇历的设定(Calendar)//采⽤单例模式获取⽇历对象Calendar.getInstance();Calendar c = Calendar.getInstance();//通过⽇历对象得到⽇期对象Date d = c.getTime();//设置当前⽇历⽇期c.setTime(d);//增加两个⽉c.add(Calendar.MONTH,2);//设置天数为:从1号开始倒数3天c.set(Calendar.DATE,-3);**add⽅法,在原⽇期上增加年/⽉/⽇**set⽅法,直接设置年/⽉/⽇package date;import java.text.SimpleDateFormat;//import java.util.Calendar;import java.util.Date;public class TestDate {private static SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");public static void main(String[] args) {Calendar c = Calendar.getInstance();Date now = c.getTime();// 当前⽇期System.out.println("当前⽇期:\t" + format(c.getTime()));// 下个⽉的今天c.setTime(now);c.add(Calendar.MONTH, 1);System.out.println("下个⽉的今天:\t" +format(c.getTime()));// 去年的今天c.setTime(now);c.add(Calendar.YEAR, -1);System.out.println("去年的今天:\t" +format(c.getTime()));// 上个⽉的第三天c.setTime(now);c.add(Calendar.MONTH, -1);c.set(Calendar.DATE, 3);System.out.println("上个⽉的第三天:\t" +format(c.getTime()));}private static String format(Date time) {return sdf.format(time);}}。
第 4 章 日历控件Calendar(月历)控件用于在 Web 页面中产生一个月历,以方便用户选择或设置日期数 据。
Calendar 控件必须放在 Web Form、Panel 或控件的模板内。
向页面中添加了 Calendar 控 件后,它可以每次显示一个月的日期(默认为系统时间的当前月)。
另外,它还显示该月之前 的一周和之后的一周,即控件中可显示六周。
1. Calendar 控件的常用属性Calendar 控件的常用属性,见表 610。
表610 Calendar控件的常用属性属性 说明FirstDayOfWeek 获取或设置要在 Calendar 控件的第一天列中显示的一周中的某天。
获取或设置为下一月导航控件显示的文本。
默认值为“>;”显示为一个大于号(>),只有在 NextMonthTextShowNextPreMonth属性设置为 True 时,该属性才有效。
PrevMonthText 获取或设置为前一月导航控件显示的文本。
SelectedDate 获取或设置选定的日期。
SelectedDates 获取 System.DateTime 对象的集合,这些对象表示 Calendar 控件上的选定日期。
SelectionMode 获取或设置 Calendar 控件上的日期选择模式,该模式指定用户可以选择单日、一周还是整月。
SelectMonthText 获取或设置为选择器列中月份选择元素显示的文本。
SelectWeekText 获取或设置为选择器列中周选择元素显示的文本。
ShowDayHeader 获取或设置一个值,该值指示是否显示一周中各天的标头。
ShowGridLines 获取或设置一个值,该值指示是否用网格线分隔 Calendar 控件上的日期。
ShowNextPrevMonth 获取或设置一个值,该值指示 Calendar 控件是否在标题部分显示下个月和上个月导航元素。
GUI学习之三⼗—QCalendarWidget学习总结今天学习的是最后⼀个展⽰控件——QCalendarWidget⼀.描述 QCalendarWidget提供了⼀个基于每⽉的⽇历控件,允许⽤户选择⼀个⽇期,还可以看⼀下⾥⾯的图⽰: QCalendarWidget是基于QWidget的⼀个⼦类,不像前⾯所⽤的QDialog⼀样具备弹出功能,所以要好多时候都需要结合QDialog使⽤。
⼆.功能作⽤ 1.⽇期范围QCalendarWidget.setMaximumDate(self, date: typing.Union[QtCore.QDate, datetime.date])QCalendarWidget.setMinimumDate(self, date: typing.Union[QtCore.QDate, datetime.date])QCalendarWidget.setDateRange(self, min: typing.Union[QtCore.QDate, datetime.date], max: typing.Union[QtCore.QDate, datetime.date]) 设定了范围后,如果⽇期超出了范围则相应⽇期会变灰。
2.⽇期编辑 ⽇期是可以通过⿏标点击来改变的,当然也可以通过键盘来实现QCalendarWidget.setDateEditEnabled() 这个设置默认值为True,在控件上可以直接⽤键盘输⼊,会有下⾯的效果 也就是可以⽤键盘输⼊⽇期直接跳转 在输⼊的过程中我们还可以通过下⾯的代码控制等待键盘输⼊的时间QCalendarWidget.setDateEditAcceptDelay(self, delay: int) #delay的值是ms 当然也可以获取上⾯的值QCalendarWidget.isDateEditEnabled() -> boolQCalendarWidget.dateEditAcceptDelay() -> int 还可以设置当前的时间self, date: typing.Union[QtCore.QDate, datetime.date] 我们可以通过⼀个按钮把⽇期返回到当下。
如何:在Calendar控件中显⽰数据库中的选定⽇期控件并不直接⽀持数据绑定,也就是说,您不是将⽇历作为⼀个整体绑定到数据源。
相反,您编写代码来获取所需数据,然后就可以在事件中,将当前呈现的⽇期与从数据源读取的数据进⾏⽐较。
在 Calendar 控件中显⽰数据库数据1. 使⽤ 类型连接到数据库并查询要显⽰的⽇期。
2. 在 Calendar 控件的DayRender事件中,将当前呈现的⽇期与从数据库中检索到的数据进⾏⽐较。
如果存在匹配项,则⾃定义相应的⽇期显⽰。
⽰例下⾯的⽰例将假⽇信息从数据库读取到⼀个 数据集。
当您选定⼀个⽉份时,将获取当前所选⽉份的⽇期,此⽇期范围是基于Calendar控件的属性定义的,该属性返回当前⽉的第⼀个⽇期。
每次⽤户导航到⼀个新的⽉份时,代码就会读取该⽉份的假⽇。
在DayRender事件中,代码会将当前呈现的⽇期与从数据库返回的⽇期进⾏⽐较。
如果有匹配的⽇期,则⽤特殊颜⾊标记这⼀天。
C#protected DataSet dsHolidays;protected void Page_Load(object sender, EventArgs e){if(!IsPostBack){Calendar1.VisibleDate = DateTime.Today;FillHolidayDataset();}}protected void FillHolidayDataset(){DateTime firstDate = new DateTime(Calendar1.VisibleDate.Year,Calendar1.VisibleDate.Month, 1);DateTime lastDate = GetFirstDayOfNextMonth();dsHolidays = GetCurrentMonthData(firstDate, lastDate);}protected DateTime GetFirstDayOfNextMonth(){int monthNumber, yearNumber;if(Calendar1.VisibleDate.Month == 12){monthNumber = 1;yearNumber = Calendar1.VisibleDate.Year + 1;}else{monthNumber = Calendar1.VisibleDate.Month + 1;yearNumber = Calendar1.VisibleDate.Year;}DateTime lastDate = new DateTime(yearNumber, monthNumber, 1);return lastDate;}protected DataSet GetCurrentMonthData(DateTime firstDate,DateTime lastDate){DataSet dsMonth = new DataSet();ConnectionStringSettings cs;cs = ConfigurationManager.ConnectionStrings["ConnectionString1"];String connString = cs.ConnectionString;SqlConnection dbConnection = new SqlConnection(connString);String query;query = "SELECT HolidayDate FROM Holidays " + _" WHERE HolidayDate >= @firstDate AND HolidayDate < @lastDate";SqlCommand dbCommand = new SqlCommand(query, dbConnection);dbCommand.Parameters.Add(new SqlParameter("@firstDate",firstDate));dbCommand.Parameters.Add(new SqlParameter("@lastDate", lastDate));SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(dbCommand);try{sqlDataAdapter.Fill(dsMonth);}catch {}return dsMonth;}protected void Calendar1_DayRender(object sender, DayRenderEventArgs e){DateTime nextDate;if(dsHolidays != null){foreach(DataRow dr in dsHolidays.Tables[0].Rows){nextDate = (DateTime) dr["HolidayDate"];if(nextDate == e.Day.Date){e.Cell.BackColor = System.Drawing.Color.Pink;}}}}protected void Calendar1_VisibleMonthChanged(object sender,MonthChangedEventArgs e){FillHolidayDataset();}此⽰例基于当前显⽰的⽉份的⽇期⽣成⼀个查询。
Java中的Calendar⽇历API⽤法完全解析第⼀部分 Calendar介绍Calendar 定义:public abstract class Calendar implements Serializable, Cloneable, Comparable<Calendar> {}Calendar 可以看作是⼀个抽象类。
它的实现,采⽤了设计模式中的⼯⼚⽅法。
表现在:当我们获取Calendar实例时,Calendar会根据传⼊的参数来返回相应的Calendar对象。
获取Calendar实例,有以下两种⽅式:(1) 当我们通过 Calendar.getInstance() 获取⽇历时,默认的是返回的⼀个GregorianCalendar对象。
GregorianCalendar是Calendar的⼀个实现类,它提供了世界上⼤多数国家/地区使⽤的标准⽇历系统。
(2) 当我们通过 Calendar.getInstance(TimeZone timezone, Locale locale) 或 Calendar.getInstance(TimeZone timezone) 或Calendar.getInstance(Locale locale)获取⽇历时,是返回“对应时区(zone) 或地区(local)等所使⽤的⽇历”。
例如,若是⽇本,则返回JapaneseImperialCalendar对象。
参考如下代码:public static Calendar getInstance(){// 调⽤createCalendar()创建⽇历Calendar cal = createCalendar(TimeZone.getDefaultRef(), Locale.getDefault());cal.sharedZone = true;return cal;}public static Calendar getInstance(TimeZone zone){// 调⽤createCalendar()创建⽇历return createCalendar(zone, Locale.getDefault());}public static Calendar getInstance(Locale aLocale) {// 调⽤createCalendar()创建⽇历Calendar cal = createCalendar(TimeZone.getDefaultRef(), aLocale);cal.sharedZone = true;return cal;}public static Calendar getInstance(TimeZone zone,Locale aLocale){// 调⽤createCalendar()创建⽇历return createCalendar(zone, aLocale);}private static Calendar createCalendar(TimeZone zone,Locale aLocale){// (01) 若地区是“th”,则返回BuddhistCalendar对象// (02) 若地区是“JP”,则返回JapaneseImperialCalendar对象if ("th".equals(aLocale.getLanguage())&& ("TH".equals(aLocale.getCountry()))) {return new sun.util.BuddhistCalendar(zone, aLocale);} else if ("JP".equals(aLocale.getVariant())&& "JP".equals(aLocale.getCountry())&& "ja".equals(aLocale.getLanguage())) {return new JapaneseImperialCalendar(zone, aLocale);}// (03) 否则,返回GregorianCalendar对象return new GregorianCalendar(zone, aLocale);}当我们获取Calendar实例之后,就可以通过Calendar提供的⼀些列⽅法来操作⽇历。
Calendar日历类—使用总结1. 获取Calendar实例:可以通过调用Calendar类的静态方法getInstance(来获取一个Calendar实例。
该方法会返回一个默认时区和默认语言环境的Calendar 对象。
2.设置日期和时间:可以通过调用Calendar实例的set方法来设置日期和时间。
set方法接收两个参数,第一个参数是Calendar类的字段常量,用于指定要设置的日期或时间的字段,第二个参数是要设置的值。
3.获取日期和时间:可以通过调用Calendar实例的get方法来获取日期和时间。
get方法接收一个参数,用于指定要获取的日期或时间的字段。
可以使用Calendar类的静态字段来指定要获取的字段,比如Calendar.YEAR表示年份,Calendar.MONTH表示月份等。
4.计算日期和时间差:可以通过调用Calendar实例的add方法来计算日期和时间的差。
add 方法接收两个参数,第一个参数是Calendar类的字段常量,用于指定要计算的日期或时间的字段,第二个参数是要添加或减去的值。
5.格式化日期和时间:可以通过调用Calendar实例的getTime方法将Calendar对象转换为Date对象,然后使用SimpleDateFormat类来格式化日期和时间。
SimpleDateFormat类提供了一系列用于格式化日期和时间的方法,比如format方法用于将日期和时间格式化为指定的字符串,parse方法用于将字符串解析为日期和时间。
在实际使用Calendar类时,可以根据具体需求灵活运用上述方法。
以下是一些常见的使用场景:1.获取当前日期和时间:可以通过调用Calendar.getInstance(方法获取一个表示当前日期和时间的Calendar对象,然后使用get方法获取年、月、日、时、分、秒等字段的值。
2.计算日期和时间差:可以通过调用Calendar.getInstance(方法获取两个Calendar对象,然后使用getTimeInMillis方法获取两个日期和时间的毫秒数差,再将毫秒数差转换为天、小时、分钟、秒等单位。
jqueryeasyui时间控件的使⽤⼀、⽇期控件datebox原⽂链接:基本⽤法:1)加⼊⽇期选择框$("#dd").datebox({"required":true});2) javascript获取⽇期选择框的值$("#dd").datebox("getValue"); 或者$("input[name='dd']").val();那么我们可以给它添加⼀个事件监听,在datebox onSelect ⽇期选中后,⾃动为input id="dd" type="text"赋值,然后我们就可以使⽤$("#dd").val()获取选中的⽇期值了。
<script type="text/javascript">$(document).ready(function(){$("#dd").datebox({required:true,onSelect: function(date){$("#dd").val(date);}});});</script>3) javascript设置datebox的值$("#dd").datebox("setValue", "2012-01-01");例:添加编辑页⾯@Html.Hidden("hBirthDate", Model.BirthDate.ToString("yyyy-MM-dd"))$(document).ready(function () {$("#BirthDate").datebox({required: false,formatter: function (date) { return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(); },parser: function (date) { return new Date(Date.parse(date.replace(/-/g, "/"))); },onSelect: function (date) {$("#BirthDate").val(date);}});//处理⽇期格式问题if ($("#hBirthDate").val() != "" && $("#hBirthDate").val() != "0001-01-01") {$("#BirthDate").datebox("setValue", $("#hBirthDate").val());} else {$("#BirthDate").datebox("setValue", ((new Date()).getFullYear() - 25) + "-01-01");}});⼆、时间控件datetimebox⽤法和⽇期控件类似实现开始⽇期和结束⽇期的判断和赋值绑定脚本:<script type="text/javascript">$(document).ready(function(){$("#StartDT").datetimebox({required: false,formatter: function (date) {var y = date.getFullYear();var m = date.getMonth() + 1;var d = date.getDate();var hh = date.getHours();var mm = date.getMinutes();var ss = date.getSeconds();return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + (ss < 10 ? ('0' + ss) : ss); },parser: function (date) { return new Date(Date.parse(date.replace(/-/g, "/"))); },onSelect: function (date) {$("#StartDT").val(date);var startDate = date;var endDate = $('#EndDT').val();if ((new Date(startDate)).dateDiff(endDate) > 0) {var y = date.getFullYear();var m = date.getMonth() + 1;var d = date.getDate();var hh = date.getHours();var mm = date.getMinutes();var ss = date.getSeconds();var dateStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + (ss < 10 ? ('0' + ss) : ss); $("#EndDT").datetimebox('setValue', dateStr);}}});$("#EndDT").datetimebox({required: false,formatter: function (date) {var y = date.getFullYear();var m = date.getMonth() + 1;var d = date.getDate();var hh = date.getHours();var mm = date.getMinutes();var ss = date.getSeconds();return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + (ss < 10 ? ('0' + ss) : ss);},parser: function (date) { return new Date(Date.parse(date.replace(/-/g, "/"))); },onSelect: function (date) {$("#EndDT").val(date);var startDate = $("#StartDT").val();var endDate = date;if ((new Date(startDate)).dateDiff(endDate) > 0) {var y = date.getFullYear();var m = date.getMonth() + 1;var d = date.getDate();var hh = date.getHours();var mm = date.getMinutes();var ss = date.getSeconds();var dateStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + (ss < 10 ? ('0' + ss) : ss); $("#StartDT").datetimebox('setValue', dateStr);}}});//时间赋值if ($("#ModelStartDT").val() != "") {$("#StartDT").datetimebox("setValue", $("#ModelStartDT").val());}if ($("#ModelEndDT").val() != "") {$("#EndDT").datetimebox("setValue", $("#ModelEndDT").val());}});</script>使⽤的⾃定义⽅法dateDiff相关的时间验证jQuery.validator.addMethod("nowtime", function (value, element) {if (this.optional(element)) return true;var assigntime = value;var deadlinetime = new Date();var reg = new RegExp('-', 'g');assigntime = assigntime.replace(reg, '/');//正则替换assigntime = new Date(parseInt(Date.parse(assigntime), 10));deadlinetime = new Date(parseInt(Date.parse(deadlinetime), 10));if (assigntime < deadlinetime) {return false;} else {return true;}}, "不能⼩于当前时间!");$.validator.addMethod("mintime", function (value, element, para) {if (this.optional(element)) return true;var assigntime = value;var deadlinetime = para;var reg = new RegExp('-', 'g');assigntime = assigntime.replace(reg, '/');//正则替换deadlinetime = deadlinetime.replace(reg, '/');assigntime = new Date(parseInt(Date.parse(assigntime), 10));deadlinetime = new Date(parseInt(Date.parse(deadlinetime), 10));if (assigntime < deadlinetime) {return false;} else {return true;}}, "结束时间必须⼤于开始时间");$.validator.addMethod("maxtime", function (value, element, para) {if (this.optional(element)) return true;var assigntime = value;var deadlinetime = para;var reg = new RegExp('-', 'g');assigntime = assigntime.replace(reg, '/');//正则替换deadlinetime = deadlinetime.replace(reg, '/');assigntime = new Date(parseInt(Date.parse(assigntime), 10));deadlinetime = new Date(parseInt(Date.parse(deadlinetime), 10)); if (assigntime > deadlinetime) {return false;} else {return true;}}, "开始时间必须⼩于结束时间");。
Calendar⽇历类—使⽤总结简述Calendar⽇历类public abstract class Calendar implements Serializable, Cloneable, Comparable<Calendar> 该类被abstract修饰,不能被new的⽅式实例。
Calendar提供了⼀个⽅法—getInstance,获得此类型的⼀个通⽤的对象,getInstance⽅法返回⼀个Calendar对象(该对象为Calendar⼦类对象)。
Calendar calendar = Calendar.getInstance(); 为了更加便捷的对⽇期进⾏操作,Calendar类对YEAR、MONTH、DAY_OF_MONTH、HOUR等⽇历字段直接转换提供了⼀些⽅法,并为操作⽇历字段提供了⼀些⽅法。
测试:@Testpublic void test(){Calendar calendar =Calendar.getInstance();SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");System.out.print(sdf.format(calendar.getTime()));} 结果:2019-07-03 —— 当前⽇期Calendar还提供了⼀些常⽤⽅法 Calendar calendar = null; @Before public void init(){ calendar =Calendar.getInstance();}@Testpublic void test(){calendar =Calendar.getInstance(); //实例⼀个⽇历//获取当前的⽇期int year = calendar.get(Calendar.YEAR);System.out.print(year+"年"); //获得当前年份int monday = calendar.get(Calendar.MONDAY);System.out.print((monday+1)+"⽉"); //获得⽉份,减⼀,需要得到真正的⽉份需要+1int week = calendar.get(Calendar.WEEK_OF_YEAR);System.out.print(week+"周"); //获得当前周int day = calendar.get(Calendar.DAY_OF_MONTH);System.out.print(day+"⽇"); //获得当前天数int hour = calendar.get(Calendar.HOUR);System.out.print(hour+"时"); //获得⼩时int minute = calendar.get(Calendar.MINUTE);System.out.print(minute+"分"); //获得分钟int second = calendar.get(Calendar.SECOND);System.out.print(second+"秒"); //获得秒钟}@Testpublic void test2(){//设置时间//对指定的年份做处理//calendar.add(Calendar.YEAR,-1);//指定⼀个⽉份int currmonday = 10;System.out.println(Calendar.MONTH);System.out.println(Calendar.DAY_OF_MONTH);//固定⼀个时间点,我们找的是10⽉份的最后⼀天,但是MONTH的设置,⽉份会⽐我们设置的⽉份⼤⼀个⽉calendar.set(calendar.get(Calendar.YEAR),currmonday,1);//使⽤add⽅法设置将刚才我们设置的天数1少⼀天calendar.add(Calendar.DATE,-1);System.out.println(calendar.get(Calendar.MONTH));System.out.println(calendar.get(Calendar.DATE));}Calendar类中还有许多⽅法如claer()、compareTo()、等Calendar calendar = null;@Beforepublic void init(){calendar =Calendar.getInstance();}@Testpublic void test(){calendar =Calendar.getInstance(); //实例⼀个⽇历//获取当前的⽇期int year = calendar.get(Calendar.YEAR);System.out.print(year+"年"); //获得当前年份int monday = calendar.get(Calendar.MONDAY);System.out.print((monday+1)+"⽉"); //获得⽉份,减⼀,需要得到真正的⽉份需要+1int week = calendar.get(Calendar.WEEK_OF_YEAR);System.out.print(week+"周"); //获得当前周int day = calendar.get(Calendar.DAY_OF_MONTH);System.out.print(day+"⽇"); //获得当前天数int hour = calendar.get(Calendar.HOUR);System.out.print(hour+"时"); //获得⼩时int minute = calendar.get(Calendar.MINUTE);System.out.print(minute+"分"); //获得分钟int second = calendar.get(Calendar.SECOND);System.out.print(second+"秒"); //获得秒钟}@Testpublic void test2(){//设置时间//对指定的年份做处理//calendar.add(Calendar.YEAR,-1);//指定⼀个⽉份int currmonday = 10;System.out.println(Calendar.MONTH);System.out.println(Calendar.DAY_OF_MONTH);//固定⼀个时间点,我们找的是10⽉份的最后⼀天,但是MONTH的设置,⽉份会⽐我们设置的⽉份⼤⼀个⽉calendar.set(calendar.get(Calendar.YEAR),currmonday,1);//使⽤add⽅法查找到calendar.add(Calendar.DATE,-1);System.out.println(calendar.get(Calendar.MONTH));System.out.println(calendar.get(Calendar.DATE));//得到最⼤⽉份System.out.println(calendar.getActualMaximum(currmonday)+1);}。
el-calendar组件工作日判断逻辑摘要:1.el-calendar 组件简介2.工作日判断逻辑的实现方法3.实际应用案例正文:一、el-calendar 组件简介el-calendar 是Element UI 中的一个日历组件,可以方便地在Vue 项目中使用。
它提供了一系列属性和事件,可以满足各种定制需求。
在众多属性和事件中,有一个名为“工作日”的属性,可以用来设置某一天是否为工作日。
那么,如何实现这个“工作日”判断逻辑呢?二、工作日判断逻辑的实现方法1.首先,我们需要知道一年中的工作日数量。
在我国,一般情况下,一周工作五天,休息两天。
所以,一年中的工作日数量为52 周* 5天/周= 260 天。
2.其次,我们需要知道一年中的法定节假日数量。
我国的法定节假日包括元旦、春节、清明节、劳动节、端午节、中秋节和国庆节。
这些节日的具体天数可能会有所变动,因此需要根据实际情况来确定。
3.接下来,我们需要知道每个月的具体天数。
一般情况下,每个月的天数是固定的,但需要注意2 月和4 月等月份的天数差异。
4.根据以上信息,我们可以编写一个函数来判断某一天是否为工作日。
这个函数需要接收一个日期参数,然后根据日期来判断这一天是否为工作日。
具体的判断逻辑如下:(1)判断这一天是否为法定节假日。
如果是,那么这一天不是工作日。
(2)判断这一天是否为周末。
如果是,那么这一天不是工作日。
(3)如果这一天既不是法定节假日,也不是周末,那么这一天就是工作日。
三、实际应用案例在实际使用中,我们可以通过以下方式来设置el-calendar 组件的工作日判断逻辑:```javascript// 设置默认的工作日判断逻辑this.calendar.工作日= (time) => {// 判断这一天是否为法定节假日const holiday = this.getHoliday(time);if (holiday) {return false;}// 判断这一天是否为周末const weekend = this.isWeekend(time);if (weekend) {return false;}// 如果这一天既不是法定节假日,也不是周末,那么这一天就是工作日return true;};```通过以上代码,我们可以实现el-calendar 组件的工作日判断逻辑。
日期
课程目标
∙了解DateBox、DateTimeBox和Calendar的基本属性、方法和事件
∙灵活掌握日期的相关操作
DateBox
DateBox简介
日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。
选择的日期会自动转变为一个有效的日期然后填充到文本框中。
选定的日期也可以被格式化为预定格式。
效果如下图:
开发DateBox程序
复制
参考代码:
效果如上图。
DateBox常用属性
DateBox常用方法
DateBox常用事件
案例一:设置指定的日期
复制
参考代码:
效果如下图:
案例二:设置日期范围复制
参考代码:
效果如下图:
案例三:修改日期样式复制。
Calendar使⽤-显⽰特定节⽇样式2.0⾥⽤Calendar控件做带节⽇提⽰的⽇历2007-9-4 17:01:07 已被阅读: 176 【字号:⼤中⼩】1、建⽴⽹页CalendarThree.aspx,代码如下:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CalendarThree.aspx.cs" Inherits="CalendarThree" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml" ><head runat="server"><title>⽆标题页</title></head><body><form id="form1" runat="server"><div><asp:Calendar ID="Calendar1" runat="server" OnDayRender="Calendar1_DayRender" Height="206px" Width="369px"></asp:Cal endar></div></form></body></html>2、CalendarThree.aspx.cs代码如下:using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class CalendarThree : System.Web.UI.Page{String[][] holidays = new String[13][];protected void Page_Load(object sender, EventArgs e){for (int n = 0; n < 13; n++)holidays[n] = new String[32];holidays[1][1] = "元旦";holidays[2][14] = "情⼈节";holidays[3][8] = "妇⼥节";holidays[3][12] = "植树节";holidays[4][1] = "愚⼈节";holidays[5][1] = "劳动节";holidays[5][4] = "青年节";holidays[5][12] = "护⼠节";holidays[5][14] = "母亲节";holidays[5][14] = "助残⽇";holidays[6][1] = "国际⼉童节";holidays[6][5] = "环境保护⽇";holidays[6][18] = "⽗亲节";holidays[6][26] = "国际禁毒⽇";holidays[7][1] = "中共诞⾠";holidays[8][1] = "建军节";holidays[9][10] = "教师节";holidays[10][1] = "国庆节";holidays[11][23] = "感恩节";holidays[12][1] = "艾滋病⽇";holidays[12][12] = "西安事变";holidays[12][25] = "圣诞节";}protected void Calendar1_DayRender(object sender, DayRenderEventArgs e){CalendarDay d = ((DayRenderEventArgs)e).Day;TableCell c = ((DayRenderEventArgs)e).Cell;if (e.Day.IsOtherMonth){e.Cell.Controls.Clear();}else{try{string Hol = holidays[e.Day.Date.Month][e.Day.Date.Day];if (Hol != string.Empty)e.Cell.Controls.Add(new LiteralControl("<br><font color=blue size=2>" + Hol + "</font>"));}catch (Exception exc){Response.Write(exc.ToString());}}}}3、运⾏的效果如下:----------------------------------------------------------------------⽰例2、Calendar控件的基本⽤法(实现⽇期格式变换和定制节⽇)using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class _Default : System.Web.UI.Page{private string [,] holiday=new string[12,31];//定义⼀个数组显⽰⼀年365天protected void Page_Load(object sender, EventArgs e){holiday[8, 2] = ”我靠,我成功了!";//令8⽉2⽇为特殊纪念⽇}//⽇期选择格式protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e){string a = this.DropDownList1.SelectedValue;//a列表中选定项的值switch (a){case "day":this.Calendar1.SelectionMode=CalendarSelectionMode.Day;//Calendar控件上选择单个⽇期break;case "month":this.Calendar1.SelectionMode = CalendarSelectionMode.DayWeekMonth;//Calendar控件上选择单个⽇期,周或者⽉break;case "week":this.Calendar1.SelectionMode = CalendarSelectionMode.DayWeek;//Calendar控件上选择单个⽇期或者整周break;case "none":this.Calendar1.SelectionMode = CalendarSelectionMode.None;//Calendar控件上不能选择任何⽇期break;}}protected void Calendar1_DayRender(object sender, DayRenderEventArgs e){CalendarDay d;//d为控件中的⽇期TableCell c;//c为控件中的单元格d = e.Day;//获取Calendar控件中的⽇期的CalendarDay对象c = e.Cell;if (d.IsOtherMonth)c.Controls.Clear();//从当前服务器的System.Web.UI.ControlCollection对象中移除所有控件elsetry{string Hol;Hol = holiday[d.Date.Month,d.Date.Day];//获取此实例表⽰⽇期的⽉和⽇期if(Hol!="")c.Controls.Add(new LiteralControl("<br> <font color=red>" + Hol+"</font>"));//将指定的System.Web.UI.Control对象添加到集合,并⽤指定的⽂本初始化System.Web.UI.LiteralControl类的新实例 }catch(Exception exc)//捕获错误信息{Response.Write(exc.Message);}}。
Calendar⽇历⼩程序//有待完善,有点bugpackage com.sunshine.framework.calendar.model;import java.util.Calendar;/**** <p>* 描述该类情况 {@link 代表跟谁有关系}* </p>** @author 王超* @since 1.0* @date 2016年10⽉20⽇下午8:19:15* @see 新建|修改|放弃* @see com.sunshine.framework.calendar.model.CalendarBean*/public class CalendarBean {String day[];int year = 2005, month = 0;public String[] getCalendar() {String a[] = new String[42];// 获取⽇历的实例对象Calendar date = Calendar.getInstance();// 设置⽇历⽇期date.set(this.year, this.month - 1, 1);// 获取周数int week = date.get(Calendar.DAY_OF_WEEK);int day = 0;// 判断⼤⽉份if (this.month == 1 || this.month == 3 || this.month == 5 || this.month == 7 || this.month == 8 || this.month == 10 || this.month == 12) {day = 31;}// 判断⼩⽉if (this.month == 4 || this.month == 6 || this.month == 9 || this.month == 11) {day = 30;}// 单独判断2⽉if (this.month == 2) {// 判断是闰年能被4或400整除但不能被100整除if ((this.year % 4 == 0) || (this.year % 100 != 0) || (this.year % 400 == 0)) {day = 29;} else {day = 28;}}for (int i = week, n = 1; i < week + day; i++) {a[i] = String.valueOf(n);n++;}return a;}public int getMonth() {return this.month;}public int getYear() {return this.year;}public void setMonth(int month) {this.month = month;}public void setYear(int year) {this.year = year;}}package com.sunshine.framework.calendar;import java.awt.BorderLayout;import java.awt.GridLayout;import java.awt.ScrollPane;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import javax.swing.JButton;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JPanel;import javax.swing.JTextField;import com.sunshine.framework.calendar.model.CalendarBean;/**** <p>* 描述该类情况 {@link 代表跟谁有关系}* </p>** @author 王超* @since 1.0* @date 2016年10⽉20⽇下午8:41:58* @see 新建|修改|放弃* @see com.sunshine.framework.calendar.CalendarFrame*/public class CalendarFrame extends JFrame implements ActionListener { /***/private static final long serialVersionUID = 1L;JButton button = new JButton();CalendarBean calendar;JLabel labelDay[] = new JLabel[42];JLabel lbl1 = new JLabel("请输⼊年份:");JLabel lbl2 = new JLabel("");String name[] = { "⽇", "⼀", "⼆", "三", "四", "五", "六" };JButton nextMonth, previousMonth;JLabel showMessage = new JLabel("", JLabel.CENTER);JTextField text = new JTextField(10);JButton titleName[] = new JButton[7];int year = 1996, month = 1;public CalendarFrame() {JPanel pCenter = new JPanel();// 将pCenter的布局设置为7⾏7列的GridLayout布局pCenter.setLayout(new GridLayout(7, 7));// pCenter添加组件titleName[i]for (int i = 0; i < 7; i++) {// 把星期值存⼊到titleName数组⾥this.titleName[i] = new JButton([i]);}// pCenter添加组件labelDay[i]for (int i = 0; i < 42; i++) {belDay[i] = new JLabel("", JLabel.CENTER);pCenter.add(belDay[i]);}this.text.addActionListener(this);this.calendar = new CalendarBean();this.calendar.setYear(this.year);this.calendar.setMonth(this.month);String day[] = this.calendar.getCalendar();for (int i = 0; i < 42; i++) {belDay[i].setText(day[i]);}this.nextMonth = new JButton("下⽉");this.previousMonth = new JButton("上⽉");this.button = new JButton("确定");// 注册监听器this.nextMonth.addActionListener(this);this.previousMonth.addActionListener(this);this.button.addActionListener(this);JPanel pNorth = new JPanel(), pSouth = new JPanel();pNorth.add(this.showMessage);pNorth.add(this.lbl2);pNorth.add(this.previousMonth);pNorth.add(this.nextMonth);pNorth.add(this.lbl1);pNorth.add(this.text);pNorth.add(this.button);this.showMessage.setText("⽇历:" + this.calendar.getYear() + "年" + this.calendar.getMonth() + "⽉"); ScrollPane scrollPane = new ScrollPane();scrollPane.add(pCenter);// 窗⼝添加scrollPane在中⼼区域add(scrollPane, BorderLayout.CENTER);// 窗⼝添加pNorth 在北⾯区域add(pNorth, BorderLayout.NORTH);// 窗⼝添加pSouth 在南区域。
源码如下:1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>Basic Calendar - jQuery EasyUI Demo</title> 6.<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7.<link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8.<link rel="stylesheet" type="text/css" href="../demo.css"> 9.<script type="text/javascript" src="../../jquery.min.js"></script> 10.<script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11.</head> 12.<body> 13.<h2>Basic Calendar</h2> 14.<p>Click to select date.</p> 15.<div style="margin:20px 0"></div> 16.<div class="easyui-calendar" style="width:250px;height:250px;"></div> 17.18.</body> 19.</html>源码如下:1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>First Day of Week - jQuery EasyUI Demo</title> 6.<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7.<link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8.<link rel="stylesheet" type="text/css" href="../demo.css"> 9.<script type="text/javascript" src="../../jquery.min.js"></script> 10.<script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11.</head> 12.<body> 13.<h2>First Day of Week</h2> 14.<p>Choose the first day of the week.</p> 15.16.<div style="margin:20px 0"> 17.<select onchange="$('#cc').calendar({firstDay:this.value})"> 18.<option value="0">Sunday</option> 19.<option value="1">Monday</option> 20.<option value="2">Tuesday</option>Calendar 日历控件基本基本实现实现自定自定义义星期几作星期几作为为日历排列的第一天 设置星期几作为日历显示中的第一天.Sunday21.<option value="3">Wednesday</option> 22.<option value="4">Thursday</option> 23.<option value="5">Friday</option> 24.<option value="6">Saturday</option> 25.</select> 26.</div> 27.28.<div id="cc" class="easyui-calendar" style="width:250px;height:250px;"></div> 29.</body> 30.</html>源码如下:1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>Custom Calendar - jQuery EasyUI Demo</title> 6.<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7.<link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8.<link rel="stylesheet" type="text/css" href="../demo.css"> 9.<script type="text/javascript" src="../../jquery.min.js"></script> 10.<script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11.</head> 12.<body> 13.<h2>Custom Calendar</h2> 14.<p>This example shows how to custom the calendar date by using 'formatter' function.</p> 15.<div style="margin:20px 0"></div> 16.17.<div class="easyui-calendar" style="width:250px;height:250px;" data-options="formatter:formatDay"></div> 18.19.<script> 20.var d1 = Math.floor((Math.random()*30)+1); 21.var d2 = Math.floor((Math.random()*30)+1); 22.function formatDay(date){ 23.var m = date.getMonth()+1; 24.var d = date.getDate(); 25.var opts = $(this).calendar('options'); 26.if (opts.month == m && d == d1){ 27.return '<div class="icon-ok md">' + d + '</div>'; 28.} else if (opts.month == m && d == d2){ 29.return '<div class="icon-search md">' + d + '</div>'; 30.} 31.return d; 32.} 33.</script> 34.<style scoped="scoped"> 35..md { 36.height: 16px; 37.line-height: 16px; 38.background-position: 2px center; 39.text-align: right; 40.font-weight: bold; 41.padding: 0 2px; 42.color: red; 43.} 44.</style> 45.</body> 46.</html>自定自定义义日历控件用'formatter'来自定义日历的显示.可以设计出自己喜欢的日历控件哦 禁用禁用选选中指定日期只允许用户选择指定的日期,这里演示只允许用户选择星期一.源码如下:1.<!DOCTYPE html>2.<html>3.<head>4. <meta charset="UTF-8">5. <title>Disable Calendar Date - jQuery EasyUI Demo</title>6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">8. <link rel="stylesheet" type="text/css" href="../demo.css">9. <script type="text/javascript" src="../../jquery.min.js"></script>10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>11.</head>12.<body>13. <h2>Disable Calendar Date</h2>14. <p>This example shows how to disable specified dates, only allows the user to select Mondays.</p>15. <div style="margin:20px 0"></div>16.17. <div class="easyui-calendar" style="width:250px;height:250px;" data-options="18. validator: function(date){19. if (date.getDay() == 1){20. return true;21. } else {22. return false;23. }24. }25. "></div>26.27.</body>28.</html>今年第几周显示选中日期是今年的第几周.源码如下:1.<!DOCTYPE html>2.<html>3.<head>4. <meta charset="UTF-8">5. <title>Week Number on Calendar - jQuery EasyUI Demo</title>6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">8. <link rel="stylesheet" type="text/css" href="../demo.css">9. <script type="text/javascript" src="../../jquery.min.js"></script>10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>11.</head>12.<body>13. <h2>Week Number on Calendar</h2>14. <p>This example shows how to display the week number on calendar.</p>15. <div style="margin:20px 0"></div>16. <div class="easyui-calendar" showWeek="true" weekNumberHeader="Wk" style="width:250px;height:250px;"></div>17.18.</body>19.</html>流体布局。