zoukankan      html  css  js  c++  java
  • jquery-ui-datepicker定制化,汉化,因手机布局美观化源码修改

    感谢浏览,欢迎交流=。=


    公司微信网页需要使用日历控件,想到jquery-mobile,但是css影响页面布局,放弃后使用jquery-ui-datepicker。

    话不多说,进入正题:

    1.jqueryui官网定制化下载jquery-ui。

    只取其core+datepicker 则仅需40kb,欣喜一番,因为之前想用dialog功能,发现定制下来150多kb,太奢侈了。

    2.汉化代码

    (function () {
    $.datepicker.regional['zh-CN'] = {
    clearText: '清除',
    clearStatus: '清除已选日期',
    closeText: '关闭',
    closeStatus: '不改变当前选择',
    prevText: '<上月',
    prevStatus: '显示上月',
    prevBigText: '<<',
    prevBigStatus: '显示上一年',
    nextText: '下月>',
    nextStatus: '显示下月',
    nextBigText: '>>',
    nextBigStatus: '显示下一年',
    currentText: '今天',
    currentStatus: '显示本月',
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    monthNamesShort: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
    monthStatus: '选择月份',
    yearStatus: '选择年份',
    weekHeader: '周',
    weekStatus: '年内周次',
    dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
    dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
    dayStatus: '设置 DD 为一周起始',
    dateStatus: '选择 m月 d日, DD',
    dateFormat: 'yy-mm-dd',
    firstDay: 1,
    initStatus: '请选择日期',
    isRTL: false
    };
    jQuery(function ($) {
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
    });
    })();

    3.mobile适应性改造

    修改前效果:

    修改后效果:

    1)修改css样式
    #ui-datepicker-div {
       80%;

      table td a.ui-state-default {
        text-align: center;
      }
    }
    2)修改jquery-ui源码:如图

    4.项目中需要多次使用时间段,于是制作时间段插件

    需求:1)两个文本框分别通过datepicker录入开始日期和结束日期,联动效果需满足开始日期<结束日期

         2)开始日期一般会有最小时间限制

         3)将来可能需要限制某些天可以使用,可以使用beforeshowday配置项实现,需要时修改插件

    插件代码:

    页面调用:

    代码在GitHub上:

    整天用人家开源的,咱也开源吧:https://github.com/SoulRIver2015/jquery-plugins/tree/master/mobile/river/date-picker

  • 相关阅读:
    前插法创建带头节点的单链表
    利用Oracle数据库发送邮件
    关于如何给C#中的ListBox控件添加双击事件
    类似QQ表情的功能,包括动态绑定图片
    ASP.NET 缓存技术总结
    VS2008 快捷键大全
    Oracle 中union的用法
    C#找到Excel中的所有Sheetname的方法
    推荐一个学习XPath的网站
    Oracle游标使用大全
  • 原文地址:https://www.cnblogs.com/soulriver/p/4321273.html
Copyright © 2011-2022 走看看