mui_日历选择器(dtpicker)的运用

原创 yinglsc 随笔 mui 245阅读 2018-01-29 10:11:10 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>筛选条件</title>
<link href="https://cdn.bootcss.com/mui/3.4.0/css/mui.min.css"; rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<link rel="stylesheet" href="../css/iconfont1.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../plugins/mui/css/app.css" />
<!--<link href="../css/mui.picker.css" rel="stylesheet" />
<link href="../css/mui.dtpicker.css" rel="stylesheet" />-->
<link rel="stylesheet" type="text/css" href="../plugins/mui/css/mui.picker.min.css"/>
</head>
<body>
<style>

        .mui-table-view-cell>a:not(.mui-btn){margin: -11px -15px;}

    </style>
    <header id="header" class="mui-bar mui-bar-nav green_nav" >
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" ></a>
        <h1 class="mui-title" >筛选条件</h1>
    </header>
    <form action="">
    <section class="dingsqdCheck_cont0">
        <div class="dingsqdCheck_cont0_cont0"></div>
        <ul class="mui-table-view dingsqdCheck_ul">
           <li class="mui-table-view-cell">
            <a class="mui-navigate-right dingsqdCheck_cont1"><span>起始日期</span>
                <a id='demo4' onclick="start()"  class="btn  dingsqdCheck_cont2 startrq">请选择</a>
            </a>
            </li>
            <li  class="mui-table-view-cell" id='showUserPicker1'>
                <a  class="mui-navigate-right dingsqdCheck_cont1"><span>结束日期</span>
                    <a  id='demo5' onclick="end()" class="btn dingsqdCheck_cont2 endrq" >请选择</a>
                </a>
                <input type="text"value="" id="deviceInput" style="display: none;"/>
            </li>
        </ul>
        <div class="clean"></div>
    </section>
    <div style="text-align: center;">
        <button type="button" onclick="save()" class="mui-btn mui-btn-success dingsqdCheck_bt">确定</button>
    </div>
    </form>
</body>
<script src="/plugins/mui/js/mui.min.js"></script>
<script src="/plugins/mui/js/mui.picker.js"></script>
<script src="/plugins/mui/js/mui.poppicker.js"></script>
<script src="/js/jquery-2.1.4.js"></script>
<script src="/plugins/mui/js/mui.picker.min.js"></script>
<script>

function start(){

var start = localStorage.startTime;

var option ={type: "date"};

if(start!=null){
    option ={type: "date", value :start};
}

var dtPicker = new mui.DtPicker(option);
dtPicker.show(function(e) {
  localStorage.startTime = e.value;
  $(".startrq").text(e.value);
});

}

function end(){
var end = localStorage.endTime;

var option ={type: "date"};

if(end!=null){
    option ={type: "date", value :end};
}

var dtPicker = new mui.DtPicker(option);

dtPicker.show(function(e) {
    localStorage.endTime = e.value;
    $(".endrq").text(e.value);
});

}

function save(){
   start = $(".startrq").text();
   end = $(".endrq").text();
   if(start == "请选择"){
           mui.alert("请选择起始日期");
           return;
  }
   if(end == "请选择"){
         mui.alert("请选择结束日期");
         return;
   }
  window.history.go(-1);
}

$(function(){
    var ckStart=localStorage.startTime;
    var ckEnd=localStorage.endTime;
    if(ckStart){
        $(".startrq").text(ckStart);
    }
    if(ckEnd){
        $(".endrq").text(ckEnd);
    }
})

</script>

</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复