mydea/PikadayResponsive mydea/PikadayResponsive

  • Stars
    star
    166
  • Rank 227,748 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated over 6 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
mydea/PikadayResponsive
github

mydea

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A responsive datepicker built on top of Pikaday. It shows the native datepicker on mobile devices and a nice JS-picker on desktop.

Pikaday Responsive

A responsive datepicker built on top of Pikaday. It shows the native datepicker on mobile devices and a nice JS-picker on desktop. It is realised as a jQuery-Plugin.

Pikaday is a nice and lean datepicker. For more details, see here: https://github.com/dbushell/Pikaday

Try the demo: https://mydea.github.io/PikadayResponsive/

Try it on mobile, too:

PikadayResponsive Demo

Why?

Pikaday is a great datepicker, and there are a lot of other datepickers out there that work really well. However, all of them fall short when used on a mobile device, where the native datepickers work best (because they have been specifically optimised for the mobile experience). Native Datepickers have some drawbacks, though:

  • The output format cannot be customized
  • While they work quite reliably on mobile devices, support on desktop devices is either non-existing (Firefox) or their UX is rather terrible (Chrome).

PikadayResponsive tries to solve this problem.

How it works

Basically, PikadayResponsive tries to detect if you are on a mobile device. For this, Modernizr is used (altough you can choose to use a different feature detection library if you want). It checks for touch and HTML5 input-type date support, and if one of them is missing, it simply displays a Pikaday-datepicker.

If, however, touch AND HTML5-date support are detected, it will instead display a native input type="date". Over this native input field, another, readonly and click-through input field is displayed, in which a formatted date is displayed.

Dependencies

PikadayResponsive needs the following components to work:

You can also use pikaday-package.js, which bundles Moment.js, Pikaday, and Pikaday Responsive. It does not, however, contain jQuery and Modernizr - you have to add them manually. The dist/ directory contains the package files, a directory package_components/ which contains the individual files the package bundles, and a directory dependencies/ which contains jQuery and an automatically generated copy of modernizr pared down to only the features PikayResponsive requires.

To build a fresh copy of the package, with the latest version of the dependencies, simply download or clone the directory, and run npm install followed by grunt.

Usage

You can install PikadayResponsive via Bower:

bower install pikaday-responsive --save

You will need to include the following scripts at the bottom of your site:

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/pikaday-responsive/dist/pikaday-package.js"></script>

or alternatively:

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/momentjs/moment.js"></script>
<script src="bower_components/pikaday/pikaday.js"></script>
<script src="bower_components/pikaday-responsive/dist/pikaday-responsive.js"></script>

And in the head-section

<link rel="stylesheet" href="bower_components/pikaday-responsive/dist/pikaday-package.css">
<script src="bower_components/modernizr/modernizr.js"></script>

As mentioned above, you can also use head.js or another feature detection library instead of Moderizr.

The CSS-file contains the basic styles for the Pikaday-Datepicker. You can change/overwrite them as you wish.

To use it, call the following on an input field:

HTML:

<input id="date" name="date" />

JS:

var dateObject = pikadayResponsive(document.getElementById("date"));

The dateObject returned from pikadayResponsive() is a POJO (plain old JavaScript object) with the following properties:

dateObject = {
    pikaday: null, // This is either null (if native date is used) or the Pikaday-instance
    element: input#date1, // The original element
    value: "2015-10-20", // The current value of the input. This is the date formatted with outputFormat
    date: Object, // The Moment.js-Date-Object of the current value
}

Setting the date: instance.setDate(newDate)

In addition, the dateObject has a function: setDate(). This function takes either a Moment.js object, a native JS-Date or a string in the specified outputFormat. Optionally, you can also pass in a format to parse from as second parameter: instance.setDate(newDate, "YYYY-MM-DD"). The input will be set to this value (no matter if it is a native date picker or a Pikaday picker) and a change-event will be triggered. If you call dateObject.setDate(null), the field will be cleared. If you want to set the picker to the current day, you can simply call dateObject.setDate(moment()).

Whenever the input changes, the value on the original input will be updated as well and a regular change event will be triggered. Additonally, a change-date event will be triggered on the original input. This event receives the dateObject as its second parameter:

var el = document.getElementById("date1");
var dateObject = pikadayResponsive(el);
$(el).on("change-date", function(e, dateObject) {
    // do something with the dateObject
});

Note that the date object is always the same object and that it will automatically update its value/date:

var el = document.getElementById("date1");
var dateObject = pikadayResponsive(el);
console.log(dateObject.value); // null

// The user enters "2015-10-5" in the input field
console.log(dateObject.value); // 2015-10-5

Note that the fields will not be updated automatically if you change the value programmatically. You have to update the date with setDate() in order for it to take effect.

Configuration

There are some options to configure PikadayResponsive. Following are the default-values:

pikadayResponsive(document.getElementById("date1"), {
    format: "DD.MM.YYYY",
    outputFormat: "x",
    checkIfNativeDate: function() {
        // return true if native date field should be used
    },
    placeholder: "",
    classes: "",
    dayOffset: 0,
    pikadayOptions: {}
});

format

Determines how a date will be displayed in the input-field. Has to be a Moment.js format-string, like DD.MM.YYYY. See Moment.js Docs for all available options.

outputFormat

Determines the output of the field. Basically, this is what you will get if you call $("#date").val() or if you submit the form. has to be a Moment.js format-string, like "YYYY-MM-DD". See Moment.js Docs for all available options.

placeholder

The placeholder for the input-field.

classes

A string with classes that should be added to the displayed input-fields

dayOffset

A number which is added to the date in Pikaday-mode. This is especially useful when working with timezones. If you set a default timezone with moment-timezone, like moment.tz.setDefault("America/Los_Angeles"), your dates may turn out wrong if your browser's timezone is different. This is caused if the specified timezone's offset is lower than your browser's timezone offset. In this case, the picked date, which might be "2016-04-12 00:00:00" in "America/Los_Angeles", is converted to your local time zone, e.g. to "2016-04-11 22:00:00". This can be very hard to work with. The number of days specified here will simply be added to the selected date before it is processed. In the above case, the date that would actually be returned as value would be "2016-04-12 22:00:00".

An example implementation would be:

var defaultOffset = moment.tz("Europe/Vienna")._offset; // This is your client's timezone
var currentOffset = moment()._offset; // This is your specified timezone

var dayOffset = 0;
if(currentOffset < defaultOffset) {
    dayOffset = 1;
}

var $date1 = $("#date1");
var instance1 = pikadayResponsive($date1, {
    dayOffset: dayOffset
});

checkIfNativeDate

You can overwrite this, for example if you don't want to use Modernizr. This has to be a function. If this function returns true, the native date picker will be used, otherwise Pikaday will be used. By default, the following function is used:

function () {
    return Modernizr.inputtypes.date && (Modernizr.touch && navigator.appVersion.indexOf("Win") === -1);
}

pikadayOptions

An object with options that will be used to initialize Pikaday. Note that field and format will be overridden.

Manually opening the date picker

Opening the date picker from somewhere else on the page can be a bit tricky. The best way to do this is by simply using standard HTML labels. Since 0.7.0, the generated inputs will receive an ID, if the original input had an ID. It will be the original ID + -input. For example:

<input id='date1'>

will become:

<input id='date1-input' class='...'>

This makes it possible to trigger the date picker from any place on your page with a simple label:

<label for='date1-input'>Open Date Picker</label>

See an example for this on the bottom of the Demo.

Changelog

For changes, see the Changelog

Additionally, please note the breaking changes from 0.5 to 0.6: Information about upgrading to >= 0.6.0

Author

PikadayResponsive has been created by Francesco Novy | http://www.fnovy.com | [email protected] | @_fnovy

Credits

Credits go to David Bushell and Ramiro Rikkert for creating Pikaday.

Copyright

Copyright © 2016 Francesco Novy | MIT license

More Repositories

1

handsontable-chosen-editor

Use a chosen select field in a Handsontable.
JavaScript
63
star
2

ember-date-components

An Ember add-on which provides pure Ember-based date picker components.
JavaScript
36
star
3

ember-indexeddb

Utilities & adapter to work with IndexedDB in ember & ember-data
JavaScript
17
star
4

LeapGestures

A wrapper for LeapJS to enable very easy reaction to basic gestures.
JavaScript
9
star
5

action-wait-for-api

A Github Action to wait for a specific API response to proceed.
JavaScript
9
star
6

ember-site-tour

An Ember add-on to add site tours based on hopscotch.js to your app.
CSS
7
star
7

ember-prerender

Prerender Ember apps with Puppeteer.
JavaScript
4
star
8

ember-d3-workshop

A simple example of using Ember & D3 together.
JavaScript
3
star
9

po2json2po

Convert .po files to JSON or vice-versa. Works nicely with ember-i18n.
JavaScript
3
star
10

simple-pokedex-app

A simple Pokedex app, showcasing various steps for a simple JavaScript app.
JavaScript
2
star
11

keen-js-simple

A simple, super lightweight (3kb) & performance optimized library to track data with Keen.IO.
JavaScript
2
star
12

ember-cli-release-tag

Create new version tags for your apps and addons.
JavaScript
2
star
13

test-gh-branches

Small test repo to test GH branch protection rules.
2
star
14

actions-ember-testing

Test your Ember app with Github Actions.
JavaScript
1
star
15

ember-cli-deploy-service-worker

Generate a `sw.js` file to cache assets at build/deploy time.
JavaScript
1
star
16

SpeechAccuracyTest

A simple test suite to test accuracy of the Web Speech API's SpeechRecognition.
PHP
1
star
17

fbPageAccessToken

A small tool to create Page Access Tokens for Facebook.
PHP
1
star
18

webSpeechFramework

A small framework to help developers to work with the Web Speech API.
JavaScript
1
star
19

yarn-update-dependency

Update a yarn dependency across a project/workspace & sub-dependencies.
JavaScript
1
star