Javascript Datepicker Pikaday: 增强版本

最新推荐文章于 2024-03-20 09:40:52 发布

记录无限

最新推荐文章于 2024-03-20 09:40:52 发布

阅读量940

点赞数 1

分类专栏： js笔记

本文链接：https://blog.csdn.net/lz7955823/article/details/52842302

版权

js笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Pikaday: 增强版本的Javascript Datepicker

本文转自[记录无限： www.gluoo.cn ].

Github：https://github.com/dbushell/Pikaday

Pikaday

A refreshing JavaScript Datepicker

Lightweight (less than 5kb minified and gzipped)
No dependencies (but plays well with Moment.js)
Modular CSS classes for easy styling

Usage

Pikaday can be bound to an input field:

<input type="text" id="datepicker">

Add the JavaScript to the end of your document:

<script src="pikaday.js"></script>
<script>
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>

If you're using jQuery make sure to pass only the first element:

var picker = new Pikaday({ field: $('#datepicker')[0] });

If the Pikaday instance is not bound to a field you can append the element anywhere:

var field = document.getElementById('datepicker');
var picker = new Pikaday({
    onSelect: function(date) {
        field.value = picker.toString();
    }
});
field.parentNode.insertBefore(picker.el, field.nextSibling);

For advanced formatting load Moment.js prior to Pikaday: See the moment.js example for a full version.

<input type="text" id="datepicker" value="9 Oct 2014">

<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script>
    var picker = new Pikaday({
        field: document.getElementById('datepicker'),
        format: 'D MMM YYYY',
        onSelect: function() {
            console.log(this.getMoment().format('Do MMMM YYYY'));
        }
    });
</script>