• 基于jquery 的dateRangePicker 和 My97DatePicker


    引入相应的date插件

    <script type="text/javascript" src="../plugins/daterangepicker/moment.min.js"></script>    日期范围插件
    <script type="text/javascript" src="../plugins/daterangepicker/jquery.daterangepicker.js"></script>  日期范围插件
    <link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css" type="text/css" />    
    <script type="text/javascript" src="<c:url value="/js/My97DatePicker/WdatePicker.js"/>"></script> 单日历插件
        

    在html中引入 input作为日期选择 多个双日历

    <input type="text" name="time1" id="DateSearch" class="rangeA" style=" 180px; border: 1px solid #A9A9A9;" />
    
    <input type="text" name="time2" id="DateSearch" class="rangeA" style=" 180px; border: 1px solid #A9A9A9;" />

    单日历 my97

    <input name="date" type="text" onfocus="selectDate()" />

    对应的js控制 

    //单日历控制
         function selectDate() {
             WdatePicker({ dateFmt: 'yyyy-MM-dd', isShowToday: false, isShowClear: false});
          }
    //双日历需分开单独初始化
        var dateFormatjson = {
              startOfWeek: 'monday',
              separator : ' -- ',
              format: 'YYYY-MM-DD',
              autoClose: true,
              language:'en',
              time: {enabled: true}
          };
          $('#DateSearch').dateRangePicker(dateFormatjson);
          $('#DateSearch').dateRangePicker(dateFormatjson);
    

      

    http://www.daterangepicker.com/#options    双日历详细设置详见改地址

    https://blog.csdn.net/u011109420/article/details/51330608   单日历参数设置,语言切换等;

  • 相关阅读:
    每日编程-20170322
    每日编程-20170321
    C++primer拾遗(第七章:类)
    每日编程-20170320
    uniApp之 顶部选项卡
    vue 服务端渲染 vs 预渲染(1)
    uni-app学习笔记
    如何解决vue跨域的问题
    简单整理数组的用法
    vue-cli
  • 原文地址:https://www.cnblogs.com/xhliang/p/9006985.html
Copyright © 2020-2023  润新知