1 Star 0 Fork 0

zhengchen/avalon

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
avalon.datepicker.js 12.10 KB
一键复制 编辑 原始数据 按行查看 历史
qincheng 提交于 2014-02-12 20:30 . update vmodels
define(["avalon.position", "text!avalon.datepicker.html"], function(avalon, tmpl) {
//http://xdsoft.net/jqplugins/datetimepicker/
function formatMonth(date, format) {
if (Array.isArray(format)) {
return format[this.currentMonth]
} else if (format) {
return avalon.filters.date(date, format);
} else {
return this.currentMonth
}
}
function formatYear(date, format) {
if (format) {
return avalon.filters.date(date, format);
} else {
return this.currentYear + (this.yearSuffix || "")
}
}
var widget = avalon.ui.datepicker = function(element, data, vmodels) {
var $element = avalon(element), options = data.datepickerOptions, model
var now = new Date, datepickerEl
var nowTime = new Date(now.getFullYear(), now.getMonth(), now.getDate()) - 0
var model = avalon.define(data.datepickerId, function(vm) {
avalon.mix(vm, options)
vm.currentYear = now.getFullYear()
vm.currentMonth = now.getMonth()
vm.currentDate = now.getDate()
vm.title = {
get: function() {
var format, currentDate = new Date(this.currentYear, this.currentMonth, this.currentDate)
if (!this.changeYear && !this.changeMonth) {
format = this.titleFormat
if (!format) {
return formatMonth.call(this, currentDate, this.titleFormatOnlyMonth)
+ " " + formatYear.call(this, currentDate, this.titleFormatOnlyYear);
}
} else if (!this.changeYear && this.changeMonth) {
return formatYear.call(this, currentDate, this.titleFormatOnlyYear)
} else if (this.changeYear && !this.changeMonth) {
return formatMonth.call(this, currentDate, this.titleFormatOnlyMonth)
} else {
return ""
}
return avalon.filters.date(currentDate, format);
}
};
vm.years = {
get: function() {
var d = new Date(vm.currentYear, vm.currentMonth, vm.currentDate)
var y = d.getFullYear()
var match = this.yearRange.split(":")
var min = Function("y", "return " + match[0])(y)
var max = Function("y", "return " + match[1])(y)
return avalon.range(min, max + 1)
}
}
vm.$watch("currentMonth", function(val) {
var d = new Date(vm.currentYear, vm.currentMonth, vm.currentDate)
d.setMonth(val);
getWeeksMulti(d, vm.numberOfMonths);
vm.title = NaN;
});
vm.$watch("currentYear", function(val) {
var d = new Date(vm.currentYear, vm.currentMonth, vm.currentDate)
d.setFullYear(val);
getWeeksMulti(d, vm.numberOfMonths);
vm.title = NaN;
})
vm.updateMonth = function(n) {
var d = new Date(vm.currentYear, vm.currentMonth, vm.currentDate)
var m = d.getMonth();
d.setMonth(m + n);
if (vm.minDate && d < vm.minDate)
return
if (vm.maxDate && d > vm.maxDate)
return
m = d.getMonth();
var y = d.getFullYear();
try{
vm.currentYear = y;
}catch(e){
alert(vm.currentYear)
}
vm.currentMonth = m
}
vm.showDate = function(date) {
var val = true
if (vm.minDate) {
val = date.time > vm.minDate
if (val === false)
return false
}
if (vm.maxDate) {
val = date.time < vm.maxDate;
if (val === false)
return false
}
return true
}
vm.showMonth = function(val) {
var disabled = false;
var now = new Date(vm.currentYear, vm.currentMonth, vm.currentDate)
now.setMonth(val)
if (vm.minDate) {
disabled = now < vm.minDate
}
if (disabled && vm.maxDate) {
disabled = now > vm.maxDate
}
return !disabled
}
vm.showYear = function(val) {
var disabled = false;
if (vm.minDate) {
disabled = val < vm.minDate.getFullYear();
}
if (disabled && vm.maxDate) {
disabled = val > vm.maxDate.getFullYear();
}
return !disabled
}
vm.minDate = new Date(2012, 10, 7)
vm.selectedTime = NaN
vm.selectTime = function(e, date) {
e.preventDefault()
vm.selectedTime = date.time
vm.toggle = false
}
vm.isToday = function(date) {
return date.time === nowTime
}
vm.hide = function() {
vm.toggle = false
}
vm.today = function() {
model.currentYear = now.getFullYear()
model.currentMonth = now.getMonth()
model.currentDate = now.getDate()
}
function getGroups(a) {
var groups = []
for (var ii = 0; ii < a; ii++) {
groups.push({
number: ii
})
}
vm.groups = groups
}
vm.$watch("numberOfMonths", getGroups)
getGroups(vm.numberOfMonths)
vm.getWeekNumberOfYear = function(date) {
if(!date)
return
var checkDate = new Date(date.time);
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7))
var time = checkDate.getTime();
checkDate.setMonth(0); // Compare with Jan 1
checkDate.setDate(1);
return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
}
function getWeeks(ooo) {
var year = ooo.getFullYear();
var month = ooo.getMonth(); //得到今天是几月(0 ~ 11)
var date = ooo.getDate(); //得到今天是几号 (1 ~ 31)
var cur = new Date(year, month, date)
cur.setMonth(month + 1); //改为下一个月,
//由于日期是1 ~ 31, 0则是退到上一个月的最后一天,于是得到这个月的总天数
cur.setDate(0);
var num = cur.getDate();
var next = 6 - cur.getDay();
var dates = avalon.range(1, num + 1);
dates = dates.map(function(d) {
return {
year: year,
month: month,
date: d,
time: new Date(year, month, d) - 0
}
});
cur.setMonth(month);
cur.setDate(1); //得到当月的第一天
var prev = cur.getDay(); //0 ~ 6
cur.setDate(date); //还原
for (var i = 0; i < prev; i++) {//补上上一个月的日期
var curr = new Date(year, month, -1 * i)
dates.unshift({
year: year,
month: month - 1,
date: curr.getDate(),
time: curr - 0
})
}
for (var i = 0; i < next; i++) {//补上下一个月的日期
var curr = new Date(year, month + 1, i + 1)
dates.push({
year: year,
month: month + 1,
date: curr.getDate(),
time: curr - 0
})
}
var ret = [];
while (dates.length) {//每行七个分组
ret.push(dates.splice(0, 7));
}
return ret; //一个三维数组
}
function getWeeksMulti(ooo, n) {
var year = ooo.getFullYear();
var month = ooo.getMonth(); //得到今天是几月(0 ~ 11)
var date = ooo.getDate(); //得到今天是几号 (1 ~ 31)
for (var i = 0; i < n; i++) {
month = month + i
if (month > 11) {
month = 0
year += 1
}
vm.WEEKMAP[i] = getWeeks(new Date(year, month, date))
}
}
vm.weeks = []
vm.weeks1 = []
vm.weeks2 = []
vm.skipArray = ["WEEKMAP"]
vm.WEEKMAP = {}
vm.WEEKMAP[0] = vm.weeks
vm.WEEKMAP[1] = vm.weeks1
vm.WEEKMAP[1] = vm.weeks2
getWeeksMulti(now, vm.numberOfMonths)
vm.$watch("toggle", function(bool) {
if (bool && datepickerEl) {
avalon(datepickerEl).position({
of: element,
at: "left bottom",
my: "left top"
})
if (typeof model.onShow === "function") {
model.onShow.call(element, model)
}
} else {
element.value = avalon.filters.date(model.selectedTime, model.dateFormat)
if (typeof model.onHide === "function") {
model.onHide.call(element, model)
}
}
})
})
avalon.ready(function() {
$element.bind("focus", function() {
model.toggle = true
})
datepickerEl = avalon.parseHTML(tmpl).firstChild
document.body.appendChild(datepickerEl)
avalon.scan(datepickerEl, [model].concat(vmodels))
})
return model
}
widget.defaults = {
dayNames: "日一二三四五六".split(""), //设置日历上方的星期显示
dayNameTitles: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], //设置鼠标移上去时,星期的title
monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
changeMonth: false,
changeYear: false,
toggle: false,
yearRange: "y-10:y+10", //你只能改动这里面的数字
showOtherMonths: true,
showButtonPanel: false,
closeText: "Done", // Display text for close link
prevText: "Prev", // Display text for previous month link
nextText: "Next", // Display text for next month link
currentText: "Today", // Display text for current month link
showWeek: false,
firstDay: 1,
weekHeader: "",
minDate: null,
maxDate: null,
numberOfMonths: 1,
yearSuffix: "",
onShow: avalon.noop, //当我们只点它时,就会调用此方法,this指向input,参数为VM
onHide: avalon.noop, //当我们选中一个日期时,它会使用dateFormat格式化它,将它输入到目标input里,并调用此方法,this指向input,参数为VM
titleFormat: "MM月yyyy年",
titleFormatOnlyYear: "yyyy年",
titleFormatOnlyMonth: "MM月", //可以是数组,如["风月","芽月","花月","牧月","获月","热月","果月","霞月","雾月","霜月","雪月", "雨月"]
dateFormat: "MM/dd/yyyy"//日期格式,自己设置
}
return avalon
})
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/cowboy13/avalon.git
git@gitee.com:cowboy13/avalon.git
cowboy13
avalon
avalon
master

搜索帮助

D67c1975 1850385 1daf7b77 1850385