jquery日历插件——laydate的使用

主要使用的是layui组件库中的laydate组件。附：

layui.laydate https://www.layui.com/laydate/

HTML部分

   <div class="card-calendar">
        <!-- 日历选择器 -->
        <input type="text" class="inputBox " readonly="" value="" id="datetimepicker" data-date-format="yyyy-mm-dd">
        <p class="minus">—</p>
        <input type="text" class="inputBox " readonly="" value="" id="datetimepicker2" data-date-format="yyyy-mm-dd">
        <!-- 日历选择器 -->
   </div>

依赖资源

  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="laydate/laydate.js"></script>

JS部分

  <!-- 日历插件 -->
  <script>
    // var value = new Date(),
    var nowValue = formatTime();
    console.log("value" + nowValue);
    var startDate = laydate.render({
      elem: '#datetimepicker',
      format: 'yyyy年MM月dd日',
      value: nowValue,
      isInitValue: true,
      theme: '#108ee9',
      trigger: 'click',
      done: function (value, date) {
        console.log(value); //得到日期生成的值，如：2017-08-18
        console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
        console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
        if (value != "") {
          date.month = date.month - 1;
          endDate.config.min = date;
        } else {
          endDate.config.min = startDate.config.min;
        }
      },
    });
    var endDate = laydate.render({
      elem: '#datetimepicker2',
      format: 'yyyy年MM月dd日',
      isInitValue: true,
      trigger: 'click',
      value: nowValue,
      theme: '#108ee9',

      done: function (value, date) {
        if (value != "") {
          date.month = date.month - 1;
          startDate.config.max = date;
        } else {
          startDate.config.max = endDate.config.max;
        }
      }
    });
  </script>

elem: input元素

format: 格式

trigger: 仅仅可以点击，不可手动输入

value:默认值

theme: 主题色

相对来说，完成的内容是区间的选择，所以在选择完成之后执行done方法，然后通过max和min的变量的赋值来控制区间的显示。

日期格式化使用

  <!-- 日期格式化 -->
  <script>
    function formatTime() {
      var newdate = new Date();
      var nowyear = newdate.getFullYear();
      var nowmonth = newdate.getMonth() + 1;
      if (nowmonth >= 1 && nowmonth <= 9) {
        nowmonth = "0" + nowmonth;
      }
      var nowDate = newdate.getDate();
      var formattime = nowyear + "年" + nowmonth + "月" + nowDate + "日";
      return formattime;
    }
  </script>

在设置默认值的时候需要进行格式转换才能有效赋值，否则input中设置的默认值会为空。