${i18n("header.title")}

Jquery datepicker 时间插件使用 js 时间相加,相减 

    $(document).ready(function(){
        //输入框事件
        $('#probation').bind('input propertychange', function() {
            var induction = $("#induction").val();//取出时间
            if (""==induction||null==induction||undefined==induction){
                return alert("请先输入入职日期");
            }
            var addDate =new Date(induction);
            var probation = $("#probation").val();//取出输入值
            var newDate = DateAdd(probation,addDate);
            //初始化值
            $('#inDueForm').val(date_riqi(newDate,0))
        });
        //日期选择事件(此处为转正日期)
        $("#inDueForm").on("hide.uk.datepicker", function (event)
        {
            var init = $(this).val();
            var induction = $("#induction").val();//取出入职时间
            if (""==induction||null==induction||undefined==induction){
                return alert("请先输入入职日期");
            }
            var probation=  DateDiff(init,induction);
            $("#probation").val(probation);//设置试用期输入值
        });
    });

 

        <div class="uk-form-row">
            <label class="uk-form-label" for="induction">入职时间(必填)</label>
            <div class="uk-form-controls">
                <input name="induction" data-uk-datepicker="{format:'YYYY-MM-DD'}" id="induction" value="" >
            </div>
        </div>
        <div class="uk-form-row">
            <label class="uk-form-label" for="probation">试用期</label>
            <div class="uk-form-controls">
                <input id="probation" name="probation" value=""  placeholder="" type="number">
            </div>
        </div>
        <div class="uk-form-row">
            <label class="uk-form-label" for="inDueForm">转正时间</label>
            <div class="uk-form-controls">
                <input id="inDueForm" data-uk-datepicker="{format:'YYYY-MM-DD'}" name="inDueForm"  value="">
            </div>
        </div>

上面js用到的方法如下:可以放到utils里面

 

 

微信公众号:

 

//日期格式
function date_riqi(date,flag){
    /**
     *flag =0 返回 yyyy-mm-dd
     *flag =1 返回 yyyy-mm-dd hh:mm:ss
     *flag =2 返回 yyyy-mm-dd hh:mm:ss.ms
     */

    if(typeof(date) == "undefined"){
        return "";
    }
    var date = new Date(date);
    var str_date="";
    var month=(date.getMonth()+1);
    month=month<10?"0"+month:month;
    var day = date.getDate();
    day = day<10?"0"+day:day;
    var hour = date.getHours();
    hour = hour<10?"0"+hour:hour;
    var minutes = date.getMinutes();
    minutes = minutes<10?"0"+minutes:minutes;
    var seconds = date.getSeconds();
    seconds = seconds<10?"0"+seconds:seconds;
    var ms = date.getMilliseconds();
    ms = ms<10?"00"+ms:ms<100?"0"+ms:ms;
    if (flag==0){
        str_date=date.getFullYear()+"-"+month+"-"+day;
    }
    if (flag==1){
        str_date=date.getFullYear()+"-"+month+"-"+day+
            " "+hour+":"+minutes+":"+seconds;
    }
    if (flag==2){date.getMinutes()
        str_date=date.getFullYear()+"-"+month+"-"+day+
            " "+hour+":"+minutes+":"+seconds+"."+ms;
    }
    return str_date;
}
//时间加天
function DateAdd(number, date) {
    date.setDate(date.getDate() + Number(number));
    return date;
}
//返回相差天数
var DateDiff=function (sDate1, sDate2) {  //sDate1和sDate2是yyyy-MM-dd格式

    var aDate, oDate1, oDate2, iDays;
    aDate = sDate1.split("-");
    oDate1 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]);  //转换为yyyy-MM-dd格式
    aDate = sDate2.split("-");
    oDate2 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]);
    iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数

    return iDays;  //返回相差天数
};
View Code

当然还要加载插件:(html head)

    <head>
        <title></title>
        <meta charset="UTF-8">
        <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
        <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/uikit/2.27.2/js/uikit.min.js"></script>
        <link href="https://cdn.bootcss.com/uikit/2.27.2/css/components/datepicker.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/uikit/2.26.4/js/components/datepicker.js"></script>
 
    </head>
View Code

 

posted @ 2016-12-04 19:30  ldp.im  阅读(561)  评论(0)  编辑  收藏  举报