Override jQuery UI Datepicker div visible strangely on first page load.

I had the same problem and while some of the above solutions work, the easiest fix of all is to add this to your css: #ui-datepicker-div {display: none;} This basically hides the realigned datepicker element when it cannot be binded to an existing invisible element. You hide it, but it will be initialized again when … Read more

Moment.js “Invalid date”

Suppose your date is in format ‘DD-MM-YYYY’ & you want to display it in DD-MMM format then you can do this by first telling moment function which format your date currently is & then asking it to convert it to required format. Below is the example: var taskDueDate = moment(dueDate, ‘DD-MM-YYYY’).format(‘DD-MMM’); This way you can … Read more

How can I style react-datepicker?

From https://github.com/Hacker0x01/react-datepicker/issues/2099#issuecomment-704194903 Try with wrapperClassName property: <DatePicker wrapperClassName=”datePicker” dateFormat=”dd/MM/yyyy” /> CSS: .datePicker { width: 100%; } This way you won’t modify the styles for the whole app styled-components bonus: import React from ‘react’; import styled, { css, createGlobalStyle } from ‘styled-components’; import DatePicker from ‘react-datepicker’; const DatePickerWrapperStyles = createGlobalStyle` .date_picker.full-width { width: 100%; } `; … Read more

How can I disable the new Chrome HTML5 date input?

You have a couple of different options. You could detect that the user is using Chrome by sniffing the user agent string and preventing click events. if (navigator.userAgent.indexOf(‘Chrome’) != -1) { $(‘input[type=date]’).on(‘click’, function(event) { event.preventDefault(); }); } User agent sniffing is a bad idea, but this will work. The ideal approach in my mind is … Read more

How to control positioning of jQueryUI datepicker

Posting this in hopes that it will help others. At least as of v1.8.1 of datepicker, using ‘window.DP_jQuery.datepicker’ no longer works, because the pointer(right term?) now is named with a timestamp of its creation – so for example it would now be ‘window.DP_jQuery_1273700460448’. So now, rather than using the pointer to the datepicker object, refer … Read more

Rails date/time picker (hopefully jquery) [closed]

http://trentrichardson.com/examples/timepicker/ This is the best date time picker I’ve seen. milesich is not actively maintained anymore, and has bugs if the input field is blank. Sure there are solutions (in the comments), but if you look at the code, its one ugly hack. Trent’s implementation is much cleaner. Shorter, easy to understand and minimal CSS … Read more