前言:
1.jquery datetimepicker
今天遇到一个日期控件格式的问题,默认选中显示的并不是设定的值,而是当天的日期。于是去查了一遍文档。
参考文章:jquery datetimepicker 配置参数
官方文档:DateTimePickerjQuery 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="data: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()
}
问题:商品详情页pc端和移动端的链接不一样,无法分享到微信怎么办?
答案:这里有一个问题,就是在pc端进行微信分享的链接并不是当前链接,pc端的链接在移动端是打不开的,会自动跳到首页,所以这里的链接后端处理过了,已处理成对应的移动端商品详情链接。