zoukankan      html  css  js  c++  java
  • kendoDatePicker日期选择控件

    1.普通的日期选择控件

    $("#datePicker").kendoDatePicker({
        value:new Date(),  //默认日期为今日
        format:'yyyy-MM-dd',
        min:'2017-01-31',
        max:'2019-02-20'
    }) 

    2.只选择到年

    $("#datePicker").kendoDatePicker({
        value:'2019',
        start:'decade',
        depth:'decade',
        format:'yyyy',
        dateInput:true
    })

    3.只选择到月

    $("#datePicker").kendoDatePicker({
        value:'2018-03',
        start:'year',
        depth:'year',
        format:'yyyy-MM',
        dateInput:true
    })

    3.时间范围问题

    HTML部分:

    <input type="text" name="time1" id="time1">
    <input type="text" name="time2" id="time2">

    JavaScript部分:

                 var start = $("#time1").kendoDatePicker({
                        format:'yyyy-MM-dd',
                        change: startChange
                    }).data("kendoDatePicker");
    
                    var end = $("#time2").kendoDatePicker({
                        format:'yyyy-MM-dd',
                        change: endChange
                    }).data("kendoDatePicker");
    
                    start.max(end.value());
                    end.min(start.value());
    
                    function startChange() {
                        var startDate = start.value(),
                        endDate = end.value();
    
                        if (startDate) {
                            startDate = new Date(startDate);
                            startDate.setDate(startDate.getDate());
                            end.min(startDate);
                        } else if (endDate) {
                            start.max(new Date(endDate));
                        } else {
                            endDate = new Date();
                            start.max(endDate);
                            end.min(endDate);
                        }
                    }
    
                    function endChange() {
                        var endDate = end.value(),
                        startDate = start.value();
    
                        if (endDate) {
                            endDate = new Date(endDate);
                            endDate.setDate(endDate.getDate());
                            start.max(endDate);
                        } else if (startDate) {
                            end.min(new Date(startDate));
                        } else {
                            endDate = new Date();
                            start.max(endDate);
                            end.min(endDate);
                        }
                    }        

     效果图:

  • 相关阅读:
    承载进程 (vshost.exe)
    命令行生成解决方案
    【SQL Server】存储过程的设计概念(3)TSQL的编译和执行过程
    .NET Framework 4
    reflector最新说明
    应用程序域
    vi 编辑器的用法(2013最新整理)
    linux中查看日志的方法
    修改linux主机名的方法介绍
    如何获得桌面上任意一个位置的颜色的 rgb 或者16进制值了
  • 原文地址:https://www.cnblogs.com/zsj-02-14/p/9119160.html
Copyright © 2011-2022 走看看