Categories
Ant Design Vue

Ant Design Vue — Checkboxes and Date Pickers

Spread the love

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Checkbox Groups

We can add checkbox groups with various options.

For example, we can write:

<template>
  <div>
    <a-checkbox-group
      v-model="value"
      name="checkboxgroup"
      :options="plainOptions"
      @change="onChange"
    />
    <br>
    <a-checkbox-group :options="plainOptions" :default-value="['Apple']" @change="onChange"/>
    <br>
    <a-checkbox-group :options="options" :value="['Pear']" @change="onChange"/>
    <br>
    <a-checkbox-group
      :options="optionsWithDisabled"
      disabled
      :default-value="['Apple']"
      @change="onChange"
    >
      <span slot="label" slot-scope="{ value }" style="color: red">{{ value }}</span>
    </a-checkbox-group>
  </div>
</template>
<script>
const plainOptions = ["Apple", "Pear", "Orange"];
const options = [
  { label: "Apple", value: "Apple" },
  { label: "Pear", value: "Pear" },
  { label: "Orange", value: "Orange" }
];
const optionsWithDisabled = [
  { value: "Apple" },
  { label: "Pear", value: "Pear" },
  { label: "Orange", value: "Orange", disabled: false }
];
export default {
  data() {
    return {
      plainOptions,
      options,
      optionsWithDisabled,
      value: []
    };
  },
  methods: {
    onChange(checkedValues) {
      console.log(checkedValues);
      console.log(this.value);
    }
  }
};
</script>

The a-checkbox-group lets us set various options.

v-model binds the checkbox to a reactive property.

options has an array of options. It can be an array of strings.

And it can have array of objects with the label and value properties.

label has the labels and value has the values.

Date Picker

We can add a date picker with the a-date-picker component.

For example, we can write:

<template>
  <div>
    <a-date-picker @change="onChange"/>
    <br>
    <a-month-picker placeholder="Select month" @change="onChange"/>
  </div>
</template>
<script>
export default {
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    }
  }
};
</script>

The a-month-picker component lets us select the month.

The change event is emitted with the date with selected date object.

And the dateString has the string representation of the date.

It also comes with the a-range-picker and a-week-picker to select the date range and the week:

<template>
  <div>
    <a-range-picker @change="onChange"/>
    <br>
    <a-week-picker placeholder="Select week" @change="onChange"/>
  </div>
</template>
<script>
export default {
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    }
  }
};
</script>

Customized Date Rendering

The rendering of the selected date can be changed by populating the dateRender slot:

<template>
  <div>
    <a-date-picker>
      <template slot="dateRender" slot-scope="current, today">
        <div class="ant-calendar-date" :style="getCurrentStyle(current, today)">{{ current.date() }}</div>
      </template>
    </a-date-picker>
    <a-range-picker>
      <template slot="dateRender" slot-scope="current">
        <div class="ant-calendar-date" :style="getCurrentStyle(current)">{{ current.date() }}</div>
      </template>
    </a-range-picker>
    <a-week-picker>
      <template slot="dateRender" slot-scope="current">
        <div class="ant-calendar-date" :style="getCurrentStyle(current)">{{ current.date() }}</div>
      </template>
    </a-week-picker>
  </div>
</template>
<script>
export default {
  methods: {
    getCurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #1890ff";
        style.borderRadius = "50%";
      }
      return style;
    }
  }
};
</script>

We set the styles with the getCurrentStyle method.

It takes the current and today parameters to set the border of the date according to whether it’s selected or not.

current.date() has the day of the month. So we render the first of the month with a circle border.

Conclusion

We can add checkbox groups and date pickers to let us add checkboxes and select dates.

Leave a Reply

Your email address will not be published. Required fields are marked *