Wdatepicker日期控件

js 专栏收录该内容
3 篇文章 0 订阅

My97DatePicker是很不错的一个日期选择插件,体积只有几十k但是功能非常强大,能满足很多苛刻的要求。
官网:http://www.my97.net/

各目录及文件的用途:

这里写图片描述

目录lang 存放语言文件
目录skin 存放皮肤的相关文件
calendar.js 日期库主文件
WdatePicker.js 配置文件,在调用的地方仅需使用该文件

调用模式

触发WdatePicker函数来调用弹出日期框

<div >
    <div >
        <div >
        <input id="startTime" placeholder="开始时间" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',onpicking:timeJs.initTime, onpicked : timeJs.chgTime, minDate: 'new Date()', maxDate:'#F{$dp.$D(\'endTime\',{s:-1});}'})" />
        <i></i>
    </div>
    <span ></span>
    <div >
        <input id="endTime" placeholder="结束时间" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',onpicking:timeJs.initTime,onpicked :timeJs.chgTime, minDate:'#F{$dp.$D(\'startTime\',{s:1})||\'new Date()\';}'})"/>
        <i></i>
    </div>
</div>

注:onpicking(选择前) 和 onpicked(选择后) 为自定义事件函数

var timeJs = {
    startTimePreValue:"",
    endTimePreValue:"",     
    //记录原值
    initTime:(function() {
        var id=$(this).attr("id").trim();
        if(id=="startTime"){
            timeJs.startTimePreValue=$(this).val();
        }else if(id=="endTime"){
            timeJs.endTimePreValue=$(this).val();
        }
    }),

    chgTime:(function() {
        var time=$(this).val();
        var pretime="";
        //判断是否与前值相同
        var id=$(this).attr("id").trim();
        if(id=="startTime" ){
            if(timeJs.startTimePreValue==time){
                return false;
            }else{
                pretime=timeJs.startTimePreValue;
            }
        }else if(id=="endTime"){
            if(timeJs.endTimePreValue==time){
                return false;
            }else{
                pretime=timeJs.endTimePreValue;
            }
        }
        layer.confirm('调整时间,需重新执行操作,是否需要调整?', {
            title:'温馨提示',//title:false 不显示标题
            btn: ['确定','取消'] //按钮
        }, function(index){
            layer.close(index);
        }, function(){
            //内置函数 $dp.$ 相当于 document.getElementById 
            $dp.$(id).value=pretime;
        });
    })  
}
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值