lc-date-picker

日期选择器组件

注意事项

• 用于数据选择，日期选择，时间选择。
• H5使用需在入口文件index.html内引入data-picker-h5.js

效果

使用方法

<template>
  <div class="lc-demo">
    <title title="lc-date-picker"></title>
    <category title="选择器Picker"></category>
    <div style="align-items: center">
        <text class="mt20">pick value: {{value}}</text>
        <lc-button text="normalpick" type="normal"  @LcButtonClicked="normalpick" class="mt20"></lc-button>
        <lc-button text="pickDate" type="normal"  @LcButtonClicked="pickDate" class="mt20"></lc-button>
        <lc-button text="pickTime" type="normal"  @LcButtonClicked="pickTime" class="mt20"></lc-button>
    </div>
    <category title="按钮组件"></category>
    <lc-input 
            type="date"
            placeholder="select date"
            :autofocus="false"
            value=""
            class="mt20"
            :input-style="inputStyle"
            onchange="onchange"
            :max = "2029-11-28"
            :min = "2015-11-28"/>
    <lc-input
        type="time"
        class="mt20"
        placeholder="select time"
        :autofocus="false"
        value=""
        onchange="onchange"
        :input-style="inputStyle"
    />
  </div>
</template>

<style>
  .mt20{margin-top: 20px;}
  .lc-demo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
  }
</style>

<script> 
  import Light from 'light';
  import Title from 'lighting-ui/packages/_mods/title.vue';
  import LcButton from 'lighting-ui/packages/lc-button';
  import LcInput from 'lighting-ui/packages/lc-input';
  import Category from 'lighting-ui/packages/_mods/category.vue';
 
  module.exports = {
    data: () => ({
        value:'',
        txtChange:'',
        inputStyle:{
          fontSize:'36px',
          textAlign:'center'
        }
    }),
    components: { Title, Category, LcButton,LcInput},
    methods: {
      normalpick: function() {
        const picker = Light.requireModule('picker');
        var self = this;
    	  picker.pick({
    	  height: '300px',
    	  items: [1, 2, 3, 4],
    	}, function(ret) {
    	  var result = ret.result;
    	  if (result == 'success') {
    		self.value = ret.data;
    	  }
    	})
      },
      pickDate: function(e) {
        const picker = Light.requireModule('picker');  
    	var self = this;
    	picker.pickDate({
    	  'value': '2017-12-15',
    	  'max': '2022-12-30',
    	  'min': '2000-12-30',
    	}, function(ret) {
    	  var result = ret.result;
    	  if (result == 'success') {
    		self.value = ret.data;
    	  }
    	});
      },
      pickTime:function(){
        const picker = Light.requireModule('picker');  
    	var self = this;
    	picker.pickTime({
    	}, function(ret) {
    	  var result = ret.result;
    	  if (result == 'success') {
    		self.value = ret.data;
    	  }
    	});
      },
      onchange: function(event) {
          this.txtChange = event.value;
      }
    }
  }
</script>

单选 picker参数

pick(options, callback[options])

• options {Object}：调用单选 picker 选项
  • index {number}：默认选中的选项
  • items {array}：picker 数据源
• callback {function (ret)}：执行完读取操作后的回调函数。ret {Object} 为 callback 函数的参数，有两个属性：
  • result {string}：结果三种类型 success, cancel, error
  • data {number}：选择的选项,仅成功确认时候存在。

日期选择date picker参数

pickDate(options, callback[options])

• options {Object}：调用 date picker 选项
  • value {string}：必选，date picker 选中的值，date 的字符串格式为yyyy-MM-dd
  • max {string}：可选，date 的最大值
  • min {string}：可选，date 的最小值
• callback {function (ret)}：执行完读取操作后的回调函数。ret {Object} 为 callback 函数的参数，有两个属性：
  • result {string}：结果三种类型 success, cancel, error
  • data {string}：选择的值 date 的字符，格式为 yyyy-MM-dd, 仅成功确认的时候存在。

时间选择time picker参数

pickTime(options, callback[options])

• options {Object}：调用 time picker 选项
  • value {string}：必选，time 格式为 HH:mm
• callback {function (ret)}：执行完读取操作后的回调函数。ret {Object} 为 callback 函数的参数，有两个属性：
  • result {string}：结果三种类型 success, cancel, error
  • data {string}：time 格式为 HH:mm, 仅成功确认的时候存在。