laydate-next v5.6.0

Laydate-Next

English | 简体中文

What is it

An extensively used, advanced web calendar component that combines attractive design with robust functionality. It effectively caters to various date-related business scenarios. It offers five core selection modes: year picker, year-month picker, date picker, time picker, and datetime picker. All modes support range selection (dual controls). The component includes a powerful mechanism for parsing and validating custom date formats. It provides both Chinese and international versions and offers a minimalist yet flexible theme. Developed in native JavaScript, it can be used as a standalone component.

This fork of laydate by 贤心 (sentsim) with some important fixes merged. We are eternally grateful for his starting point.

The previous version forked into this repository: 5.3.1 (July 1, 2023).

When To Use

By clicking the input box, you can select a time from a popup panel.

Installation

# if you use npm
npm install laydate-next -S

# or if you use yarn
yarn add laydate-next

Usage

<input type="text" id="ID-test-laydate">
<input type="text" class="class-test-laydate" lay-options="{value: '2016-10-14'}">
<input type="text" class="class-test-laydate" lay-options="{value: '2017-08-21'}">

<script>

// Single Render
laydate.render({
  elem: '#mydate',
  lang: 'en'
});

// Batch Render
laydate.render({
  elem: '.class-test-laydate'
});

</script>

:fire:TL;DR

Apart from the elem attribute, other basic attributes can also be directly written in the lay-options="{}" attribute of the element.

API

laydate.hint(id, opts)

• Parameter id: The value of the id attribute defined when rendering the component.
• Parameter opts: Optional attributes supported by this method, as listed in the table below:

// Render
laydate.render({
  elem: '', // Element selector to bind
  id: 'test', // Custom ID
  // Other attributes ...
});
// Show hint
laydate.hint('test', {
  content: 'Hint content'
});

laydate.getInst(id)

• Parameter id: The value of the id attribute defined when rendering the component.

// Render
laydate.render({
  elem: '', // Element selector to bind
  id: 'test', // Custom ID
  // Other attributes ...
});
// Get the corresponding instance
var inst = laydate.getInst('test');
console.log(inst); // Instance object

laydate.unbind(id)

• Parameter id: The value of the id attribute defined when rendering the component.

// Render
laydate.render({
  elem: '', // Element selector to bind
  id: 'test', // Custom ID
  // Other attributes ...
});
// Unbind the corresponding instance
laydate.unbind('test');

laydate.close(id)

• Parameter id: The value of the id attribute defined when rendering the component. If the id parameter is not provided, it will close the currently open date panel.

// Render
laydate.render({
  elem: '', // Element selector to bind
  id: 'test', // Custom ID
  // Other attributes ...
});
// Close the corresponding date panel
laydate.close('test');

laydate.getEndDate(month, year)

• Parameter month: The month (default: current month).
• Parameter year: The year (default: current year).

var days1 = laydate.getEndDate(10); // Gets the last day of October as 31
var days2 = laydate.getEndDate(2, 2080); // Gets the last day of February 2080 as 29

Props

Callback

• ready

laydate.render({
  elem: '#mydate',
  ready: function(date){
  /* Get the initial date and time object. The format of the date parameter is as follows:
    {
      year: 2017, // Year
      month: 8, // Month
      date: 18, // Day
      hours: 0, // Hour
      minutes: 0, // Minute
      seconds: 0 // Second
    }
  */
  console.log(date);
}
)}

• change

laydate.render({
  elem: '#mydate',
  change: function(value, date, endDate){
    console.log(value); // Date string, e.g., "2017-08-18"
    console.log(date); // Object containing values for year, month, day, hour, minute, and second
    console.log(endDate); // End date and time object, only returned when using range. The object members are the same as above.
  }
)}

• done

laydate.render({
  elem: '#mydate',
  done: function(value, date, endDate){
    console.log(value); // Date string, e.g., "2017-08-18"
    console.log(date); // Object containing values for year, month, day, hour, minute, and second
    console.log(endDate); // End date and time object, only returned when using range. The object members are the same as above.
  }
)}

• confirm

laydate.render({
  elem: '#mydate',
  confirm: function(value, date, endDate){
    console.log(value); // Date string, e.g., "2017-08-18"
    console.log(date); // Object containing values for year, month, day, hour, minute, and second
    console.log(endDate); // End date and time object, only returned when using range. The object members are the same as above.
  }
)}

• onNow

laydate.render({
  elem: '#mydate',
  onNow: function(value, date, endDate){
    console.log(value); // Date string, e.g., "2017-08-18"
    console.log(date); // Object containing values for year, month, day, hour, minute, and second
    console.log(endDate); // End date and time object, only returned when using range. The object members are the same as above.
  }
)}

• onClear

laydate.render({
  elem: '#mydate',
  onClear: function(value, date, endDate){
    console.log(value); // Date string, e.g., "2017-08-18"
    console.log(date); // Object containing values for year, month, day, hour, minute, and second
    console.log(endDate); // End date and time object, only returned when using range. The object members are the same as above.
  }
)}

• close

laydate.render({
  elem: '#mydate',
  close: function(){
    // logic
  }
)}

Demo

You can clone this repo to your working copy and then launch the demo page in your local machine:

npm install
npm run dev

# or
yarn install
yarn dev

The demo page server is listening on: http://127.0.0.1:5173