EzDevInfo.com

Pikaday

A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS

How to make Pikaday datepicker always visible

I'm using the Pikaday javascript datepicker.

The default functionality is to attach it to an input whereby clicking the input would load the datepicker and its position would be relative to the input.

What I want is to use this library to show an always visible calendar. I tried several things without success such as attaching it to a div. I'd like to be able to have it always shown and be able to control its position.

Any ideas?


Source: (StackOverflow)

pikaday.js script not working in Electron or NW.js

I am using the pikaday.js in a webform. It works great in a normal browser (Chrome, Firefox, etc.), but it doesn't load defaults in Electron or NW.js. The author says it has nothing to do with him, so I am posting this here to see if anyone else knows a fix?

The pikaday always return dates in the "Wed June 17, 2015" format in Electron and NW.js. I have even changed the default in the original code to be "06/17/2015", but it will not do it. HELP!


Source: (StackOverflow)

Advertisements

Angular - Pikaday date format not working

I am using pikaday-angular directive wraper. I wanted to show date in MM/DD/YYYY format in inputbox, hence supplied format in directive.

<input pikaday="example.myPickerObject" format="MM/DD/YYYY">

When i click on any date it shows up in inputbox in its default date format and not in my supplied format.

Here is the Demo: http://plnkr.co/edit/mFyTVKeGgUm6wz553hOB

Am i missing something? Thanks in advance.


Source: (StackOverflow)

For pikaday can we have month abbreviations instead of numbers?

Basically I am using pikaday but when I select the date it comes up as dd.mm.yyyy (which is how I have altered it)

So when I select august 18th, 2015 it will show up as 18.08.2015

What I would like is for it to show up as 18.Aug.2015

Is there a way to have it show month abbreviations when you select a date instead of a numerical value?

Any help greatly appreciated!


Source: (StackOverflow)

pikaday angular sending date format in json

how do i send the pikaday plugin date format in my json using ng-model

i had been trying this

<input pikaday="" ng-model="products_chosen[$index].from.getDate()" placeholder="From">

js:

    $scope.products_chosen = [{"from":new Date(),"till":new Date(),"checkbox":0}];
    $scope.productChange = function(index, checkbox){
        if(checkbox==1){
            $scope.products_chosen.push({"from":"","till":"","checkbox":0});  
        }
        else{
            $scope.products_chosen.splice(index,1);
        } 
    }

Source: (StackOverflow)

Start Pikaday calendar closed

The Pikaday calendar comes opened when the page loads, there's some option for it to start closed and open just after the trigger is triggered?


Source: (StackOverflow)

Pikaday format does not work despite including moment.js

I am using the Pikaday Data Picker. I am unable to override the default format to MM/DD/YYYY. I have included the Pikaday library and Moment.js but it still does not work.

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

    var picker = new Pikaday(
    {
        field: document.getElementById('datepicker'),
        format : "MM/DD/YYYY",
        firstDay: 1,
        minDate: new Date('2000-01-01'),
        maxDate: new Date(),
        yearRange: [2000,2020]      
    });

Here is my fiddle:
http://jsfiddle.net/gfinzer/t046bqm2/2/


Source: (StackOverflow)

Pikaday - Multiple Inputs Vanilla JavaScript

I have tried to attach pikaday to multiple elements.

It seems like this is possible with the JQuery plugin.

Does anyone know if it is possible with Vanilla JS?

Here is the code:

http://bit.ly/IFM3De

Note: Will add it to the question once I have more information

Pikaday Plugin - https://github.com/dbushell/Pikaday


Source: (StackOverflow)

Handsontable - Pikaday week numbers

I am using the pikaday calendar in Handsontable and want to include the week number on the drop down calendar. This option is supported by Pikaday

showWeekNumber: true

But I don't know how to pass this parameter to Pikaday from the Handsontable config.


Source: (StackOverflow)

How can I use Pikaday with ReactJS?

I would like to use the Pikaday datepicker with ReactJS. It is not based on ReactJS. How can I use it?


Source: (StackOverflow)

Ember - Pikaday format displaying incorrect date

Using Pikaday as a date picker within my form with the format set to DD/MM/YYYY. For some reason, I keep on getting a 'too much recursion' error when I select the textfield and the date appears incorrectly after I've selected different dates.

If I set the format to 'MM/DD/YYYY' then it works without any errors but when I set the format to 'DD/MM/YYYY', I come across issues.

I have created a JSBin to demonstrate my problem: http://jsbin.com/nuxasipedi/1/edit

After further testing, it looks as though having the date in the UK format with slashes confuses the plugin.


Source: (StackOverflow)

Pikaday - mark or highlight certain dates

I am using pikaday and it is really decent datepicker. Is there possibility to mark or highlight certain dates? That could help users to distinguish "regular" dates from some "important" dates for them, at first glance.


Source: (StackOverflow)

Pikaday + Inputmask not working in Google Chrome

I am implemented pikaday calendar with input mask functionality. It is working fine in firefox but it not works in google chrome. Google chrome only works with input mask, but on click input field when calendar popup i choose different date it not display in input field.

var picker = new Pikaday({
field: document.getElementById('date'),
format: 'dd/mm/yy',
minDate: 0,
disableWeekends:true,
format: 'DD/MM/YYYY'
});

$("#date").inputmask("d/m/y",{ "placeholder": "*" });

Example: http://jsfiddle.net/fbueR/25/

Source: (StackOverflow)

"getDate().toJSON()" loses a day

I'm using the pikaday date picker plugin (through an angular directive and with momentjs) and sending the value to the server. Converting to json seems to lose a day though:

var d = myPikaObject.getDate();
console.log(d);              // Thu Apr 30 2015 00:00:00 GMT+0200 (SAST)
console.log(d.toJSON());     // 2015-04-29T22:00:00.000Z

I think this is a momentjs problem but I have no idea what's going wrong.


Source: (StackOverflow)

Multiple datepicker using Pikaday

Im using Pikaday as a datepicker because JQuery Datepicker is having conflict with Prototype Library.

A few issues here.

  1. How do i use pikaday datepicker in multiple text box
  2. How to format the date. Previously by using JQuery Datepicker, to change the format I only need to
    add dateFormat:"dd M yy",

Here is the sample code

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

<script src="pikaday.js"></script>
<script>

var picker = new Pikaday(
{    
    changeMonth: true,
    changeYear: true,
    field: document.getElementById('datepicker'),
    firstDay: 1,
    minDate: new Date('2000-01-01'),
    maxDate: new Date('2020-12-31'),
    yearRange: [2000,2020]

});

</script>

Source: (StackOverflow)