每日技术总结：jquery datetimepicker,微博QQ好友QQ空间微信等分享接口

前言：

1.jquery datetimepicker

今天遇到一个日期控件格式的问题，默认选中显示的并不是设定的值，而是当天的日期。于是去查了一遍文档。

参考文章：jquery datetimepicker 配置参数

官方文档：DateTimePicker jQuery plugin select date and time （找了很久）

耗时2小时，翻了无数遍网页，最后亲自去看插件源码，突然灵光一现，发现只是input value的格式传错了，冤啊！！

Html代码如下：

<head>
  <{css src="jquery.datetimepicker.css" app="sysstat" }>
  <{script src="jquery.js" app="sysstat" }>
  <{script src="jquery.datetimepicker.js" app="sysstat" }>
</head>

<body>
    <input class="x-input cal datetimepicker" readonly="readonly" type="text" value="<{$time_start}>" id="time_from" name="time_from"> 至
    <input class="x-input cal datetimepicker" type="text" value="<{$time_end}>" id="time_end" name="time_end">
</body>

js代码如下：

  $('.datetimepicker').datetimepicker({
    lang: "ch",
    format: "Y-m-d"
  });

效果如下：

问题：就是选中的那个值并不是input框里的值。

两个input value 是php渲染的数据，

<{$time_start}> 打印出来值是 2019/01/20

<{$time_end}> 打印出来值是 2019/01/20

这俩值格式跟format格式不匹配，format格式是

format: "Y-m-d"

解决：修改如下：

$('.datetimepicker').datetimepicker({
      lang: "ch",
      format: "Y/m/d"
    });

这样就解决了这个问题。

2.微博分享，QQ好友，QQ空间，微信分享

Html代码如下：

<div class="share-wrapper">
      <div onclick="shareTo('qzone')">
        <img src="http://zixuephp.net/static/images/qqzoneshare.png" width="24">
      </div>
      <div onclick="shareTo('qq')">
        <img src="http://zixuephp.net/static/images/qqshare.png" width="26">
      </div>
      <div onclick="shareTo('sina')">
        <img src="http://zixuephp.net/static/images/sinaweiboshare.png" width="28">
      </div>
      <div onclick="weixinShare()">
        <img src="http://zixuephp.net/static/images/wechatshare.png" width="26">
      </div>
</div>

微博分享、QQ好友分享、QQ空间分享js代码如下：

function shareTo(stype) {
  var ftit = '';
  var flink = '';
  //获取网页标题title
  ftit = window.document.title;
  //获取网页中内容的第一张图片
  flink = $('#thumblist img').eq(0).attr('src');

  if (typeof flink == 'undefined') {
      flink='';
  }

  //qq空间接口的传参
  if (stype == 'qzone') {
    window.open('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + document.location.href + '?sharesource=qzone&title=' + ftit + '&pics=' + flink + '&summary=' + '');
  }
  //新浪微博接口的传参
  if (stype == 'sina') {
    window.open('http://service.weibo.com/share/share.php?url=' + document.location.href + '?sharesource=weibo&title=' + ftit + '&pic=' + flink + '&appkey=2706825840');
  }
  //qq好友接口的传参
  if (stype == 'qq') {
    window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + document.location.href + '?sharesource=qzone&title=' + ftit + '&pics=' + flink + '&summary=' + '');
  }
}

微信分享另外做的：

（1）首先引入了jquery qrcode库，生成链接二维码

微信二维码弹出层Html代码如下：

<!-- 生成的微信二维码容器，默认隐藏 -->
<div class="wx-qrcode-wrapper">
  <!-- 遮罩层 -->
  <div class="mask"></div>
  <!-- 弹出内容 -->
  <div class="wx-qrcode">
    <h4>微信分享 <a href="javascript:;" class="icon-close2" onclick="closeMask()"><img src="images/static_img/icon-close2.png"
          alt=""></a></h4>
    <!-- 二维码生成位置 -->
    <div id="qrcode"></div>
  </div>
</div>

<!-- 引入jquery.qrcode库 生成二维码 -->
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

/* 二维码生成代码 */
$("#qrcode").qrcode({
  text: "<{url action=topwap_ctl_item_detail@index item_id=$item.item_id}>", //设置二维码内容 
  render: "table", //设置渲染方式 
  width: 200, //设置宽度,默认生成的二维码大小是 256×256
  height: 200, //设置高度 
  typeNumber: -1, //计算模式 
  background: "#ffffff", //背景颜色 
  foreground: "#000000" //前景颜色 
});

/* 微信图标上的点击事件，触发二维码弹出 */
function weixinShare() {
  $('.wx-qrcode-wrapper').show()
}

/* 关闭二维码弹层 */
function closeMask() {
  $('.wx-qrcode-wrapper').hide()
}