Pikaday i18n still showing names of the days and months in english - javascript

I'm using pikaday with the i18n option with names of the months and days in spanish, my problem is that in the input text/placeholder still shows the english names of said months.
This is my JS code:
var picker = new Pikaday(
{
numberOfMonths: 2,
field: document.getElementById('datepicker-2months'),
firstDay: 1,
minDate: new Date(2000, 0, 1),
maxDate: new Date(2020, 12, 31),
yearRange: [2000, 2020],
i18n: {
previousMonth : 'Mes anterior',
nextMonth : 'Mes siguiente',
months : ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
weekdays : ['Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sabado'],
weekdaysShort : ['Dom','Lun','Mar','Mier','Jue','Vie','Sab']
}
});
This should be straight forward but i'm puzzled as the pop-up calendar shows the names in the correct language, but not in the input placeholder.

Your code should work fine.Check for other dependencies which may cause the issue.
Check below:
var picker = new Pikaday(
{
numberOfMonths: 2,
field: document.getElementById('datepicker-2months'),
firstDay: 1,
minDate: new Date(2000, 0, 1),
maxDate: new Date(2020, 12, 31),
yearRange: [2000, 2020],
i18n: {
previousMonth : 'Mes anterior',
nextMonth : 'Mes siguiente',
months : ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
weekdays : ['Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sabado'],
weekdaysShort : ['Dom','Lun','Mar','Mier','Jue','Vie','Sab']
}
});
<link rel="stylesheet" href="https://dbushell.com/Pikaday/css/pikaday.css">
<script src="https://dbushell.com/Pikaday/pikaday.js"></script>
<br><br><br><br><br><br><br><br><br><br><br>
<label for="datepicker-2months">Date:</label>
<input type="text" id="datepicker-2months">

The Pikaday i18n normally uses moment.js. If you don't want to use that, you have to do it yourself. You already provide the month and day names… but not the method that is used to fill in the input box value. This is done with the toString() method:
var monthNames = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
picker = new Pikaday({
numberOfMonths: 2,
field: document.getElementById('datepicker-2months'),
firstDay: 1,
minDate: new Date(2000, 0, 1),
maxDate: new Date(2020, 12, 31),
yearRange: [2000, 2020],
i18n: {
previousMonth: 'Mes anterior',
nextMonth : 'Mes siguiente',
months : monthNames,
weekdays : ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
weekdaysShort: ['Dom', 'Lun', 'Mar', 'Mier', 'Jue', 'Vie', 'Sab']
},
toString: function(date) {
var parts = [date.getDate(), monthNames[date.getMonth()], date.getFullYear()];
return parts.join(" ");
}
});
Try it on Codepen
If you want to be able to parse text from the input box to get the correct value in the calendar, you'll also need to implement the parse() method… but at this point it may be easier to use moment.js and let it handle the i18n for you.
This is all described in the Formatting section of the Pikaday doc.

To achieve expected result , use below option
Import Locale/es.js and Set Locale to spanish using moment - moment.locale('es') ;
In locale section of Pikaday, use moment for months , weekdays and weekdaysShort instead of providing hard coded values
<input type="text" id="datepicker-2months" value="9 Octubre 2014">
<link rel="stylesheet" href="https://dbushell.com/Pikaday/css/pikaday.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/es.js"></script>
<script>
//Set Locale to spanish
moment.locale('es');
var picker = new Pikaday(
{
numberOfMonths: 2,
field: document.getElementById('datepicker-2months'),
firstDay: 1,
minDate: new Date(2000, 0, 1),
maxDate: new Date(2020, 12, 31),
yearRange: [2000, 2020],
format: 'D MMM YYYY',
i18n: {
previousMonth : 'Mes anterior',
nextMonth : 'Mes siguiente',
months : moment.localeData()._months,
weekdays : moment.localeData()._weekdays,
weekdaysShort : moment.localeData()._weekdaysShort
}
});
</script>
codepen for reference

Related

Issue in jQuery Datepicker while selecting Start date and End date

I am using jQuery Datepicker and i have same change in jQuery but something went wrong in this.
All Working fine as my requirement but when I select date from December 2020 in start date than all Dates of End date is disable.
And this is happing only when I select December 2020's dates.
if (jQuery('#datetimepicker1').length > 0) {
jQuery('#datetimepicker1').datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
maxDate: 0,
onChangeDateTime: function(dp, $input) {
var from = $input.val().split("/");
var f = new Date(from[2], from[1], from[0]);
f.setDate(f.getDate());
var datemin = f.getFullYear()+ "/" +f.getMonth()+ "/" +f.getDate();
var datestr= from[2]+ "/" +f.getMonth()+ "/" +from[0];
$("#datetimepicker2").datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
changeMonth: f.getMonth(),
changeYear: f.getFullYear(),
minDate: new Date(datemin),
startDate:datemin,
});
}
});
}
if (jQuery('#datetimepicker2').length > 0) {
jQuery('#datetimepicker2').datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
maxDate: 0,
});
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<input id="datetimepicker1" type="text" placeholder="Start Date"/>
<input id="datetimepicker2" type="text" placeholder="End Date"/>
Javascript months are 0-based, but your input is 1-based, so you need to convert
var f = new Date(from[2], from[1]-1, from[0]);
It fails as there's no 13th month, so gets "confused".
As you're not using the date itself, but reformatting back to a string, you also need to convert back on those lines:
var datemin = f.getFullYear()+ "/" +(f.getMonth()+1)+ "/" +f.getDate();
var datestr= from[2]+ "/" +(f.getMonth()+1)+ "/" +from[0];
if (jQuery('#datetimepicker1').length > 0) {
jQuery('#datetimepicker1').datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
maxDate: 0,
onChangeDateTime: function(dp, $input) {
var from = $input.val().split("/");
var f = new Date(from[2], from[1]-1, from[0]);
f.setDate(f.getDate());
var datemin = f.getFullYear()+ "/" +(f.getMonth()+1)+ "/" +f.getDate();
var datestr= from[2]+ "/" +(f.getMonth()+1)+ "/" +from[0];
$("#datetimepicker2").datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
changeMonth: f.getMonth(),
changeYear: f.getFullYear(),
minDate: new Date(datemin),
startDate:datemin,
});
}
});
}
if (jQuery('#datetimepicker2').length > 0) {
jQuery('#datetimepicker2').datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
maxDate: 0,
});
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<input id="datetimepicker1" type="text" placeholder="Start Date"/>
<input id="datetimepicker2" type="text" placeholder="End Date"/>

foundation datepicker datesdisabled

I am trying to disable holidays in my calendar but can't seem to pass the right format to the datesdisabled option.
I have
$('#booking').fdatepicker({
var now = new Date();
$('#booking').fdatepicker({
format: 'dd MM yyyy',
startDate: now,
daysOfWeekDisabled: [0, 4, 5],
datesDisabled:['2018-02-13']
});
})
What am I missing?
Use it this way, as it doesn't support the way you are using it. Also, it doesn't support time, just date.
$(function(){
$('#dpt').fdatepicker({
initialDate: new Date(),
format: 'yyyy-mm-dd hh:ii',
disableDblClickSelection: true,
language: 'es',
pickTime: true,
datesDisabled:['2018-01-15']
});
});

How to set 3 months date range from current date in date picker?

I want to enable only 3 months from current date in bootstrap datepicker.
function addThreeMonthsToStartDate(today) {
var lastDate = new Date(today.getFullYear(), today.getMonth()+3, getDate());
return lastDate;
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: lastDate,
dateFormat: "dd/mm/yyyy"
});
Any ideas?
Solution to your problem it allows only 3 months from current date.
$('#startdate').datepicker({
maxDate: "+90d",
minDate:0
});
Try this
function addThreeMonthsToStartDate(today) {
// var today = new Date();
var lastDate = new Date(today.getFullYear(), today.getMonth()+3,
today.getDate());
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
minDate: "dateToday", // If you need to disable past dates
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: lastDate,
dateFormat: "dd/mm/yyyy"
});
Thanks a lot for your suggestions. I got the solution as below:
$("#startdate").datepicker({
isDisabled: function(date) {
var d = new Date();
return date.valueOf() < d.setMonth(d.getMonth()+3) ? false : true;
},
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: 0,
dateFormat: "dd/mm/yyyy"
});
you most use startDate and endDate in bootstrap datepicker
function addThreeMonthsToStartDate(today) {
// var today = new Date();
var lastDate = new Date(today.getFullYear(), today.getMonth()+3,
today.getDate());
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
startDate: "dateToday", // If you need to disable past dates
autoClose: true,
viewStart: 0,
weekStart: 1,
endDate: lastDate,
dateFormat: "dd/mm/yyyy"
});

Bootstrap datepicker how to allow past 6 months dates

How can I enable past 6 months dates from today including today in Bootstrap datepicke.
For example if today is 4th October 2015 then calendar will only allow to pick any date between 4th April 2015 to 4th October 2015.
var date = new Date();
// initialize daterange
$('.input-daterange').datepicker({
format: "mm/dd/yy",
orientation: "top left",
autoclose: true,
todayHighlight: false,
toggleActive: false,
startDate: date
});
startDate should do it (doc)
I'm asuming you are using this, so you can make use of endDate and startDate.
You need to set the startDate to the Date.now - 6 months and the endDate to today.
var now = new Date();
var sixmonthsago = new Date(now.setMonth(now.getMonth() - 6));
$('.input-daterange').datepicker({
format: "mm/dd/yy",
orientation: "top left",
autoclose: true,
todayHighlight: false,
toggleActive: false,
endDate: now,
startDate: sixmonthsago
});
I didint test the code.

initialDate not working in bootstrap-datetimepicker?

My today Date is 16-1-2014 and I set default date is 17-01-2014 but this is not working
$('#datetimepicker').datetimepicker({
startDate: new Date(),
autoclose: true,
todayBtn: true,
todayHighlight: false,
initialDate: new Date(2014, 00, 17),
//update: new Date(2014, 00, 17),
// onRender: function(ev) {
// console.log(ev.date.valueOf());
// },
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en'
})
output show on calendar
I am using below library
bootstrap-datetimepicker
Looking at the code it looks like the initialDate is not considered at all if your input element has a value attribute.
So if you want initiaDate to be used, make sure your input doesn't have a value (i.e. value="" or no value at all).

Categories