JQ制作手机移动端出生年月日日期选择源代码

92建站   2021-09-05   收藏本文

这套JQ制作手机移动端出生年月日日期选择源代码,是非常简单实用的jQuery手机移动端出生年月日日期选择代码,点击输入框遮罩弹出年月日时间选择插件,触屏上下滑动进行选择。

使用方法:

<script src="./js/libs/jquery.min.js"></script>
<script src="./js/libs/flexible.debug.js"></script>
<script src="./js/libs/flexible_css.debug.js"></script>
<script src="./js/libs/mobileFix.js"></script>
<script src="./js/libs/swiper.min.js"></script>
<script src="./js/libs/kinerDatePicker.js"></script>
<script>
$('#kinerDatePickerInput1').kinerDatePicker({
  clickMaskHide: true,
  showHandler: function (ctx) {
      console.log("显示时间选择器:",ctx);
  },
  hideHandler: function (ctx) {
      console.log("隐藏时间选择器:",ctx);
  },
  changeHandler: function (vals,ctx) {
      console.log("时间改变:",vals,ctx);
  },
  okHandler: function (vals, ctx) {
      console.log("确定选择:",vals,ctx);
  },
  cancelHandler: function (ctx) {
      console.log("取消选择:",ctx);
  }
});

$('#btn1').click(function () {
  console.log($('#kinerDatePickerInput1').kinerDatePickerVal());
});
$('#kinerDatePickerInput2').kinerDatePicker({
  clickMaskHide: true,
  showHandler: function (ctx) {
      console.log("显示时间选择器:",ctx);
  },
  hideHandler: function (ctx) {
      console.log("隐藏时间选择器:",ctx);
  },
  changeHandler: function (vals,ctx) {
      console.log("时间改变:",vals,ctx);
  },
  okHandler: function (vals, ctx) {
      console.log("确定选择:",vals,ctx);
  },
  cancelHandler: function (ctx) {
      console.log("取消选择:",ctx);
  }
});

$('#btn2').click(function () {
  console.log($('#kinerDatePickerInput2').kinerDatePickerVal());
});
$('#kinerDatePickerInput3').kinerDatePicker({
  clickMaskHide: true,
  showHandler: function (ctx) {
      console.log("显示时间选择器:",ctx);
  },
  hideHandler: function (ctx) {
      console.log("隐藏时间选择器:",ctx);
  },
  changeHandler: function (vals,ctx) {
      console.log("时间改变:",vals,ctx);
  },
  okHandler: function (vals, ctx) {
      console.log("确定选择:",vals,ctx);
  },
  cancelHandler: function (ctx) {
      console.log("取消选择:",ctx);
  }
});

$('#btn3').click(function () {
  console.log($('#kinerDatePickerInput3').kinerDatePickerVal());
});
</script>

效果图:

年月日选择代码,日期选择代码

免责声明:本站模板均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。
展开