Permalink
Browse files

fix: 日期样式错乱

  • Loading branch information...
1 parent 2190f2b commit 3a27404e5ffa70a35bd23564faf890a4e4166d72 @whizbz11 whizbz11 committed Nov 29, 2016
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){
@@ -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)
@@ -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.