Stack Overflow
Stack Overflow

Questions tagged [pickadate]

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

pickadate.js is an open source project, shared under an MIT license.

Website API GitHub

Usage

// The date picker 
$('.datepicker').pickadate()

There’s a tonne of options to customize the date and time pickers, such as month/year selectors, time intervals, etc.

There’s also a rich API to extend the functionality of the picker. Some examples are displayed on Codepen.

Features

  • Supports jQuery 1.7 and up.
  • Is ARIA-enabled to be WCAG 2.0 compliant. (added in v3.4)
  • Leaves a tiny footprint of 6kb JS and 2kb CSS. (minified and gzipped)
  • Comes with translations for 39 languages.
  • Has touch & keyboard friendliness.
  • Follows BEM style class naming.
  • Utilizes LESS based stylesheets.
  • Includes a Grunt based build system.

Browser support

Supports all modern browsers – and IE8+.

Specifically, v3 has been tested with Chrome MWA, Firefox MWA, Opera MWA, Safari Mi, Internet Explorer W, Blackberry 6.0+ and Android 3.2+ browsers.

133 questions
13
votes
3 answers

How to force npm to use the jquery 2.1.1

I am asking this question as a beginner on node-npm. My current node_modules has a query version 2.2.0. But in the same project i am using materialize-css which has a datepicker component. This component runs on jquery 2.1.1. My question is…
Prakhar
  • 1,065
  • 3
  • 16
  • 30
10
votes
1 answer

How to make the materialize date picker (in fact pickadate) editable?

I'm trying to make the materialize date picker editable. Here is the goal, the user can directly write the date in the input field or use the widget to pick a date. I did something that is about to work on this jsfiddle. But there is a bug I'm…
Clemzd
  • 895
  • 2
  • 15
  • 35
8
votes
1 answer

Serious performance issue when using remodal and pickadate on Safari

I was trying to use remodal together with pickadate so I can create a date-picker and time-picker from within the modal. On first trial I found out the datepicker would be hidden by the remodal, as shown below. To overcome this issue I created a…
Chris Yeung
  • 2,613
  • 6
  • 34
  • 57
8
votes
4 answers

Disable dates in pickadate-picker and refresh it

I try to disable some dates after I have initialised the Date Picker. I am initialising the picker like this: $( document ).ready(function() { $('#inputDatetime').pickadate({ format: 'dd. mmmm yyyy', formatSubmit: 'yyyy-mm-dd', …
nimrod
  • 5,595
  • 29
  • 85
  • 149
5
votes
2 answers

Disable Previous Dates When Using Pickadate.js

I am using piackadate.js as a date picker for my site. I would like to implement the functionality that would disable any previous date. I read the docs on disabling dates but I don't see a way to disable all previous dates. How would one do this?
L84
  • 45,514
  • 58
  • 177
  • 257
4
votes
2 answers

Picktime Time Picker not disabling times after enable

I am using pickadate.js and pickatime.js date/time pickers. I want to disable times if the current date is selected. While this works if I only select today's date once, but if I try to toggle this from todays date to any other date and back, it…
tony
  • 506
  • 2
  • 17
4
votes
2 answers

Disable dates in pickadate (JavaScript) after enabling some specific dates

I am using the pickadate library so the user can select dates. All dates should be disabled by default. This works by adding disabled: [true]. var myPicker=$("#inputDatetime").pickadate( { format:"dd. mmmm yyyy", …
nimrod
  • 5,595
  • 29
  • 85
  • 149
4
votes
2 answers

Setting up Pickadate 'onSet'

I'm trying to setup pickadate on two inputs.When a date is selected on the first input, i would like to set the selected date in the second input if the 2nd is empty. First I tried to update the value after the first input is selected but something…
Nico33400
  • 61
  • 1
  • 4
4
votes
4 answers

Pickadate - how to actually use selected date?

I'm implementing a pickadate date picker, and it's not clear in the docs how to actually use the date a user selects. Eg I have this written: $('.datepicker').pickadate({ onSet: function(context) { console.log(context); } }); This…
j_d
  • 2,818
  • 9
  • 50
  • 91
4
votes
4 answers

How to give selectYear in pickadate function

Hi I am using pickdate and I am having field this in my view : <%= f.text_field :date_of_birth,:placeholder =>'Select Date', :class => 'datepicker picker_input' %> So in this I have this jquery $('.datepicker').pickadate({ …
Dinshaw Raje
  • 933
  • 1
  • 12
  • 33
3
votes
4 answers

Jquery pickadate open and close same time

We have a strange issue with pickadate.js v3.5.6., jQuery v3.3.1 When a user clicks on the element it opens the calander and call the close event in the same time. But if the user select a different tab in the browser and then return to the first…
Ehud Grand
  • 3,501
  • 4
  • 33
  • 52
3
votes
0 answers

pickadate.js date and time picker, `set` disable times compound together rather than reset and replace

I have a date and time picker using pickadate.js, im trying to do dynamic time disabling, here is what i have var allUserSchedules = [ ["26 December, 2017", {from: [00,00], to: [01,00]}], ["29 December, 2017", {from: [16,00], to:…
yomamen
  • 31
  • 1
  • 4
3
votes
2 answers

how to change day by clicking previous / next day buttons using pickadate js

I am using pickadate to choose a date. I am trying to change the selected date by clicking the previous day or next day buttons.
previus day …
Johnny
  • 386
  • 1
  • 3
  • 11
3
votes
0 answers

Pickadate.js updating calendar after manually changed the date

I am using pickadate.js library with the editable mode of the input set true.By default the picker is not updating automatically the calendar when date is changed by keyboard(manually from input).So I want to create a functionality in order to…
Moroianu Alexandru
  • 167
  • 3
  • 9
3
votes
4 answers

Change date in pickadate.js

So I'm using http://amsul.ca/pickadate.js/ and I can't seem to figure out how to set a specific date into the date picker. (Date picker for pickadate.js v3.5.6, http://amsul.github.io/pickadate.js/date.htm). For example if I say: var today =…
Donal.Lynch.Msc
  • 3,365
  • 12
  • 48
  • 78
1
2 3
…
8 9