mobiscroll.custom2.17日期时间插件使用方法以及禁止选择之前的日期

2023-02-25 阅读：1172 类型：前端分类：html 标签： html 插件

mobiscroll.custom插件用在移动端的日期选择上，受到广泛的前端开发者喜爱，以下是使用方法、时间日期限制，及插件参数使用

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>mobiscroll练习</title>
  <link rel="stylesheet" type="" href="../06-mobiscoll插件案例/css/mobiscroll.custom-2.17.1.min.css">
 </head>
 <body>
  <input type="text" id="demo_date">
  <input type="text" id="demo_time">
  <script src="/js/jquery.min.js"></script>
  <script src="/js/mobiscroll.custom-2.17.1.min.js"></script>
  <script>
  var now = new Date();
  var currYear = now.getFullYear();
  var currMonth = now.getMonth() + 1;
  var currDay = now.getDate();
  var currHours = now.getHours();
  var currMinutes = now.getMinutes();
  
   $('#demo_date').mobiscroll().date({
     preset: 'date', //日期，可选：date\datetime\time\tree_list\image_text\select
     theme: "ios"; //皮肤样式，可选：default\android\android-ics light\android-ics\ios\jqm\sense-ui\wp light\wp
     mode: "scroller",
     display: "bottom",//显示方式 ，可选：modal\inline\bubble\top\bottom
     lang: "zh",
     showLabel: true,//false 显示头部
     rows: 5,//显示多少行，定义3就显示3行,
     dateFormat: 'yyyy-mm-dd', // 面板日期格式
     setText: '确认', //确认按钮名称
     cancelText: '取消', //取消按钮名称
     dateOrder: 'yyyymmdd', //面板中日期排列格式
     dayText: '日',
     monthText: '月',
     yearText: '年', //面板中年月日文字
     // showNow: false,
     nowText: "今",
     endYear: currYear + 10, //结束年份
     minDate: new Date(currYear, currMonth - 1, currDay + 1),
     onSelect: function (textVale, inst) { //选中时触发事件
      console.log("我被选中了.....");
     },
     onClose: function (textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
      console.log("textVale--" + textVale);
      console.log(this.id);//this表示调用该插件的对象
     }
 
     //wheels:[[11,12,13],[21,22,23],[01,02,03]],// 当前你定义的数组(即要滚动的数组),
     //defaultValue: [12,22]//默认显示当前滚动到哪个值,
     // formatResult://滚动到某个值后执行某个方法
     // function(){
     //  console.log(1);
     // }
   });
   $('#demo_time').mobiscroll().time({
      preset: 'date', //日期，可选：date\datetime\time\tree_list\image_text\select
      theme: "ios"; //皮肤样式，可选：default\android\android-ics light\android-ics\ios\jqm\sense-ui\wp light\wp
      mode: "scroller",
      display: "bottom",//显示方式 ，可选：modal\inline\bubble\top\bottom
      lang: "zh",
      showLabel: true,//false 显示头部
      rows: 5,//显示多少行，定义3就显示3行,
      dateFormat: 'yyyy-mm-dd', // 面板日期格式
      setText: '确认', //确认按钮名称
      cancelText: '取消', //取消按钮名称
      dateOrder: 'yyyymmdd', //面板中日期排列格式
      dayText: '日',
      monthText: '月',
      yearText: '年', //面板中年月日文字
      // showNow: false,
      nowText: "今",
      endYear: currYear + 10, //结束年份
      minDate: new Date(currYear, currMonth - 1, currDay + 1),
      onSelect: function (textVale, inst) { //选中时触发事件
       console.log("我被选中了.....");
      },
      onClose: function (textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
       console.log("textVale--" + textVale);
       console.log(this.id);//this表示调用该插件的对象
      }
  
      //wheels:[[11,12,13],[21,22,23],[01,02,03]],// 当前你定义的数组(即要滚动的数组),
      //defaultValue: [12,22]//默认显示当前滚动到哪个值,
      // formatResult://滚动到某个值后执行某个方法
      // function(){
      //  console.log(1);
      // }
   });
 </script>
 </body>
 </html>

其他说明：时间限制：minDate: new Date(2023,2,25,11,24),

附件：

mobiscroll.custom.min.js

jquery-1.10.2.js

mobiscroll.custom.min.css