完成新一轮的改造
|
@ -6,4 +6,6 @@ node_modules/
|
||||||
dist/
|
dist/
|
||||||
*.sublime-project
|
*.sublime-project
|
||||||
*.sublime-workspace
|
*.sublime-workspace
|
||||||
package-lock.json
|
package-lock.json
|
||||||
|
.DS_Store
|
||||||
|
**/.DS_Store
|
13
build.dev.js
|
@ -1,15 +1,22 @@
|
||||||
#! /usr/bin/env node
|
#! /usr/bin/env node
|
||||||
|
|
||||||
|
const log = console.log
|
||||||
const fs = require('iofs')
|
const fs = require('iofs')
|
||||||
const path = require('path')
|
const path = require('path')
|
||||||
const babel = require('babel-core')
|
const babel = require('babel-core')
|
||||||
const scss = require('node-sass')
|
const scss = require('node-sass')
|
||||||
const chokidar = require('chokidar')
|
const chokidar = require('chokidar')
|
||||||
const log = console.log
|
const postcss = require('postcss')
|
||||||
|
const autoprefixer = require('autoprefixer')
|
||||||
const chalk = require('chalk')
|
const chalk = require('chalk')
|
||||||
|
|
||||||
const sourceDir = path.resolve(__dirname, 'src')
|
const sourceDir = path.resolve(__dirname, 'src')
|
||||||
const buildDir = path.resolve(__dirname, 'dist')
|
const buildDir = path.resolve(__dirname, 'dist')
|
||||||
|
const prefixer = postcss().use(
|
||||||
|
autoprefixer({
|
||||||
|
browsers: ['ie > 9', 'iOS > 8', 'Android >= 4.4', 'ff > 38', 'Chrome > 38']
|
||||||
|
})
|
||||||
|
)
|
||||||
const jsOpt = {
|
const jsOpt = {
|
||||||
presets: ['es2015'],
|
presets: ['es2015'],
|
||||||
plugins: ['transform-es2015-modules-amd']
|
plugins: ['transform-es2015-modules-amd']
|
||||||
|
@ -42,7 +49,9 @@ const compileCss = (entry, output) => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
try {
|
try {
|
||||||
const { css } = scss.renderSync({ ...cssOpt, file: entry })
|
const { css } = scss.renderSync({ ...cssOpt, file: entry })
|
||||||
fs.echo(css, output)
|
prefixer.process(css, { from: '', to: '' }).then(result => {
|
||||||
|
fs.echo(result.css, output)
|
||||||
|
})
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
log(err)
|
log(err)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,21 @@
|
||||||
#! /usr/bin/env node
|
#! /usr/bin/env node
|
||||||
|
|
||||||
|
const log = console.log
|
||||||
const fs = require('iofs')
|
const fs = require('iofs')
|
||||||
const path = require('path')
|
const path = require('path')
|
||||||
const babel = require('babel-core')
|
const babel = require('babel-core')
|
||||||
const scss = require('node-sass')
|
const scss = require('node-sass')
|
||||||
const log = console.log
|
const postcss = require('postcss')
|
||||||
|
const autoprefixer = require('autoprefixer')
|
||||||
const chalk = require('chalk')
|
const chalk = require('chalk')
|
||||||
|
|
||||||
const sourceDir = path.resolve(__dirname, 'src')
|
const sourceDir = path.resolve(__dirname, 'src')
|
||||||
const buildDir = path.resolve(__dirname, 'dist')
|
const buildDir = path.resolve(__dirname, 'dist')
|
||||||
|
const prefixer = postcss().use(
|
||||||
|
autoprefixer({
|
||||||
|
browsers: ['ie > 9', 'iOS > 8', 'Android >= 4.4', 'ff > 38', 'Chrome > 38']
|
||||||
|
})
|
||||||
|
)
|
||||||
const jsOpt = {
|
const jsOpt = {
|
||||||
presets: ['es2015', 'minify'],
|
presets: ['es2015', 'minify'],
|
||||||
plugins: ['transform-es2015-modules-amd']
|
plugins: ['transform-es2015-modules-amd']
|
||||||
|
@ -39,12 +46,14 @@ const compileJs = (entry, output) => {
|
||||||
const compileCss = (entry, output) => {
|
const compileCss = (entry, output) => {
|
||||||
let t1 = Date.now()
|
let t1 = Date.now()
|
||||||
const { css } = scss.renderSync({ ...cssOpt, file: entry })
|
const { css } = scss.renderSync({ ...cssOpt, file: entry })
|
||||||
log(
|
prefixer.process(css, { from: '', to: '' }).then(result => {
|
||||||
'编译scss: %s, 耗时 %s ms',
|
log(
|
||||||
chalk.green(entry),
|
'编译scss: %s, 耗时 %s ms',
|
||||||
chalk.yellow(Date.now() - t1)
|
chalk.green(entry),
|
||||||
)
|
chalk.yellow(Date.now() - t1)
|
||||||
fs.echo(css, output)
|
)
|
||||||
|
fs.echo(result.css, output)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const compileHtm = (entry, output) => {
|
const compileHtm = (entry, output) => {
|
||||||
|
|
|
@ -111,6 +111,20 @@
|
||||||
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
|
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"autoprefixer": {
|
||||||
|
"version": "7.2.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.5.tgz",
|
||||||
|
"integrity": "sha512-XqHfo8Ht0VU+T5P+eWEVoXza456KJ4l62BPewu3vpNf3LP9s2+zYXkXBznzYby4XeECXgG3N4i+hGvOhXErZmA==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"browserslist": "2.11.3",
|
||||||
|
"caniuse-lite": "1.0.30000792",
|
||||||
|
"normalize-range": "0.1.2",
|
||||||
|
"num2fraction": "1.2.2",
|
||||||
|
"postcss": "6.0.16",
|
||||||
|
"postcss-value-parser": "3.3.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"aws-sign2": {
|
"aws-sign2": {
|
||||||
"version": "0.6.0",
|
"version": "0.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
|
||||||
|
@ -971,6 +985,16 @@
|
||||||
"repeat-element": "1.1.2"
|
"repeat-element": "1.1.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"version": "2.11.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
|
||||||
|
"integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"caniuse-lite": "1.0.30000792",
|
||||||
|
"electron-to-chromium": "1.3.31"
|
||||||
|
}
|
||||||
|
},
|
||||||
"builtin-modules": {
|
"builtin-modules": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
|
||||||
|
@ -993,6 +1017,12 @@
|
||||||
"map-obj": "1.0.1"
|
"map-obj": "1.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"caniuse-lite": {
|
||||||
|
"version": "1.0.30000792",
|
||||||
|
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000792.tgz",
|
||||||
|
"integrity": "sha1-0M6pgfgRjzlhRxr7tDyaHlu/AzI=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"caseless": {
|
"caseless": {
|
||||||
"version": "0.11.0",
|
"version": "0.11.0",
|
||||||
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
|
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
|
||||||
|
@ -1215,6 +1245,12 @@
|
||||||
"jsbn": "0.1.1"
|
"jsbn": "0.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"electron-to-chromium": {
|
||||||
|
"version": "1.3.31",
|
||||||
|
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz",
|
||||||
|
"integrity": "sha512-XE4CLbswkZgZFn34cKFy1xaX+F5LHxeDLjY1+rsK9asDzknhbrd9g/n/01/acbU25KTsUSiLKwvlLyA+6XLUOA==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"error-ex": {
|
"error-ex": {
|
||||||
"version": "1.3.1",
|
"version": "1.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
|
||||||
|
@ -3060,6 +3096,12 @@
|
||||||
"remove-trailing-separator": "1.1.0"
|
"remove-trailing-separator": "1.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"normalize-range": {
|
||||||
|
"version": "0.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
||||||
|
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"npmlog": {
|
"npmlog": {
|
||||||
"version": "4.1.2",
|
"version": "4.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
|
||||||
|
@ -3072,6 +3114,12 @@
|
||||||
"set-blocking": "2.0.0"
|
"set-blocking": "2.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"num2fraction": {
|
||||||
|
"version": "1.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
|
||||||
|
"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"number-is-nan": {
|
"number-is-nan": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
|
||||||
|
@ -3208,6 +3256,40 @@
|
||||||
"pinkie": "2.0.4"
|
"pinkie": "2.0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"postcss": {
|
||||||
|
"version": "6.0.16",
|
||||||
|
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.16.tgz",
|
||||||
|
"integrity": "sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"chalk": "2.3.0",
|
||||||
|
"source-map": "0.6.1",
|
||||||
|
"supports-color": "5.1.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"source-map": {
|
||||||
|
"version": "0.6.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||||
|
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"supports-color": {
|
||||||
|
"version": "5.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz",
|
||||||
|
"integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"has-flag": "2.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"postcss-value-parser": {
|
||||||
|
"version": "3.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
|
||||||
|
"integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"preserve": {
|
"preserve": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
|
||||||
|
|
|
@ -11,16 +11,21 @@
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/yutent/doui.git"
|
"url": "git+https://github.com/yutent/doui.git"
|
||||||
},
|
},
|
||||||
"keywords": ["doui", "yua"],
|
"keywords": [
|
||||||
|
"doui",
|
||||||
|
"yua"
|
||||||
|
],
|
||||||
"author": "yutent",
|
"author": "yutent",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^7.2.5",
|
||||||
"babel-core": "^6.26.0",
|
"babel-core": "^6.26.0",
|
||||||
"babel-preset-es2015": "^6.24.1",
|
"babel-preset-es2015": "^6.24.1",
|
||||||
"babel-preset-minify": "^0.2.0",
|
"babel-preset-minify": "^0.2.0",
|
||||||
"chalk": "^2.3.0",
|
"chalk": "^2.3.0",
|
||||||
"chokidar": "^1.7.0",
|
"chokidar": "^1.7.0",
|
||||||
"iofs": "^1.0.3",
|
"iofs": "^1.0.3",
|
||||||
"node-sass": "^4.7.2"
|
"node-sass": "^4.7.2",
|
||||||
|
"postcss": "^6.0.16"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,6 @@ $co: #ff9800 #ffa726 #f57c00;
|
||||||
$cp: #e7e8eb #ecf0f1 #bdc3c7;
|
$cp: #e7e8eb #ecf0f1 #bdc3c7;
|
||||||
$cgr: #546e7a #607d8b #37474f;
|
$cgr: #546e7a #607d8b #37474f;
|
||||||
|
|
||||||
@mixin ts($c: all, $t: .1s, $m: ease-in-out){
|
@mixin ts($c: all, $t: .2s, $m: ease-in-out){
|
||||||
transition:$c $t $m;
|
transition:$c $t $m;
|
||||||
}
|
}
|
|
@ -141,7 +141,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
if (tickObserver) {
|
if (tickObserver) {
|
||||||
var node = document.createTextNode('any')
|
var node = document.createTextNode('anot')
|
||||||
new tickObserver(callback).observe(node, { characterData: true }) // jshint ignore:line
|
new tickObserver(callback).observe(node, { characterData: true }) // jshint ignore:line
|
||||||
var bool = false
|
var bool = false
|
||||||
return function(fn) {
|
return function(fn) {
|
||||||
|
@ -460,7 +460,7 @@
|
||||||
value: function() {
|
value: function() {
|
||||||
var thisYear = this.getFullYear(),
|
var thisYear = this.getFullYear(),
|
||||||
that = new Date(thisYear, 0, 1),
|
that = new Date(thisYear, 0, 1),
|
||||||
firstDay = that.getDay(),
|
firstDay = that.getDay() || 1,
|
||||||
numsOfToday = (this - that) / 86400000
|
numsOfToday = (this - that) / 86400000
|
||||||
return Math.ceil((numsOfToday + firstDay) / 7)
|
return Math.ceil((numsOfToday + firstDay) / 7)
|
||||||
},
|
},
|
||||||
|
@ -4182,7 +4182,7 @@
|
||||||
if (!this.init) {
|
if (!this.init) {
|
||||||
for (var i in Anot.vmodels) {
|
for (var i in Anot.vmodels) {
|
||||||
var v = Anot.vmodels[i]
|
var v = Anot.vmodels[i]
|
||||||
v.$fire('any-duplex-init', binding)
|
v.$fire('anot-duplex-init', binding)
|
||||||
}
|
}
|
||||||
var cpipe = binding.pipe || (binding.pipe = pipe)
|
var cpipe = binding.pipe || (binding.pipe = pipe)
|
||||||
cpipe(null, binding, 'init')
|
cpipe(null, binding, 'init')
|
||||||
|
@ -4265,17 +4265,7 @@
|
||||||
if (-val === -number) {
|
if (-val === -number) {
|
||||||
return number
|
return number
|
||||||
}
|
}
|
||||||
var arr = /strong|medium|weak/.exec(
|
return 0
|
||||||
binding.element.getAttribute('data-duplex-number')
|
|
||||||
) || ['medium']
|
|
||||||
switch (arr[0]) {
|
|
||||||
case 'strong':
|
|
||||||
return 0
|
|
||||||
case 'medium':
|
|
||||||
return val === '' ? '' : 0
|
|
||||||
case 'weak':
|
|
||||||
return val
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
set: fixNull
|
set: fixNull
|
||||||
}
|
}
|
||||||
|
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
@ -0,0 +1,365 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @authors yutent (yutent@doui.cc)
|
||||||
|
* @date 2016-02-14 13:58:39
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
import tpl from './main.htm'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
/**************** 公共函数 *****************/
|
||||||
|
//计算日历数组
|
||||||
|
function getCalendarTable({ year, month, max, min }, last) {
|
||||||
|
let nums = getTotalDays(year, month)
|
||||||
|
let numsFixed = 1 - getFirstDay(year, month)
|
||||||
|
let isLimitYM = isLimited({ max, min }, { year, month })
|
||||||
|
let list = []
|
||||||
|
|
||||||
|
for (let i = numsFixed; i <= nums; i++) {
|
||||||
|
let day = {
|
||||||
|
weeken: !1,
|
||||||
|
day: i < 1 ? '' : i,
|
||||||
|
selected: !1,
|
||||||
|
disabled: !0
|
||||||
|
}
|
||||||
|
if (i > 0) {
|
||||||
|
let week = getFirstDay(year, month, i)
|
||||||
|
day.weeken = week === 0 || week === 6
|
||||||
|
day.selected = isSelected({ year, month, day: i }, last)
|
||||||
|
day.disabled = disabledDay({ max, min }, i, isLimitYM)
|
||||||
|
}
|
||||||
|
list.push(day)
|
||||||
|
}
|
||||||
|
return list
|
||||||
|
}
|
||||||
|
|
||||||
|
//判断当前年/月是否超出限制
|
||||||
|
function isLimited({ max, min }, { year, month }) {
|
||||||
|
let result = ''
|
||||||
|
|
||||||
|
if ((!max.year && !min.year) || (!max.month && !min.month) || !year) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((min.year && year < min.year) || (max.year && year > max.year)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
if (month) {
|
||||||
|
if (year === min.year) {
|
||||||
|
if (min.month && month < min.month) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
if (month == min.month) {
|
||||||
|
result += '-'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (year === max.year) {
|
||||||
|
if (max.month && month > max.month) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
if (month == max.month) {
|
||||||
|
result += '+'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
//判断指定天数是否有效
|
||||||
|
function disabledDay({ max, min }, day, limitedYM) {
|
||||||
|
if (limitedYM === '-') {
|
||||||
|
return day < min.day
|
||||||
|
}
|
||||||
|
|
||||||
|
if (limitedYM === '+') {
|
||||||
|
return max.day && day > max.day
|
||||||
|
}
|
||||||
|
|
||||||
|
if (limitedYM === '-+') {
|
||||||
|
return day < min.day || (max.day && day > max.day)
|
||||||
|
}
|
||||||
|
|
||||||
|
return limitedYM
|
||||||
|
}
|
||||||
|
|
||||||
|
//判断指定天数是否被选中
|
||||||
|
function isSelected({ year, month, day }, last) {
|
||||||
|
return !(last.year !== year || last.month !== month || last.day !== day)
|
||||||
|
}
|
||||||
|
|
||||||
|
//修改当前选中日期的样式
|
||||||
|
function changeStyle(calendar, day) {
|
||||||
|
calendar.list.forEach(function(item) {
|
||||||
|
if (item.day != day) {
|
||||||
|
item.selected = !1
|
||||||
|
} else {
|
||||||
|
item.selected = !0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取今年的年份/月份,返回的是数组
|
||||||
|
function getThisYearMonth() {
|
||||||
|
var oDate = new Date()
|
||||||
|
return [oDate.getFullYear(), oDate.getMonth() + 1]
|
||||||
|
}
|
||||||
|
|
||||||
|
//根据年份获取指定月份天数
|
||||||
|
function getTotalDays(year, month) {
|
||||||
|
return new Date(year, month, 0).getDate()
|
||||||
|
}
|
||||||
|
|
||||||
|
//判断指定年月第一天是星期几
|
||||||
|
function getFirstDay(year, month, day) {
|
||||||
|
return new Date(year, month - 1, day || 1).getDay()
|
||||||
|
}
|
||||||
|
|
||||||
|
Anot.ui.datepicker = '1.0.0'
|
||||||
|
|
||||||
|
export default Anot.component('datepicker', {
|
||||||
|
render: function() {
|
||||||
|
return tpl
|
||||||
|
},
|
||||||
|
construct: function(props, state) {
|
||||||
|
if (!props.hasOwnProperty('key')) {
|
||||||
|
return Anot.error('日历组件必须设置key属性')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s'
|
||||||
|
if (!props.showTime && !props.format) {
|
||||||
|
props.format = 'Y-m-d'
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取初始值
|
||||||
|
let defVal = props.value
|
||||||
|
if (!defVal) {
|
||||||
|
if (props.minDate) {
|
||||||
|
defVal = props.minDate
|
||||||
|
} else if (props.maxDate) {
|
||||||
|
defVal = props.maxDate
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 修正默认值, 如果不是Date对象, 则转为Date对象
|
||||||
|
if (defVal && !Date.isDate(defVal)) {
|
||||||
|
defVal += ' GMT+8000'
|
||||||
|
defVal = new Date(defVal)
|
||||||
|
} else {
|
||||||
|
defVal = new Date()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.minDate) {
|
||||||
|
if (!Date.isDate(props.minDate)) {
|
||||||
|
props.minDate += ' GMT+8000'
|
||||||
|
props.minDate = new Date(props.minDate)
|
||||||
|
}
|
||||||
|
if (defVal <= props.minDate) {
|
||||||
|
defVal = props.minDate
|
||||||
|
}
|
||||||
|
state.min.year = props.minDate.getFullYear()
|
||||||
|
state.min.month = props.minDate.getMonth() + 1
|
||||||
|
state.min.day = props.minDate.getDate()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.maxDate) {
|
||||||
|
if (!Date.isDate(props.maxDate)) {
|
||||||
|
props.maxDate += ' GMT+8000'
|
||||||
|
props.maxDate = new Date(props.maxDate)
|
||||||
|
}
|
||||||
|
if (defVal >= props.maxDate) {
|
||||||
|
defVal = props.maxDate
|
||||||
|
}
|
||||||
|
state.max.year = props.maxDate.getFullYear()
|
||||||
|
state.max.month = props.maxDate.getMonth() + 1
|
||||||
|
state.max.day = props.maxDate.getDate()
|
||||||
|
}
|
||||||
|
if (props.value) {
|
||||||
|
state.last = {
|
||||||
|
year: defVal.getFullYear(),
|
||||||
|
month: defVal.getMonth() + 1,
|
||||||
|
day: defVal.getDate()
|
||||||
|
}
|
||||||
|
state.value = defVal.format(props.format)
|
||||||
|
}
|
||||||
|
|
||||||
|
state.calendar = {
|
||||||
|
list: [1],
|
||||||
|
year: defVal.getFullYear(),
|
||||||
|
month: defVal.getMonth() + 1,
|
||||||
|
day: defVal.getDate(),
|
||||||
|
hour: defVal.getHours(),
|
||||||
|
minute: defVal.getMinutes(),
|
||||||
|
second: defVal.getSeconds()
|
||||||
|
}
|
||||||
|
state.disabled = !!props.disabled
|
||||||
|
|
||||||
|
//移除部分属性
|
||||||
|
delete props.minDate
|
||||||
|
delete props.maxDate
|
||||||
|
delete props.value
|
||||||
|
delete props.disabled
|
||||||
|
},
|
||||||
|
componentWillMount: function() {
|
||||||
|
this.resetCalendarTable()
|
||||||
|
},
|
||||||
|
componentDidMount: function() {
|
||||||
|
if (typeof this.props.onCreated === 'function') {
|
||||||
|
this.props.onCreated.call(null, this)
|
||||||
|
}
|
||||||
|
document.addEventListener('click', () => {
|
||||||
|
this.close()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
showCalendar: false, //显示日历对话框
|
||||||
|
disabled: false, //是否禁用
|
||||||
|
last: { year: 0, month: 0, day: 1 },
|
||||||
|
tips: '',
|
||||||
|
timer: null,
|
||||||
|
value: '', // 用于显示在输入框里的日期变量
|
||||||
|
max: { year: 0, month: 0, day: 1 },
|
||||||
|
min: { year: 0, month: 0, day: 1 },
|
||||||
|
calendar: {
|
||||||
|
// list: [1],
|
||||||
|
// year: '',
|
||||||
|
// month: '',
|
||||||
|
// day: '',
|
||||||
|
// hour: '',
|
||||||
|
// minute: '',
|
||||||
|
// second: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
showTime: false, //对话框上显示时间
|
||||||
|
color: 'grey',
|
||||||
|
format: '', // 日期显示格式
|
||||||
|
onCreated: Anot.PropsTypes.isFunction(),
|
||||||
|
onDateChange: Anot.PropsTypes.isFunction()
|
||||||
|
},
|
||||||
|
skip: ['max', 'min', 'last', 'timer'],
|
||||||
|
watch: {
|
||||||
|
tips: function(val) {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
if (!val) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.tips = ''
|
||||||
|
}, 1500)
|
||||||
|
},
|
||||||
|
'calendar.hour': function(val) {
|
||||||
|
if (val > 23) {
|
||||||
|
val = 23
|
||||||
|
}
|
||||||
|
this.calendar.hour = val
|
||||||
|
},
|
||||||
|
'calendar.minute': function(val) {
|
||||||
|
if (val > 59) {
|
||||||
|
val = 59
|
||||||
|
}
|
||||||
|
this.calendar.minute = val
|
||||||
|
},
|
||||||
|
'calendar.second': function(val) {
|
||||||
|
if (val > 59) {
|
||||||
|
val = 59
|
||||||
|
}
|
||||||
|
this.calendar.second = val
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 重置日历表格
|
||||||
|
resetCalendarTable: function() {
|
||||||
|
let { max, min, calendar: { year, month }, last } = this
|
||||||
|
|
||||||
|
this.calendar.list.clear()
|
||||||
|
this.calendar.list.pushArray(
|
||||||
|
getCalendarTable({ max, min, year, month }, last)
|
||||||
|
)
|
||||||
|
},
|
||||||
|
// 数字前面加0
|
||||||
|
numberFormat: function(num) {
|
||||||
|
num += ''
|
||||||
|
if (num.length > 1) {
|
||||||
|
return num
|
||||||
|
}
|
||||||
|
while (num.length < 2) {
|
||||||
|
num = '0' + num
|
||||||
|
}
|
||||||
|
return num
|
||||||
|
},
|
||||||
|
// 输入框获取焦点时,显示日历
|
||||||
|
onFocus: function() {
|
||||||
|
this.showCalendar = !0
|
||||||
|
},
|
||||||
|
// 切换上/下 年/月
|
||||||
|
turn: function(isYear, step) {
|
||||||
|
let { calendar: { year, month }, max, min } = this
|
||||||
|
|
||||||
|
if (isYear === 1) {
|
||||||
|
year += step
|
||||||
|
} else {
|
||||||
|
month += step
|
||||||
|
if (month < 1) {
|
||||||
|
month = 12
|
||||||
|
year--
|
||||||
|
}
|
||||||
|
if (month > 12) {
|
||||||
|
month = 1
|
||||||
|
year++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (isLimited({ max, min }, { year, month }) === true) {
|
||||||
|
this.tips = '日期超出限制'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.calendar.year = year
|
||||||
|
this.calendar.month = month
|
||||||
|
this.resetCalendarTable()
|
||||||
|
},
|
||||||
|
pick: function(item) {
|
||||||
|
if (item.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.calendar.day = item.day
|
||||||
|
changeStyle(this.calendar, item.day)
|
||||||
|
},
|
||||||
|
updateTime: function() {
|
||||||
|
let { year, month, day, hour, minute, second } = this.calendar
|
||||||
|
|
||||||
|
this.last = { year, month, day }
|
||||||
|
|
||||||
|
if (!this.props.showTime) {
|
||||||
|
hour = 0
|
||||||
|
minute = 0
|
||||||
|
second = 0
|
||||||
|
}
|
||||||
|
this.last.pick = new Date(year, month - 1, day, hour, minute, second)
|
||||||
|
this.value = this.last.pick.format(this.props.format)
|
||||||
|
},
|
||||||
|
now: function() {
|
||||||
|
let now = new Date()
|
||||||
|
this.calendar.hour = now.getHours()
|
||||||
|
this.calendar.minute = now.getMinutes()
|
||||||
|
this.calendar.second = now.getSeconds()
|
||||||
|
},
|
||||||
|
cancelBubble: function(ev) {
|
||||||
|
;(ev.stopPropagation && ev.stopPropagation()) || (ev.cancelBubble = true)
|
||||||
|
},
|
||||||
|
close: function() {
|
||||||
|
this.showCalendar = false
|
||||||
|
},
|
||||||
|
onConfirm: function() {
|
||||||
|
this.updateTime()
|
||||||
|
this.close()
|
||||||
|
if (typeof this.props.onDateChange === 'function') {
|
||||||
|
this.props.onDateChange(this.value, this.last.pick)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
|
@ -1,50 +1,57 @@
|
||||||
<div class="do-datepicker do-fn-noselect">
|
<div class="do-datepicker do-fn-noselect" :click="cancelBubble">
|
||||||
<input class="date-input"
|
<input
|
||||||
type="text"
|
class="date-input"
|
||||||
:duplex="value"
|
type="text"
|
||||||
:focus="$focus"
|
:duplex="value"
|
||||||
:click="$cancelBubble"
|
:focus="onFocus"
|
||||||
:attr-disabled="disabled">
|
:attr-placeholder="props.placeholder || '请选择日期'"
|
||||||
|
:attr-disabled="disabled">
|
||||||
|
|
||||||
<dl class="calendar-box"
|
<dl
|
||||||
:if="showCalendar"
|
class="calendar-box"
|
||||||
:click="$cancelBubble">
|
:if="showCalendar">
|
||||||
|
|
||||||
<dt class="title">请选择日期</dt>
|
<dt class="contrl">
|
||||||
<dd class="contrl">
|
<a href="javascript:;" class="do-ui-font" :click="turn(1, -1)"></a>
|
||||||
<a href="javascript:;"
|
<a href="javascript:;" class="do-ui-font prev-month" :click="turn(0, -1)"></a>
|
||||||
:click="$turn(1, -1)"
|
<a href="javascript:;" class="do-ui-font next-month" :click="turn(0, 1)"></a>
|
||||||
:text="$prevYear"></a>
|
<a href="javascript:;" class="do-ui-font next-year" :click="turn(1, 1)"></a>
|
||||||
<a href="javascript:;" class="prev-month"
|
<span title="双击回到今天" :text="calendar.year + '-' + numberFormat(calendar.month)"></span>
|
||||||
:click="$turn(0, -1)" :text="$prevMonth"></a>
|
</dt>
|
||||||
<a href="javascript:;" class="next-month"
|
<dd class="table">
|
||||||
:click="$turn(0, 1)" :text="$nextMonth"></a>
|
<section class="thead">
|
||||||
<a href="javascript:;" class="next-year"
|
<span class="td">日</span>
|
||||||
:click="$turn(1, 1)" :text="$nextYear"></a>
|
<span class="td">一</span>
|
||||||
<span :text="calendar.year + '-' + calendar.month"></span>
|
<span class="td">二</span>
|
||||||
</dd>
|
<span class="td">三</span>
|
||||||
<dd class="calendar">
|
<span class="td">四</span>
|
||||||
<section class="week"><span class="td">日</span><span class="td">一</span><span class="td">二</span><span class="td">三</span><span class="td">四</span><span class="td">五</span><span class="td">六</span></section>
|
<span class="td">五</span>
|
||||||
<section class="list do-fn-cl">
|
<span class="td">六</span>
|
||||||
<span class="td"
|
</section>
|
||||||
:class="{weeken:el.weeken, disabled: el.disable, selected: el.selected}"
|
<section class="tr do-fn-cl">
|
||||||
:repeat="calendar.list"
|
<span class="td"
|
||||||
:click="$getDate(el.disable, el.day)"
|
:class="{weeken:el.weeken, disabled: el.disabled, selected: el.selected}"
|
||||||
:text="el.day"></span>
|
:repeat="calendar.list"
|
||||||
</section>
|
:click="pick(el)"
|
||||||
</dd>
|
:text="el.day"></span>
|
||||||
<dd class="time" :if="showTime">
|
</section>
|
||||||
<label>
|
</dd>
|
||||||
<input type="text" :duplex-time="calendar.hour" data-format="hour"> 时
|
<dd class="time" :if="props.showTime">
|
||||||
</label>
|
<label>
|
||||||
<label>
|
<input type="text" :duplex-number="calendar.hour"> 时
|
||||||
<input type="text" :duplex-time="calendar.minute" data-format="minute"> 分
|
</label>
|
||||||
</label>
|
<label>
|
||||||
<label>
|
<input type="text" :duplex-number="calendar.minute"> 分
|
||||||
<input type="text" :duplex-time="calendar.second" data-format="second"> 秒
|
</label>
|
||||||
</label>
|
<label>
|
||||||
<a href="javascript:;" class="now" :click="$now">现在</a>
|
<input type="text" :duplex-number="calendar.second"> 秒
|
||||||
</dd>
|
</label>
|
||||||
<dd class="tips" :if="tips" :text="tips"></dd>
|
<a href="javascript:;" class="now" :click="now">现在</a>
|
||||||
</dl>
|
</dd>
|
||||||
|
<dt class="confirm">
|
||||||
|
<a href="javascript:;" :click="close" class="cancel">取消</a>
|
||||||
|
<a href="javascript:;" :click="onConfirm" class="ok">确定</a>
|
||||||
|
</dt>
|
||||||
|
<dd class="tips" :if="tips" :text="tips"></dd>
|
||||||
|
</dl>
|
||||||
</div>
|
</div>
|
|
@ -1,392 +0,0 @@
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @authors yutent (yutent@doui.cc)
|
|
||||||
* @date 2016-02-14 13:58:39
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
define([
|
|
||||||
'text!./main.htm',
|
|
||||||
'css!./style.css',
|
|
||||||
], function(tpl){
|
|
||||||
|
|
||||||
yua.ui.datepicker = '1.0.0'
|
|
||||||
yua.component('datepicker', {
|
|
||||||
$template: tpl,
|
|
||||||
$construct: function(sys, option, attr){
|
|
||||||
|
|
||||||
// 先合并config的配置及元素的属性
|
|
||||||
var opts = Object.assign({}, option, attr),
|
|
||||||
defVal;
|
|
||||||
|
|
||||||
if(!opts.value){
|
|
||||||
return yua.error('日历组件必须设置value属性')
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取初始值
|
|
||||||
defVal = sys.$up[opts.value]
|
|
||||||
|
|
||||||
//日期格式化, 默认会调用过滤器的格式'Y-m-d H:i:s'
|
|
||||||
if(!opts.showTime && !opts.format){
|
|
||||||
opts.format = 'Y-m-d';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 修正默认值, 如果不是Date对象, 则转为Date对象
|
|
||||||
if(!defVal){
|
|
||||||
if(opts.minDate){
|
|
||||||
defVal = opts.minDate;
|
|
||||||
}else if(opts.maxDate){
|
|
||||||
defVal = opts.maxDate;
|
|
||||||
}else{
|
|
||||||
defVal = new Date()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(!Date.isDate(defVal)){
|
|
||||||
defVal = new Date(defVal)
|
|
||||||
}
|
|
||||||
|
|
||||||
opts.update_value = opts.value
|
|
||||||
opts.value = defVal.format(opts.format)
|
|
||||||
|
|
||||||
opts.calendar = {
|
|
||||||
list: [1],
|
|
||||||
year: defVal.format('Y'),
|
|
||||||
month: defVal.format('m'),
|
|
||||||
day: defVal.format('d'),
|
|
||||||
hour: defVal.format('H'),
|
|
||||||
minute: defVal.format('i'),
|
|
||||||
second: defVal.format('s'),
|
|
||||||
minYear: 0,
|
|
||||||
minMonth: 0,
|
|
||||||
minDay: 0,
|
|
||||||
maxYear: 0,
|
|
||||||
maxMonth: 0,
|
|
||||||
maxDay: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
if(opts.minDate){
|
|
||||||
if(!Date.isDate(opts.minDate)){
|
|
||||||
opts.minDate = new Date(opts.minDate)
|
|
||||||
}
|
|
||||||
opts.calendar.minYear = opts.minDate.format('Y')
|
|
||||||
opts.calendar.minMonth = opts.minDate.format('m')
|
|
||||||
opts.calendar.minDay = opts.minDate.format('d')
|
|
||||||
}
|
|
||||||
|
|
||||||
if(opts.maxDate){
|
|
||||||
if(!Date.isDate(opts.maxDate)){
|
|
||||||
opts.maxDate = new Date(opts.maxDate)
|
|
||||||
}
|
|
||||||
opts.calendar.maxYear = opts.maxDate.format('Y')
|
|
||||||
opts.calendar.maxMonth = opts.maxDate.format('m')
|
|
||||||
opts.calendar.maxDay = opts.maxDate.format('d')
|
|
||||||
}
|
|
||||||
|
|
||||||
//移除部分属性
|
|
||||||
delete opts.minDate;
|
|
||||||
delete opts.maxDate;
|
|
||||||
return yua.mix(sys, opts)
|
|
||||||
},
|
|
||||||
$ready: function(vm, ele){
|
|
||||||
var last = {
|
|
||||||
year: +vm.calendar.year,
|
|
||||||
month: +vm.calendar.month,
|
|
||||||
day: +vm.calendar.day
|
|
||||||
},
|
|
||||||
timer;
|
|
||||||
|
|
||||||
getCalendar(vm, last) //初始化日历显示
|
|
||||||
|
|
||||||
//日历按钮,未超出限制时切换日历
|
|
||||||
vm.$turn = function(type, step){
|
|
||||||
var year = +vm.calendar.year,
|
|
||||||
month = +vm.calendar.month;
|
|
||||||
|
|
||||||
if(type === 1){
|
|
||||||
year += step;
|
|
||||||
}else{
|
|
||||||
month += step;
|
|
||||||
if(month < 1){
|
|
||||||
month = 12;
|
|
||||||
year--
|
|
||||||
}
|
|
||||||
if(month > 12){
|
|
||||||
month = 1;
|
|
||||||
year++
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(isLimited(vm.calendar, year, month) === true){
|
|
||||||
vm.tips = '日期超出限制';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
vm.calendar.year = year;
|
|
||||||
vm.calendar.month = numberFormat(month, 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//选择日期
|
|
||||||
vm.$getDate = function(disabled, day){
|
|
||||||
if(disabled)
|
|
||||||
return;
|
|
||||||
|
|
||||||
vm.calendar.day = day;
|
|
||||||
|
|
||||||
changeStyle(vm.calendar, day);
|
|
||||||
updateTime(vm, last);
|
|
||||||
vm.showCalendar = !1;
|
|
||||||
}
|
|
||||||
|
|
||||||
//输入框获取焦点时,显示日历
|
|
||||||
vm.$focus = function(){
|
|
||||||
vm.showCalendar = !0;
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取当前时间
|
|
||||||
vm.$now = function(){
|
|
||||||
var now = new Date(),
|
|
||||||
year = now.format('Y'),
|
|
||||||
month = now.format('m'),
|
|
||||||
day = now.format('d');
|
|
||||||
|
|
||||||
var isLimitYM = isLimited(year, month),
|
|
||||||
disabled = disabledDay(day, isLimitYM);
|
|
||||||
|
|
||||||
if(disabled){
|
|
||||||
vm.tips = '今天超出了限制日期';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
vm.calendar.year = year;
|
|
||||||
vm.calendar.month = month;
|
|
||||||
vm.calendar.day = day;
|
|
||||||
vm.calendar.hour = now.format('H');
|
|
||||||
vm.calendar.minute = now.format('i');
|
|
||||||
vm.calendar.second = now.format('s');
|
|
||||||
|
|
||||||
changeStyle(vm.calendar, day);
|
|
||||||
updateTime(vm, last);
|
|
||||||
|
|
||||||
vm.showCalendar = !1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/************************************************************/
|
|
||||||
|
|
||||||
vm.$watch('calendar.year', function(){
|
|
||||||
getCalendar(vm, last);
|
|
||||||
})
|
|
||||||
|
|
||||||
vm.$watch('calendar.month', function(){
|
|
||||||
getCalendar(vm, last);
|
|
||||||
})
|
|
||||||
vm.$watch('calendar.hour', function(v){
|
|
||||||
vm.calendar.hour = v
|
|
||||||
updateTime(vm, last)
|
|
||||||
})
|
|
||||||
vm.$watch('calendar.minute', function(v){
|
|
||||||
vm.calendar.minute = v
|
|
||||||
updateTime(vm, last)
|
|
||||||
})
|
|
||||||
vm.$watch('calendar.second', function(v){
|
|
||||||
vm.calendar.second = v
|
|
||||||
updateTime(vm, last)
|
|
||||||
})
|
|
||||||
|
|
||||||
vm.$watch('showCalendar', function(v){
|
|
||||||
if(v || !vm.value)
|
|
||||||
return;
|
|
||||||
|
|
||||||
vm.$up[vm.update_value] = vm.value
|
|
||||||
vm.$onUpdate(vm.value);
|
|
||||||
})
|
|
||||||
|
|
||||||
vm.$watch('tips', function(v){
|
|
||||||
if(!v)
|
|
||||||
return;
|
|
||||||
clearTimeout(timer);
|
|
||||||
timer = setTimeout(function(){
|
|
||||||
vm.tips = '';
|
|
||||||
}, 1500)
|
|
||||||
})
|
|
||||||
|
|
||||||
document.addEventListener('click', function(){
|
|
||||||
vm.showCalendar = !1;
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
showTime: false, //对话框上显示时间
|
|
||||||
showCalendar: false, //显示日历对话框
|
|
||||||
disabled: false, //是否禁用
|
|
||||||
tips: '',
|
|
||||||
format: '', // 日期显示格式
|
|
||||||
value: '', // 用于显示在输入框里的日期变量
|
|
||||||
$prevYear: '<<',
|
|
||||||
$nextYear: '>>',
|
|
||||||
$prevMonth: '<',
|
|
||||||
$nextMonth: '>',
|
|
||||||
$focus: yua.noop,
|
|
||||||
$turn: yua.noop,
|
|
||||||
$getDate: yua.noop,
|
|
||||||
$now: yua.noop,
|
|
||||||
$cancelBubble: function(event){
|
|
||||||
event.stopPropagation && event.stopPropagation() || (event.cancelBubble = true);
|
|
||||||
},
|
|
||||||
$onUpdate: yua.noop, //日期被修改后的回调
|
|
||||||
})
|
|
||||||
|
|
||||||
/**************** 公共函数 *****************/
|
|
||||||
//计算日历数组
|
|
||||||
function getCalendar(vm, last){
|
|
||||||
var year = +vm.calendar.year,
|
|
||||||
month = +vm.calendar.month,
|
|
||||||
nums = getTotalDays(year, month),
|
|
||||||
numsFixed = -getFirstDay(year, month) + 1,
|
|
||||||
isLimitYM = isLimited(vm.calendar, year, month);
|
|
||||||
|
|
||||||
vm.calendar.list.clear();
|
|
||||||
|
|
||||||
for(var i = numsFixed; i <= nums; i++){
|
|
||||||
|
|
||||||
var day = {
|
|
||||||
weeken: !1,
|
|
||||||
day: '',
|
|
||||||
selected: !1,
|
|
||||||
disable: !0
|
|
||||||
}
|
|
||||||
if(i > 0){
|
|
||||||
var d = getFirstDay(year, month, i)
|
|
||||||
day = {
|
|
||||||
weeken: d == 0 || d == 6,
|
|
||||||
day: i,
|
|
||||||
selected: isSelected(vm.calendar, last, i),
|
|
||||||
disable: disabledDay(vm.calendar, i, isLimitYM)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
vm.calendar.list.push(day)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//判断当前年/月是否超出限制
|
|
||||||
function isLimited(calendar, year, month){
|
|
||||||
var limit = {
|
|
||||||
Y: +calendar.minYear,
|
|
||||||
M: +calendar.minMonth,
|
|
||||||
mY: +calendar.maxYear,
|
|
||||||
mM: +calendar.maxMonth,
|
|
||||||
},
|
|
||||||
res = '';
|
|
||||||
|
|
||||||
if((!limit.Y && !limit.mY) || (!limit.M && !limit.mM) || !year){
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
if((limit.Y && year < limit.Y) || (limit.mY && year > limit.mY)){
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
if(month){
|
|
||||||
if(year === limit.Y){
|
|
||||||
if(limit.M && month < limit.M)
|
|
||||||
return true
|
|
||||||
|
|
||||||
if(month == limit.M)
|
|
||||||
res += '-'
|
|
||||||
}
|
|
||||||
|
|
||||||
if(year === limit.mY){
|
|
||||||
if(limit.mM && month > limit.mM)
|
|
||||||
return true
|
|
||||||
|
|
||||||
if(month == limit.mM)
|
|
||||||
res += '+'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return res
|
|
||||||
}
|
|
||||||
|
|
||||||
//判断指定天数是否有效
|
|
||||||
function disabledDay(calendar, day, limitedYM){
|
|
||||||
var minD = calendar.minDay,
|
|
||||||
maxD = calendar.maxDay;
|
|
||||||
|
|
||||||
if(limitedYM === '-')
|
|
||||||
return day < minD
|
|
||||||
|
|
||||||
if(limitedYM === '+')
|
|
||||||
return maxD && day > maxD
|
|
||||||
|
|
||||||
if(limitedYM === '-+')
|
|
||||||
return day < minD || (maxD && day > maxD)
|
|
||||||
|
|
||||||
return limitedYM
|
|
||||||
}
|
|
||||||
|
|
||||||
//判断指定天数是否被选中
|
|
||||||
function isSelected(calendar, last, day){
|
|
||||||
var year = +calendar.year,
|
|
||||||
month = +calendar.month;
|
|
||||||
|
|
||||||
return !(last.year !== year || last.month !== month || last.day !== day)
|
|
||||||
}
|
|
||||||
|
|
||||||
//修改当前选中日期的样式
|
|
||||||
function changeStyle(calendar, day){
|
|
||||||
calendar.list.forEach(function(item){
|
|
||||||
if(item.day != day){
|
|
||||||
item.selected = !1
|
|
||||||
}else{
|
|
||||||
item.selected = !0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//更新时间
|
|
||||||
function updateTime(vm, last){
|
|
||||||
var hour = 0,
|
|
||||||
minute = 0,
|
|
||||||
second = 0;
|
|
||||||
|
|
||||||
last = {
|
|
||||||
year: +vm.calendar.year,
|
|
||||||
month: +vm.calendar.month,
|
|
||||||
day: +vm.calendar.day
|
|
||||||
}
|
|
||||||
|
|
||||||
if(vm.showTime){
|
|
||||||
hour = vm.calendar.hour
|
|
||||||
minute = vm.calendar.minute
|
|
||||||
second = vm.calendar.second
|
|
||||||
}
|
|
||||||
vm.value = new Date(last.year, last.month - 1, last.day, hour, minute, second).format(vm.format)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//获取今年的年份/月份,返回的是数组
|
|
||||||
function getThisYearMonth(){
|
|
||||||
var oDate = new Date()
|
|
||||||
return [oDate.getFullYear(), oDate.getMonth() + 1]
|
|
||||||
}
|
|
||||||
|
|
||||||
//根据年份获取指定月份天数
|
|
||||||
function getTotalDays(year, month){
|
|
||||||
return new Date(year, month, 0).getDate()
|
|
||||||
}
|
|
||||||
|
|
||||||
//判断指定年月第一天是星期几
|
|
||||||
function getFirstDay(year, month, day){
|
|
||||||
return new Date(year, month - 1, day || 1).getDay()
|
|
||||||
}
|
|
||||||
//数字长度补全(前面加0)
|
|
||||||
function numberFormat(num, len){
|
|
||||||
num += ''
|
|
||||||
if(num.length === len)
|
|
||||||
return num
|
|
||||||
|
|
||||||
while(num.length < len)
|
|
||||||
num = '0' + num
|
|
||||||
return num
|
|
||||||
}
|
|
||||||
|
|
||||||
return yua
|
|
||||||
})
|
|
|
@ -1,56 +1,102 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent@doui.cc)
|
* @authors yutent (yutent@doui.cc)
|
||||||
* @date 2016-02-14 14:00:06
|
* @date 2016-02-14 14:00:06
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
@import "../../../css/var.scss";
|
@import 'var.scss';
|
||||||
.do-datepicker {position:relative;z-index:65534;width:100%;height:100%;
|
.do-datepicker { position:relative;width:100%; height:100%;color:nth($cgr, 1);font-size:14px;
|
||||||
|
|
||||||
a {text-decoration:none;}
|
a { text-decoration:none;color:nth($cgr, 1);
|
||||||
.date-input {display:block;width:100%;height:100%;padding:0 5px;line-height:18px;border:1px solid nth($cp, 1);@include ts();
|
|
||||||
|
|
||||||
&:focus {border-color:nth($ct, 1)}
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-box {position:absolute;left:0;top:100%;width:267px;height:auto;min-height:60px;padding:10px;line-height:35px;border:1px solid #ddd;background:#fff;font-size:14px;color:nth($cgr, 1);text-align:center;box-shadow:0 1px 5px rgba(0,0,0,.1);
|
|
||||||
|
|
||||||
dt.title {width:100%;height:35px;background:#e7e8eb;}
|
|
||||||
dd.contrl {position:relative;width:90%;height:35px;margin:0 5%;
|
|
||||||
|
|
||||||
a {position:absolute;left:0;top:0;width:35px;height:35px;color:nth($cgr, 1);font-weight:bold;}
|
|
||||||
a:hover {color:nth($ct, 1)}
|
|
||||||
a.prev-month {left:35px;}
|
|
||||||
a.next-month {left:auto;right:35px;}
|
|
||||||
a.next-year {left:auto;right:0;}
|
|
||||||
}
|
|
||||||
|
|
||||||
dd.calendar {width:100%;height:auto;
|
|
||||||
|
|
||||||
.week {width:100%;height:35px;margin-bottom:5px;border-bottom:1px solid #eee;}
|
|
||||||
span.td {float:left;width:35px;}
|
|
||||||
.list span.td {height:30px;line-height:30px;cursor:pointer;@include ts();
|
|
||||||
|
|
||||||
&:hover {background:nth($cp, 1);}
|
|
||||||
&.weeken {color:nth($cr, 1)}
|
|
||||||
&.selected {background:nth($ct, 2);color:#fff}
|
|
||||||
&.disabled {color:nth($cp, 3);cursor:default;}
|
|
||||||
&.disabled:hover {background:none;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dd.time {position:relative;width:100%;height:41px;padding:5px 0;margin-top:5px;line-height:30px;border-top:1px solid #eee;
|
|
||||||
|
|
||||||
label {float:left;width:60px;height:30px;
|
|
||||||
input {width:30px;height:30px;border:1px solid nth($cp, 1);text-align:center;}
|
|
||||||
}
|
|
||||||
.now {float:right;width:50px;height:30px;border-radius:3px;background:nth($ct, 1);color:#fff;text-align:center;
|
|
||||||
|
|
||||||
&:hover {background:nth($ct, 2);}
|
|
||||||
&:active {background:nth($ct, 3);}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dd.tips {position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;text-align:center;}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
&:hover {color:nth($cgr, 2);}
|
||||||
|
&:active {color:nth($cgr, 3);}
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-input { display:block; width:100%; height:100%; padding:0 5px; line-height:18px; border:1px solid nth($cp, 1); @include ts();
|
||||||
|
|
||||||
|
&:focus { border-color:nth($ct, 1); }
|
||||||
|
}
|
||||||
|
.calendar-box { position:absolute; left:0; top:100%; z-index:65534; width:267px; height:auto; min-height:60px;padding:10px;line-height:35px; border:1px solid #ddd; background:#fff; font-size:14px; color:nth($cgr, 1); text-align:center; box-shadow:0 1px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
&::before {position:absolute;left:0;top:0;z-index:-1;width:100%;height:85px;background:nth($ct, 1);content:""}
|
||||||
|
|
||||||
|
dt.contrl {position:relative; width:100%; height:35px; margin:5px 0 0;border-radius:3px;color:#fff;
|
||||||
|
|
||||||
|
a { position:absolute; left:0; top:0; width:35px; height:35px;color:#fff;
|
||||||
|
|
||||||
|
&::before {position:absolute;left:0;top:0;z-index:-1;display:block;width:35px;height:35px;border-radius:50%;background:nth($ct, 3); content:"";opacity:0;transform: scale(0);}
|
||||||
|
|
||||||
|
&:active {font-weight:bold;
|
||||||
|
&::before {animation:ripple .3s cubic-bezier(0.23, 1, 0.32, 1);}
|
||||||
|
}
|
||||||
|
&::after {content:"\e652";}
|
||||||
|
|
||||||
|
&.prev-month {left:35px;
|
||||||
|
&::after {content:"\e659"}
|
||||||
|
}
|
||||||
|
&.next-month {left:auto; right:35px;
|
||||||
|
&::after {content:"\e658"}
|
||||||
|
}
|
||||||
|
&.next-year {left:auto; right:0;
|
||||||
|
&::after {content:"\e653"}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
dd.table { width:100%; height:auto;
|
||||||
|
.thead {width:100%; height:35px; margin-bottom:5px;color:#fff;}
|
||||||
|
span.td {position:relative;float:left; width:33px;margin:1px;border-radius:3px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr span.td { height:30px; line-height:30px;cursor:pointer;
|
||||||
|
|
||||||
|
&::before {position:absolute;left:1px;top:0;z-index:-1;display:block;width:30px;height:30px;border-radius:50%;background:nth($cp, 1); content:"";opacity:0;transform: scale(0); transition:opacity .45s cubic-bezier(0.23, 1, 0.32, 1),transform .45s cubic-bezier(0.23, 1, 0.32, 1);}
|
||||||
|
|
||||||
|
&:hover,&.selected {
|
||||||
|
&::before {opacity:1;transform:scale(1);}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.weeken {color:nth($ct, 3);}
|
||||||
|
&.selected {color:#fff;
|
||||||
|
&::before {background:nth($ct, 2);}
|
||||||
|
}
|
||||||
|
&.disabled { color:nth($cp, 1); cursor:default;
|
||||||
|
|
||||||
|
&::before {display:none;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dd.time { position:relative; width:100%; height:41px; padding:5px 0; margin-top:5px; line-height:30px; border-top:1px solid #eee;
|
||||||
|
|
||||||
|
label { float:left; width:60px; height:30px;
|
||||||
|
input { width:30px; height:30px; border:1px solid nth($cp, 1); text-align:center; }
|
||||||
|
}
|
||||||
|
.now { float:right; width:50px; height:30px; border-radius:3px; background:nth($cp, 1);text-align:center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dt.confirm { position:relative; width:100%; height:41px; padding:10px 0 0;line-height:30px; border-top:1px solid #eee; text-align:right;
|
||||||
|
|
||||||
|
.ok,.cancel {display:inline-block;width:60px; height:30px;margin:0 0 0 10px;border-radius:3px;text-align:center;}
|
||||||
|
|
||||||
|
.ok { background:nth($ct, 1); color:#fff;
|
||||||
|
&:hover { background:nth($ct, 2); }
|
||||||
|
&:active { background:nth($ct, 3); }
|
||||||
|
}
|
||||||
|
.cancel {background:nth($cp, 1);}
|
||||||
|
}
|
||||||
|
|
||||||
|
dd.tips { position:absolute; z-index:65535; left:25%; top:40%; width:50%; height:30px; line-height:30px; background:rgba(0, 0, 0, 0.7); color:#fff; font-size:12px; text-align:center; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes ripple {
|
||||||
|
from {transform: scale(0);opacity:0;}
|
||||||
|
30% {opacity:.8;}
|
||||||
|
to {transform: scale(1.2); opacity:0;}
|
||||||
|
}
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 8.3 KiB |
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
import './main.scss'
|
import './main.scss'
|
||||||
|
|
||||||
Anot.ui.pages = '1.0.0'
|
Anot.ui.pager = '1.0.0'
|
||||||
//计算页码列表
|
//计算页码列表
|
||||||
function calculate({ currPage, maxPageShow, totalPages }) {
|
function calculate({ currPage, maxPageShow, totalPages }) {
|
||||||
let arr = []
|
let arr = []
|
||||||
|
@ -46,7 +46,7 @@ function update(currPage, vm) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Anot.component('pages', {
|
export default Anot.component('pager', {
|
||||||
construct: function(props, state) {
|
construct: function(props, state) {
|
||||||
props.className =
|
props.className =
|
||||||
'skin-' + (props.theme || 1) + ' ' + (props.color || 'plain')
|
'skin-' + (props.theme || 1) + ' ' + (props.color || 'plain')
|
||||||
|
@ -55,7 +55,7 @@ export default Anot.component('pages', {
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
return `
|
return `
|
||||||
<div class="do-pages do-fn-noselect" :class="{{props.className}}">
|
<div class="do-pager do-fn-noselect" :class="{{props.className}}">
|
||||||
<a class="normal"
|
<a class="normal"
|
||||||
:if="currPage > 1 && !props.simpleMode"
|
:if="currPage > 1 && !props.simpleMode"
|
||||||
:attr="{href: parseUrl(1)}"
|
:attr="{href: parseUrl(1)}"
|
|
@ -6,9 +6,9 @@
|
||||||
* @version $Id$
|
* @version $Id$
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "../css/var.scss";
|
@import "var.scss";
|
||||||
|
|
||||||
.do-pages {height:auto;text-align:center;font-size:13px;color: nth($cgr, 1);
|
.do-pager {height:auto;text-align:center;font-size:13px;color: nth($cgr, 1);
|
||||||
|
|
||||||
a {display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color: nth($cgr, 1);text-decoration:none;cursor:pointer;}
|
a {display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color: nth($cgr, 1);text-decoration:none;cursor:pointer;}
|
||||||
a.curr, a.disabled {cursor:default;}
|
a.curr, a.disabled {cursor:default;}
|