IT职涯

一个多年的IT人的博客
随笔 - 33, 文章 - 0, 评论 - 189, 阅读 - 18万
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

1. 加入calendar的准备工作

我们使用了datepicker来加入calendar,要想使用datepicker,就需要引用jquery包,我们引用了jquery-1.5.1.min.js和jquery-ui.min.js,并引用jquery-ui.css加入样式。

2. html

<input type="text" readonly="readonly" id="datepicker"/>

3. 本地化

默认的jquery中只有英文, 没有中文,要本地话,需要引入新的文件jquery.ui.datepicker-zh-CN.js

4. jquery, 加入calendar,并设置可选范围为从当前日期开始的7天内(带有中英文)

$(document).ready(function() {
        setDatePicker('datepicker','datepicker');

      function setDatePicker(triggerId,altField){
            var lang = "${currentLanguage eq 'zh' ? 'zh-CN' : ''}";
            $.datepicker.setDefaults($.datepicker.regional[lang]);
            $("#" + triggerId).datepicker({
                altField:"#" + triggerId,
                altFormat:"yy-mm-dd",
                changeMonth:true,
                changeYear:false,
              closeText: "X",
              minDate: 0,
                maxDate:+6,
                navigationAsDateFormat: true,
                selectOtherMonths: false,
                showOn: "button",
                buttonImage: "calendar.gif",
                buttonImageOnly: false ,
                buttonText: ""
        });
    }  
});

5. 使2013/1/1, 2013/1/2不可选,加入beforeShowDay,使每个日期在显示前都执行这个方法过滤,返回[false, 'CLOSED']为不可用

$(document).ready(function() {
        setDatePicker('datepicker','datepicker');   

    function setDatePicker(triggerId,altField){
            var lang = "${currentLanguage eq 'zh' ? 'zh-CN' : ''}";
            $.datepicker.setDefaults($.datepicker.regional[lang]);
            $("#" + triggerId).datepicker({
                altField:"#" + triggerId,
                altFormat:"yy-mm-dd",
                changeMonth:true,
                changeYear:false,
              closeText: "X",
                minDate: 0,
                maxDate:+6,
                navigationAsDateFormat: true,
                selectOtherMonths: false,
                showOn: "button",
                buttonImage: "calendar.gif",
                buttonImageOnly: false ,
              buttonText: "",
                beforeShowDay: function(date) {
                  var days = [[1,1,2013],[1,2,2013]];
                  for(i=0; i<days.length; i++){                    
                      if(date.getDate()==days[i][1] && date.getMonth()==days[i][0]-1 && date.getFullYear()==days[i][2]){
                          return [false, 'CLOSED'];
                      }
                  }                
                  return [true, ''];                                
              }
        });
    }  
});

 

 

编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
点击右上角即可分享
微信分享提示