omim - update date picker
This commit is contained in:
dntzhang
parent
76d3c88086
commit
7d68f8f962
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
m-avatar {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
m-badge {
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
|
||||
import '../../src/date-picker/index.tsx'
|
||||
import { render, h } from 'omi'
|
||||
|
||||
render(
|
||||
<div>
|
||||
<m-date-picker></m-date-picker>
|
||||
</div>
|
||||
, 'body')
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Add Omi in One Minute</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<m-color-picker id='picker' save="0" preview="0" button='0' clear='0' width="300px"></m-color-picker>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var picker = document.querySelector('#picker')
|
||||
picker.addEventListener('change', function(evt){
|
||||
console.log(evt.detail.color)
|
||||
})
|
||||
</script>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/color-picker/index.js"></script>
|
||||
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
<img src="//alloyteam.github.io/github.png" alt="">
|
||||
</a>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,16 +1,22 @@
|
|||
import { WeElement, extractClass, classNames, h, tag } from 'omi'
|
||||
import css from './index.scss'
|
||||
import '../icon'
|
||||
import '../input'
|
||||
|
||||
interface Props {
|
||||
lan: string
|
||||
lan: string,
|
||||
selectedDate: string
|
||||
}
|
||||
|
||||
@tag('m-date-picker')
|
||||
class DatePicker extends WeElement<Props, {}> {
|
||||
|
||||
static defaultProps = {
|
||||
lan: 'en'
|
||||
}
|
||||
|
||||
static css = css
|
||||
nowYear: number
|
||||
nowMonth: number
|
||||
nowDay: number
|
||||
|
||||
install() {
|
||||
this.now = new Date()
|
||||
|
|
@ -28,12 +34,20 @@ class DatePicker extends WeElement<Props, {}> {
|
|||
|
||||
locale: any
|
||||
installed() {
|
||||
import('./locale/' + this.props.lan).then((locale) => {
|
||||
this.locale = locale
|
||||
|
||||
|
||||
import('./locale/' + this.props.lan + '.js').then((locale) => {
|
||||
console.log(locale.default)
|
||||
this.locale = locale.default
|
||||
this.update(true)
|
||||
})
|
||||
}
|
||||
|
||||
selectedDate: string
|
||||
dateArr: string[]
|
||||
currentDate: Date
|
||||
now: Date
|
||||
|
||||
initCurrentDate() {
|
||||
if (this.selectedDate) {
|
||||
this.dateArr = this.selectedDate.split('-')
|
||||
|
|
@ -46,6 +60,19 @@ class DatePicker extends WeElement<Props, {}> {
|
|||
}
|
||||
}
|
||||
|
||||
year: number
|
||||
month: number
|
||||
day: number
|
||||
begin: number
|
||||
count: number
|
||||
preMonthDate: Date
|
||||
preYear: number
|
||||
preMonth: number
|
||||
preCount: number
|
||||
nextMonthDate: Date
|
||||
nextYear: number
|
||||
nextMonth: number
|
||||
|
||||
initDate() {
|
||||
this.year = this.currentDate.getFullYear()
|
||||
this.month = this.currentDate.getMonth()
|
||||
|
|
@ -89,6 +116,7 @@ class DatePicker extends WeElement<Props, {}> {
|
|||
}
|
||||
|
||||
|
||||
noSelected: boolean
|
||||
onSelectDate = (evt) => {
|
||||
this.selectedDate = evt.target.getAttribute('data-date')
|
||||
this.noSelected = false
|
||||
|
|
|
|||
|
|
@ -3,7 +3,10 @@
|
|||
//! author : Aggelos Karalias : https://github.com/mehiel
|
||||
|
||||
import moment from '../moment';
|
||||
import isFunction from '../lib/utils/is-function';
|
||||
|
||||
function isFunction(functionToCheck) {
|
||||
return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
|
||||
}
|
||||
|
||||
export default moment.defineLocale('el', {
|
||||
monthsNominativeEl : 'Ιανουάριος_Φεβρουάριος_Μάρτιος_Απρίλιος_Μάιος_Ιούνιος_Ιούλιος_Αύγουστος_Σεπτέμβριος_Οκτώβριος_Νοέμβριος_Δεκέμβριος'.split('_'),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
//! moment.js locale configuration
|
||||
//! locale : English (United Kingdom) [en], same as en-gb
|
||||
//! author : Chris Gedrim : https://github.com/chrisgedrim
|
||||
|
||||
import moment from '../moment';
|
||||
|
||||
export default moment.defineLocale('en', {
|
||||
months : 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
|
||||
monthsShort : 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
|
||||
weekdays : 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
|
||||
weekdaysShort : 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
|
||||
weekdaysMin : 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'),
|
||||
longDateFormat : {
|
||||
LT : 'HH:mm',
|
||||
LTS : 'HH:mm:ss',
|
||||
L : 'DD/MM/YYYY',
|
||||
LL : 'D MMMM YYYY',
|
||||
LLL : 'D MMMM YYYY HH:mm',
|
||||
LLLL : 'dddd, D MMMM YYYY HH:mm'
|
||||
},
|
||||
calendar : {
|
||||
sameDay : '[Today at] LT',
|
||||
nextDay : '[Tomorrow at] LT',
|
||||
nextWeek : 'dddd [at] LT',
|
||||
lastDay : '[Yesterday at] LT',
|
||||
lastWeek : '[Last] dddd [at] LT',
|
||||
sameElse : 'L'
|
||||
},
|
||||
relativeTime : {
|
||||
future : 'in %s',
|
||||
past : '%s ago',
|
||||
s : 'a few seconds',
|
||||
ss : '%d seconds',
|
||||
m : 'a minute',
|
||||
mm : '%d minutes',
|
||||
h : 'an hour',
|
||||
hh : '%d hours',
|
||||
d : 'a day',
|
||||
dd : '%d days',
|
||||
M : 'a month',
|
||||
MM : '%d months',
|
||||
y : 'a year',
|
||||
yy : '%d years'
|
||||
},
|
||||
dayOfMonthOrdinalParse: /\d{1,2}(st|nd|rd|th)/,
|
||||
ordinal : function (number) {
|
||||
var b = number % 10,
|
||||
output = (~~(number % 100 / 10) === 1) ? 'th' :
|
||||
(b === 1) ? 'st' :
|
||||
(b === 2) ? 'nd' :
|
||||
(b === 3) ? 'rd' : 'th';
|
||||
return number + output;
|
||||
},
|
||||
week : {
|
||||
dow : 1, // Monday is the first day of the week.
|
||||
doy : 4 // The week that contains Jan 4th is the first week of the year.
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue