All geek questions in one place

Convenient with datetimepicker

Is there a plugin for implementing datetimepicker in handsontable? The closest I got is a pickup fork here , but I don't know how to implement this in a Handsontable.

+4
source share
4 answers

Just for reference, there is an alternative plugin that handles this initially.

<div id="my"></div>

data = [
    ['Mazda', 2001, 2000, '2006-01-01 00:00:00'],
    ['Pegeout', 2010, 5000, '2005-01-01 00:00:00'],
    ['Honda Fit', 2009, 3000, '2004-01-01 00:00:00'],
    ['Honda CRV', 2010, 6000, '2003-01-01 00:00:00'],
];

$('#my').jexcel({
    data:data,
    colHeaders: ['Model', 'Date', 'Price', 'Date'],
    colWidths: [ 300, 80, 100, 100 ],
    columns: [
        { type: 'text' },
        { type: 'numeric' },
        { type: 'numeric' },
        { type: 'calendar', options: { format:'DD/MM/YYYY HH24:MI', time:1 } },
    ]
});

https://jsfiddle.net/ahqv89ja/2/

http://www.bossanova.uk/jexcel/using-a-calendar-column-type

+1
source

This can be done by modifying the file handsontable.full.js. Take this file: http://handsontable.com/dist/handsontable.full.js

Find the Piccade section:

/*!
 * Pikaday
 *
 * Copyright © 2014 David Bushell | BSD & MIT license | https://github.com/dbushell/Pikaday
 */

(function (root, factory)
{

.......

    return Pikaday;

}));

: https://github.com/owenmead/Pikaday/blob/master/pikaday.js

, : dateFormat: "YYYY-MM-DD HH:mm".

+1

JExcel handsontable. . , :

https://bossanova.uk/jexcel/examples/using-a-calendar-column-type

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jexcel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jcalendar.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jexcel.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jcalendar.min.css" type="text/css" />

<div id="my"></div>

<script>
data = [
    ['Mazda', 2001, 2000, '2006-01-01 11:00:00'],
    ['Pegeout', 2010, 5000, '2005-01-01 12:00:00'],
    ['Honda Fit', 2009, 3000, '2004-01-01 12:04:00'],
    ['Honda CRV', 2010, 6000, '2003-01-01 14:30:00'],
];

$('#my').jexcel({
    data:data,
    colHeaders: ['Model', 'Date', 'Price', 'Date'],
    colWidths: [ 300, 80, 100, 100 ],
    columns: [
        { type: 'text' },
        { type: 'numeric' },
        { type: 'numeric' },
        { type: 'calendar', options: { format:'DD/MM/YYYY HH24:MI', time:1 } },
    ]
});
</script>
</html>
0
source

Handsontable uses pikaday by default. To use it, you need to add some files, it is quite easy and simple. Read the documentation for it here

-1
source

Source: https://habr.com/ru/post/1615401/

More articles:


All Articles