原本只为了日期范围选择器看下sae的前端怎么实现

然后。。。

公共函数两个文件,第一个是各种插件:

typeahead.js 自动完成

        //关键词自动完成
$('#page-auto-complete').typeahead({
name: 'twitter-oss',
local: $SAE['search_keywords'] || [],
template: [
'<a href="{{url}}" target="_blank" class="auto-complete-link">',
'<p class="repo-language">{{category}}</p>',
'<p class="repo-name">{{name}}</p>',
'<p class="repo-description">{{description}}</p>',
'</a>'
].join(''),
engine: Hogan,
limit: 10
});

Hogan.js 模版引擎

json2.js json序列化和反序列化(JSON.stringfy,JSON.parse():为什么我不引入也可以用,在fronzeui中?)

iframe autoheight 不晓得

moment.js 时间(这个好啊!当初我还折腾js的时间兼容呢)

moment('2015-03-19').format('YYYY-MM-DD');

  

http://www.soulteary.com/大牛的插件 不晓得干嘛用,里面的博客很漂亮 估计以前也是sae的前端工程师吧

i18next 语言

他们的使用方法

//切换语言事件
$('#switch_lang').on('click', function (e) {
var lang = $(e.target);
$.cookie('hl', lang.data('lang'));
window.location.reload();
return false;
})
//获取语言cookie
var curLang = $.cookie('hl');
// i18N_CONFIG该在$SAE中
$SAETOOLS.i18N_ID = $SAETOOLS.i18N({lang: curLang});
//处理语言,好好研究如果用到
$SAETOOLS.i18N = function (params) {
var config = {
'zh_CN': 1,
'en_US': 2
}
// 待完成根据服务器设置返回默认语言,或者IP地址选择
var init = function () {
// 读取COOKIES设置
var curLang = $.cookie('hl');
if (curLang) {
$.i18n.init({
lng: curLang,
fallbackNS: $SAE['modeName']
});
return config[curLang];
} else {
// 读取推荐设置
var jsDefault = $SAETOOLS.i18N_CONFIG;
if (jsDefault) {
$.i18n.init({lng: jsDefault, ns:$SAE['modeName'], resGetPath:'/?m=ajax&a=get_resources&language=__lng__&namespace=__ns__', dynamicLoad:true});
return config[jsDefault];
} else {
// 读取服务器推荐设置 待完成
}
}
}
if (params) {
if (params.lang) {
$.i18n.init({
lng: params.lang,
fallbackNS: $SAE['modeName']
});
return config[params.lang];
} else {
return init();
} } else {
return init();
}
}

  

===================

我的任务研究是daterangepicker!

1.引入它的js和css文件

2.初始化中文吧

//初始化daterangepicker
initDaterangepicker: function(starttime, endtime, callback, options) {
options = $SAETOOLS.extend({
format: 'YYYY-MM-DD',
startDate: starttime,
endDate: endtime,
showDropdowns: true,
locale: {
cancelLabel: '关闭',
applyLabel: '确认',
daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
fromLabel: '',
toLabel: '',
customRangeLabel: '自定义'
}
}, options);
return this.daterangepicker(options, callback);
}

2.封装一下使用

if ($('#date-range').length > 0 && $("#chart-main").length < 1) {
var initdate = function(stime, etime) {
$('#date-range').initDaterangepicker(stime, etime, function(start, end) {
var stime = moment(start).format('YYYY-MM-DD');
var etime = moment(end).format('YYYY-MM-DD');
$("#stime").val(stime);
$("#etime").val(etime);
getPic('beans', '', 'other', stime, etime);
});
}
initdate($('#date-range').data('starttime'), $('#date-range').data('endtime'));
}

3.dom结构

<div class="input-prepend input-group">
<span class="add-on input-group-addon">数据日期</span>
<input type="text" name="date_range" id="date-range" class="form-control" value="2015-03-19 到 2015-04-18" data-starttime="2015-03-19" data-endtime="2015-04-18">
</div>

sae后台管理端的js,daterangepicker使用的更多相关文章

  1. sae后台管理的js(二)

    jsloader cssloader 使用方法<link rel="stylesheet" type="text/css" href="/min ...

  2. 基于SAE+CodeIgniter3.0+管理端angularjs+前台amazeui的多用户博客系统V1.0--系统设计(一)

    开发环境: 服务器系统:CentOS-6.x web服务器:Apache-2.2.x php版本:PHP-5.3.x 开发工具:sublime text 3 ,谷歌浏览器 数据库查询工具:phpmya ...

  3. Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...

  4. Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  5. Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)

    Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...

  6. Vue.js+vue-element搭建属于自己的后台管理模板:更深入了解Vue.js(三)

    前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...

  7. 28个漂亮的React.js后台管理模板

    React管理模板 为您的React Web应用程序开发一个管理区域可能非常耗时.它与设计所有前端页面一样重要. 这是2020年设计出色的顶级React.js后台管理模板的列表. 这些模板确实有价值, ...

  8. Django框架admin后台管理和用户端静态文件

    目录 一.admin后台管理 1. 如何使用 2. 路由分发的本质 二.用户上传的静态文件的展示 1. media配置 2. 手动开设media接口 三.图片防盗链 一.admin后台管理 djang ...

  9. 后台管理UI的选择

    最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容I ...

随机推荐

  1. 编程实例--for循环,找出0~100之间与8有关的正整数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. PHP工具下载地址

    Zend Debugger下载地址:http://www.zend.com/en/products/studio/downloads 需要先注册一下,然后才能进行下载.

  3. Tinder 心动效果---卡片式view左右滑动

    http://www.eoeandroid.com/thread-549316-1-1.html SlideCard.zip

  4. [React Native] Basic iOS Routing -- NavigatorIOS

    Inside the app component, we use NavigatiorIOS to render the compoent: class githubnotetaker extends ...

  5. ubuntu上如何安装和卸载google chrome 浏览器

    切换到安装文件目录 $ sudo dpkg -i file_name.deb 如果有错误,请运行以下命令 $ sudo apt-get -f install or $ sudo apt-get ins ...

  6. SNMP协议总结

    说明:本文仅供学习交流,转载请标明出处,欢迎转载! SNMP(Simple Network Management Protocal),简单网络管理协议,其前身是SGMP协议(简单网关监控协议),该协议 ...

  7. css 行内元素和块级元素

    1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...

  8. OOM-killer 线上设置 +vm +OOM机制

    http://blog.csdn.net/tenfyguo/article/details/9409743 http://blog.csdn.net/tenfyguo/article/details/ ...

  9. Enable SPI 1.0 and 1.1 with device tre overlays on BeagleBone

    For most people the above image means absolutely nothing, but for that one guy that has been searchi ...

  10. Android(java)学习笔记156:Java虚拟机和Dalvik虚拟机的区别

    Google于2007年底正式发布了Android SDK, 作为 Android系统的重要特性,Dalvik虚拟机也第一次进入了人们的视野.它对内存的高效使用,和在低速CPU上表现出的高性能,确实令 ...