Permalink
Browse files

fix: 日期样式错乱

  • Loading branch information...
whizbz11 committed Nov 29, 2016
1 parent 2190f2b commit 3a27404e5ffa70a35bd23564faf890a4e4166d72
Showing with 332 additions and 6 deletions.
  1. +3 −1 js/neoui-datetimepicker.js
  2. +2 −1 js/neoui-validate.js
  3. +3 −1 js/neoui-yearmonth.js
  4. +324 −3 scss/ui/neoui-datetimepicker.scss
@@ -37,7 +37,9 @@ DateTimePicker.fn.init = function(){
// }
setTimeout(function(){
self._input.setAttribute('readonly','readonly');
if (self._input) {
self._input.setAttribute('readonly','readonly');
}
},1000);
on(this._input, 'focus', function(e){
View
@@ -240,7 +240,8 @@ Validate.fn.doValid = function(options) {
if (typeof pValue != 'undefined')
value = pValue
else if (this.element)
value = this.element.value
// value = this.element.value
value = this.element.value?this.element.value:this.referDom.value
if (this.isEmpty(value) && this.required) {
this.showMsg(this.nullMsg)
View
@@ -149,7 +149,9 @@ const YearMonth = BaseComponent.extend({
var oThis = this;
on(monthPage, 'click', function(e){
var _m = e.target._value;
oThis.month = _m;
if (_m) {
oThis.month = _m;
}
monthPage.querySelector('.u-date-content-title').innerHTML = _m + '';
oThis.setValue(oThis.year + '-' + oThis.month);
oThis.hide();
@@ -402,11 +402,328 @@ $date-bg-color: rgb(27,174,222) !default;
padding-bottom:0px;
padding-left:0.5* 16px;
padding-right:0.5* 16px;
&.u-date-ok,&.u-date-cancel,&.u-date-clean {
padding-top: 2px;
padding-bottom: 2px;
}
.u-date-clean{
min-width: 0px;
}
.u-button:focus:not(:active) {
background-color: white; }
.u-button:active {
background-color: white; }
.clockpicker-plate{
width:8.5* 16px;
height:8.5* 16px;
}
.clockpicker-canvas{
width:8.5* 16px;
height:8.5* 16px;
}
.clockpicker-dial{
width:8.5* 16px;
height:8.5* 16px;
}
.clockpicker-svg{
width:8.5* 16px;
height:8.5* 16px;
position: relative;
top: 0.7* 16px;
left: 0.7* 16px;
}
.clockpicker-popover{
box-shadow:none;
overflow: visible;
}
.popover-content{
position: relative;
left: -0.275* 16px;
}
.clockpicker-tick-1{
left: 8.5/12.5 * 87px; top: 8.5/12.5 *7px;
}
.clockpicker-tick-2{
left: 8.5/12.5 *114px; top: 8.5/12.5 * 40.2346px; font-size: 120%;
}
.clockpicker-tick-3{left: 8.5/12.5 * 133.765px; top: 8.5/12.5 * 60px; font-size: 120%;}
.clockpicker-tick-4{left: 8.5/12.5 * 141px; top: 8.5/12.5 * 87px; font-size: 120%;}
.clockpicker-tick-5{left: 8.5/12.5 * 133.765px; top: 8.5/12.5 * 114px; font-size: 120%;}
.clockpicker-tick-6{left: 8.5/12.5 * 114px; top: 8.5/12.5 * 133.765px; font-size: 120%;}
.clockpicker-tick-7{left: 8.5/12.5 * 87px; top: 8.5/12.5 * 141px; font-size: 120%;}
.clockpicker-tick-8{left: 8.5/12.5 * 60px; top: 8.5/12.5 * 133.765px; font-size: 120%;}
.clockpicker-tick-9{left: 8.5/12.5 * 40.2346px; top: 8.5/12.5 * 114px; font-size: 120%;}
.clockpicker-tick-10{left: 8.5/12.5 * 33px; top: 8.5/12.5 * 87px; font-size: 120%;}
.clockpicker-tick-11{left: 8.5/12.5 * 40.2346px; top: 8.5/12.5 * 60px; font-size: 120%;}
.clockpicker-tick-12{left: 8.5/12.5 * 60px; top: 8.5/12.5 * 40.2346px; font-size: 120%;}
.clockpicker-tick-13{left: 8.5/12.5 * 87px; top: 8.5/12.5 * 33px; font-size: 120%;}
.clockpicker-tick-14{left: 8.5/12.5 * 127px; top: 8.5/12.5 * 17.718px;}
.clockpicker-tick-15{left: 8.5/12.5 * 156.282px; top: 8.5/12.5 * 47px;}
.clockpicker-tick-16{left: 8.5/12.5 * 167px; top: 8.5/12.5 * 87px;}
.clockpicker-tick-17{left: 8.5/12.5 * 156.282px; top: 8.5/12.5 * 127px;}
.clockpicker-tick-18{left: 8.5/12.5 * 127px; top: 8.5/12.5 * 156.282px;}
.clockpicker-tick-19{left: 8.5/12.5 * 87px; top: 8.5/12.5 * 167px;}
.clockpicker-tick-20{left: 8.5/12.5 * 47px; top: 8.5/12.5 * 156.282px;}
.clockpicker-tick-21{left: 8.5/12.5 * 17.718px; top: 8.5/12.5 * 127px;}
.clockpicker-tick-22{left: 8.5/12.5 * 7px; top: 8.5/12.5 * 87px;}
.clockpicker-tick-23{left: 8.5/12.5 * 17.718px; top: 8.5/12.5 * 47px;}
.clockpicker-tick-24{left: 8.5/12.5 * 47px; top: 8.5/12.5 * 17.718px;}
.clockpicker-tick-25{left: 8.5/12.5 * 87px; top: 8.5/12.5 * 7px; font-size: 120%;}
.clockpicker-tick-26{left: 8.5/12.5 * 127px; top: 8.5/12.5 * 17.718px; font-size: 120%;}
.clockpicker-tick-27{left: 8.5/12.5 * 156.282px; top: 8.5/12.5 * 47px; font-size: 120%;}
.clockpicker-tick-28{left: 8.5/12.5 * 167px; top: 8.5/12.5 * 87px; font-size: 120%;}
.clockpicker-tick-29{left: 8.5/12.5 * 156.282px; top: 8.5/12.5 * 127px; font-size: 120%;}
.clockpicker-tick-30{left: 8.5/12.5 * 127px; top: 8.5/12.5 * 156.282px; font-size: 120%;}
.clockpicker-tick-31{left: 8.5/12.5 * 87px; top: 8.5/12.5 * 167px; font-size: 120%;}
.clockpicker-tick-32{left: 8.5/12.5 * 47px; top: 8.5/12.5 * 156.282px; font-size: 120%;}
.clockpicker-tick-33{left: 8.5/12.5 * 17.718px; top: 8.5/12.5 * 127px; font-size: 120%;}
.clockpicker-tick-34{left: 8.5/12.5 * 7px; top: 8.5/12.5 * 87px; font-size: 120%;}
.clockpicker-tick-35{left: 8.5/12.5 * 17.718px; top: 8.5/12.5 * 47px; font-size: 120%;}
.clockpicker-tick-36{left: 8.5/12.5 * 47px; top: 8.5/12.5 * 17.718px; font-size: 120%;}
//TODO 后期调整颜色
.u-date-header{
height:70px;
width:100%;
background-color: $date-bg-color;
color:#fff;
padding: 10px;
box-sizing: border-box;
.u-date-header-year{
font-size: 18px;
cursor: pointer;
}
.u-date-header-month{
cursor: pointer;
}
.u-date-header-h3{
display: block;
font-weight: 500;
text-transform: capitalize;
webkit-transition: opacity .35s cubic-bezier(.4,0,.2,1);
transition: opacity .35s cubic-bezier(.4,0,.2,1);
//font-size: 30px;
font-size: 20px;
line-height: 28px;
margin:0;
padding:0;
.u-date-header-time{
font-size: 20px;
cursor: pointer;
}
}
}
.u-date-content{
position: relative;
display: block;
overflow-x: hidden;
overflow-y: hidden;
width:100%;
//height: 356px;
height: 226px;
.u-date-cell{
float:left;
width:14.28%;
//line-height: 55px;
line-height: 22px;
margin-bottom: 8px;
color:#757575;
text-align: center;
cursor: pointer;
&:hover{
background-color: $primary-color;
}
}
.u-date-cell.current{
color: #fff;
background: #44BDE4;
border-radius: 50%;
}
.u-date-content-title{
color:#757575;
text-align: center;
line-height: 24px;
}
.u-date-week{
left: -4px;
position: relative;
}
.u-date-week span{
text-align: center;
width: 14.25%;
display: inline-block;
padding: 10px 0;
box-sizing: border-box;
}
.u-date-pre-button, .u-date-next-button{
position: absolute;
top:-24px;
position: absolute;
z-index: 1;
font-size: 16px;
height: 48px !important;
min-width: 32px !important;
width: 32px !important;
}
.u-date-pre-button{
left:-4px;
}
.u-date-next-button{
right:0px;
}
.u-date-content-year-cell{
float:left;
width:25%;
//line-height: 100px;
line-height: 64px;
color:#757575;
text-align: center;
cursor: pointer;
&:hover{
background-color: $primary-color;
}
}
.u-date-content-year-cell.current{
color: #0377C1;
}
}
.u-date-content-page{
position: absolute;
left: 0;
right:0;
top: 0;
-webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-timing-function: cubic-bezier(.4,0,.2,1);
-webkit-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: opacity,-webkit-transform;
transition-property: opacity,transform,-webkit-transform;
transform:translateX(0);
&.left-page{
transform:translateX(-396px);
}
&.right-page{
transform:translateX(396px);
}
&.zoom-in{
transform: scale3d(.3, .3, .3);
}
}
.u_time_box{
position: absolute;
height: 56px;
width: 100%;
top: 60px;
}
.u_time_box .u_time_cell{
display: inline-block;
width:33.3%;
height:100%;
color: #666;
text-align: center;
}
.u_time_cell div{
display: block;
height: 56px;
width: 100%;
overflow: hidden;
line-height: 56px;
text-align: center;
position: relative;
}
.u_time_cell .u-input{
display:block;
width:30px;
height:56px;
}
.scroll-touch{
width:33%;
height:100%;
display: inline-block;
position:relative;
vertical-align:top;
transition: all 0.100s ease-out;
}
.u-scroll{
transition: all 0.100s ease-out;
user-select:none
}
.scroll-box{
overflow: hidden;
/*margin-top: 40px;*/
height: 300px;
position:relative;
}
.scroll-shadow{
background: linear-gradient(#ffffff 0%,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #ffffff 100%);
z-index:99999;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.scroll-touch div {
position: absolute;
height: 60px;
top: 120px;
width: 60%;
margin: 0px 20%;
border: 2px solid #3F51B5;
border-left: none;
border-right: none;
}
.scroll-touch dl{
margin: 0px;
}
.scroll-touch dd{
user-select:none ;
height:60px;
line-height:60px;
}
.u-disabled{
background: rgba(158,158,158, 0.20);
}
.data-clockpicker-plate{
left:0px;
}
.u-date-content-title div{
display:inline-block;
cursor:pointer;
}
.u-date-content-title .u-date-content-title-time{
display: block;
position: relative;
top: -4px;
}
}
@@ -468,6 +785,10 @@ $date-bg-color: rgb(27,174,222) !default;
padding-bottom:0 /16 * 1.5 * $unit;
padding-left:0.5* 16 /16 * 1.5 * $unit;
padding-right:0.5* 16 /16 * 1.5 * $unit;
&.u-date-ok,&.u-date-cancel,&.u-date-clean {
padding-top: 2px;
padding-bottom: 2px;
}
}
.u-date-clean{

0 comments on commit 3a27404

Please sign in to comment.