We Keep Coding

Vanilla JS Datepicker

I'm trying to get Vanilla JS Datepicker to work :
https://github.com/mymth/vanillajs-datepicker
It's throwing an error: TypeError: undefined is not an object on e.dataset.date
That's an error down in the date picker code, so I'm not sure what's wrong.
Here's my callout in a function:
function setDate() {
console.log('DatePickerCk: ' , Datepicker); // shows as 'class ue' - that doesn't seem right
var cdate = $(mycell).attr('dc-oldval');
console.log('CurDate: ' + cdate); // ok - 02/07/2020
var dpelem = $(mycell).find('input');
$(dpelem).val(cdate);
console.log('ValofInput: ' , $(dpelem).val()); // ok - "02/07/2020"
console.log('DpElem: ' , dpelem); // ok - hovering over it in console highlights the element in the DOM
var datepicker = new Datepicker(dpelem, {
autohide: true,
daysOfWeekDisabled: [],
daysOfWeekHighlighted: [],
defaultViewDate: cdate,
nextArrow: '>>',
prevArrow: '<<',
todayBtn: false,
todayBtnMode: 1,
todayHighlight: true
});
Datepicker.locales.en = {
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
today: 'Today',
clear: 'Clear',
titleFormat: 'MM y',
format: 'dd/mm/yyyy',
weekstart: 0
}
}
setDate();
I see the date in the input, but the dropdown for the datepicker doesn't show.
Did I not call it correctly? I'm not sure what the problem is.

This is a shot in the dark, but what happens if you add [0] to your dpelem when setting up your Datepicker? It looks like you're getting a jquery element vs a DOM element like it's probably expecting.
var datepicker = new Datepicker(dpelem[0]....
I don't really see anything wrong with your code otherwise. I threw together a quick little jsfiddle and it seems fine assuming you've got a valid reference to your input element.

Set date in datepicker jquery from date php, strange values

I'm working with datepicker as follows:
<?php
$sql="SELECT date FROM user WHERE id='$id_p' ;";
$result= query($sql);
/*Code for query in postgresql */
$date1=date_create($row['date']);
$date2=date_format($date1, 'd/m/Y');
$date3=$row['date'];
?>
<div class="form-group ">
<label>Date *</label><br>
<input id="date1" type="text" class="form-control required" >
<input type="hidden" id="date3" name="datealt">
</div>
<script>
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#fechaV").datepicker({
firstDay:1,
currentText: 'Hoy',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié;', 'Juv', 'Vie', 'Sáb'],
dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
altFormat:'yy/mm/dd'
});
});
var date1=<?php echo $date2;?>;
var date3=<?php echo $date3;?>;
console.log(date1);
console.log(date3);
$("#date1").attr("value", date1);
$('#date3').attr("value",date3);
</script>
My problem is that when printing the dates in the script, it takes strange values, I can notice it when printing in the console and set the datepicker. However, on seeing the code portion, I can see these have the correct value.
That is, in my code, the variables take the values:
var date1=01/01/2016;
var date3=2016-01-01;
In the console.log:
0.000496031746031746
2014
What is wrong?
PD: probably missing segments of code or some names do not match, but it was time to transcribe the code to write the problem. Sorry for my english level

Try this first:
var date1="<?php echo $date2;?>";
var date3="<?php echo $date3;?>";

You need to put your vars between quotes:
var date1 = '<?php echo $date2;?>';
var date3 = '<?php echo $date3;?>';

materialize pickadate event for changing month

I need to make Materialize's datepicker display what month the user is currently on. When you select a date with the Materialize datepicker and then switch months, the displayed date remain the selected one.
https://codepen.io/anon/pen/LbVvvN
I have events that are intended to bind to the user changing the month, but the events will only fire once (seemingly because doing so reinitializes the DOM)
$('div.picker__nav--prev').on('click', function() {
alert('click prev');
//set the showing date to be a month prior
});
$('div.picker__nav--next').on('click', function() {
alert('click next');
//set the showing date to be a month ahead
});
Is there an easy way to implement this kind of event listener and have it work on all clicks?

Edited :
try
$('.datepicker').pickadate({
//START ADD CODE
onRender: function() {
$('div.picker__nav--next').on('click', function() {
alert('click next');
});
$('div.picker__nav--prev').on('click', function() {
alert('click prev');
});
},
//END ADD CODE
selectMonths: true,//Creates a dropdown to control month
selectYears: 15,//Creates a dropdown of 15 years to control year
//The title label to use for the month nav buttons
labelMonthNext: 'Next Month',
labelMonthPrev: 'Last Month',
//The title label to use for the dropdown selectors
labelMonthSelect: 'Select Month',
labelYearSelect: 'Select Year',
//Months and weekdays
monthsFull: [ 'January', 'February', 'March', 'April', 'March', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
monthsShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
weekdaysFull: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
//Materialize modified
weekdaysLetter: [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ],
//Today and clear
today: 'Today',
clear: 'Clear',
close: 'Close',
//The format to show on the `input` element
format: 'dd/mm/yyyy'
});
//Copy settings and initialization tooltipped

How to create Jquery month select calender

I want a jquery month select calender. can anyone give me a website link or steps how to create month view calender like this image. please help me

Fiddle : Enjoy this : http://jsfiddle.net/abdennour/pyS99/
options = {
pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
selectedYear: 2010,
startYear: 2008,
finalYear: 2012,
monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
};
$('#custom_widget').monthpicker(options);
Source :
http://lucianocosta.info/jquery.mtz.monthpicker/

Display 'Full-month-name yyyy' with eyecon bootstrap datepicker

I'm trying to display full month name like 'January 2014' with eyecon Bootstrap datepicker http://www.eyecon.ro/bootstrap-datepicker/ Does anybody know if it's possible? I've tried everything I know (I'm a junior in JS).

I know this is little old thread. But I came across this when I was searching for similar behavior. As I couldn't find such feature natively, patched some code snippets to get that work.
http://jsfiddle.net/saz52h11/
The changes are:
var monthnames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
----
case 'mmm':
date.setMonth(monthnames.indexOf(val));
----
mmm:monthnames[date.getMonth()]
----
val.mmm = monthnames[val.m-1];
Hope this helps

This works fine:
$("#datepicker").datepicker( {
format: "MMMM YYYY",
startView: 1,
minViewMode: 1
});
Change the format field to 'MMMM' instead of 'mm' and it will provide full month. If you use "MMM" it will show the three character abreviation for the month.

You can try this:
$("#datepicker").datepicker( {
format: "mm-yyyy",
viewMode: "months",
minViewMode: "months"
});
also notice that in the version of 1.2.0 the viewMode has changed to startView.
Update:
Refer This Demo