Develop Reference

I am locked zoomed out in date picker

I actually tried to restrict users to pick dates within 2 years from today in Datepicker.
So now there is one issue that is coming up that when in zoom out too much (By zooming out I mean when we click on the month name it will zoom out to all months and and similarly all month to all year)
this is the zooming out I am talking about
but if I zoom out to such an extent where it shows the calendar in group of a decade or a century I am not able to zoom in back or I mean not able to go back to the calendar view where I could select dates.
so is there a way to restrict users to zoom out after a level? or is there a way to fix it?
My datepicker version is Bootstrap v4.1.1
This is the code we are using
tz_today Is today's date in yyyy-mm-dd format.
endDate = new Date(new Date().setFullYear(new Date().getFullYear() + 2));
pickDate = new Date(pickDate); // in yyyy-mm-dd format
$('#Datepicker').datepicker('destroy').datepicker({
todayHighlight: true,
beforeShowDay: function (date) {
$highlight = calendar_highlight_classes(highlight_dates, pickDate, date);
return $highlight;
}
}).datepicker('setStartDate', new Date(tz_today))
.datepicker('setEndDate', endDate);

Well for me MaxViewMode worked like a charm. By default, it is set as 4 but we can change it acc. to our preference
days(0) -> month(1) -> year(2) -> decade(3) -> century(4)
MaxViewMode: 2 - to limit users to go up to years view mode
my code to limit users to go only till year
$('#Datepicker').datepicker('destroy').datepicker({
todayHighlight: true,
endDate: endDate,
maxViewMode: 2
});
Here is the documentation https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#maxviewmode

How to set specific timezone in datepicker using jquery only?

I've a field and applying datepicker on it using jQuery.
it is currently getting time from system/browser.
I want it to get time from specific time zone e.g America/new_york.
The endDate param is the key to set the calendar, means user should not be able to select the date from future. Currently it is looking like this
The code snippet is :
jQuery('#convo_start_date').datepicker({
format: 'dd M yyyy',
endDate: '+0d',
autoclose: true,
showButtonPanel: true,
todayBtn: 'linked'
}).on('change', function () {
jQuery('.datepicker').hide();
jQuery('#convo_end_date').attr('value',jQuery('#convo_start_date').val());
});
Question: Is there any way to set the default specific timezone like America/new_york to do not allow the date from future (according to this specific timezone)?
Note: I've tried moment.js but it is conflicting with my current work in jQuery, Is there any params datepicker library providesvto set with timezone?

If you are using jquery ui datepicker plugin, you can set the maxDate option to current date so that user can't select date from future.
You will need to do the conversion to the specific timezone. You can change the targetTimeOffset variable as per your requirement.
var d = new Date();
var targetTimeOffset = -4*60; //desired time zone, taken as GMT-4
d.setMinutes(d.getMinutes() + d.getTimezoneOffset() + targetTimeOffset );
Check Fiddle: http://jsfiddle.net/mpsingh2003/8w8v9/3387/ if this is what you are looking for

You can use Joda-Time library to get your solution.
Check the classes they provide like org.joda.time.DateTimeZone.
You can get the DateTimeZone depending on the Canonical ID defined in the Joda Time.
Please check this link for API documentation.
Hope this will helpful for you. Thanks.

jQuery UI Datepicker showing incorrect week number

When using the jQuery UI Datepicker and starting the week on a Sunday, the week numbers are incorrect. For example, 3rd Jan 2016 should be week 1 as all of the dates (3rd to 9th) are in the same year. But as you can see in the screenshot below, the UI shows it as week 53.
Here is the code to render the datepicker:
$("#datepicker" ).datepicker({
showWeek: true,
firstDay: 0
});
So nothing special, other than showing the week numbers and starting the week on Sunday instead of Monday (as per default).
Here is a fiddle of the issue: https://jsfiddle.net/vLqabmmz/

Due to the fact that this seems like a bug in jQuery UI. I'm posting the possible answer being the reporting of this as a bug to the jQuery UI team here: https://bugs.jqueryui.com/ticket/14907#ticket

i checked further and iso8601Week() method of jqueryUI is working fine, the problem is in its representation (the layout).
If you extract the value of the week you can see that the standard is followed and is fine. 3-rd is week 53 and after that 4 ... 7 (which is the first Thursday of the year and this is the week number 1). You can check with the code below.
$(function() {
$( "#datepicker" ).datepicker({
showWeek: true,
onSelect: function(dateText, inst) {
$(this).val("'Week Number '" + $.datepicker.iso8601Week(new Date(dateText)));
}
});
});

As seen from documentation for calculateWeek here:
This function uses the ISO 8601 definition of a week: weeks start on a Monday and the first week of the year contains January 4.
So comments are right qualifying this as a bug. While this is not resolved yet, you can overcome this easily by setting firstDay to 1 like this:
$("#datepicker" ).datepicker({
showWeek: true,
firstDay: 1
});
Week number would be correct, it is easier than rewrite calculateWeek, only difference is that week will start on Monday instead on Sunday. Note that default behavior sets firstDay to 0.

Here is a display of the jQuery calendar for the first week of 2017 - fully contained in a new year.
Yet, the week number is shown as 52 of year 2016 (wtf).
To me it looks like a bug to be corrected, otherwise there is no reason to display the week number.

https://en.wikipedia.org/wiki/ISO_week_date:
The first week of a year is the week that contains the first Thursday of the year (and, hence, always contains 4 January).

You should update locale:
moment.updateLocale('en', {
week: {
dow: 1,
doy: 1
}
});

How to make bootstrap datepicker pick last day of the month instead of first day when minViewMode : 1

I'm using this version of Bootstrap DatePicker: http://eternicode.github.io/bootstrap-datepicker/ (the range type), and i have uploaded my demo on JSFiddle on here: http://jsfiddle.net/qs5co179/6/
The relevant JavaScript:
$('#sandbox-container .input-daterange').datepicker({
format: "dd/mm/yyyy",
minViewMode : 1
});
I have set the parameter minViewMode : 1 so I can view only months on calendar instead of full days, the reason is that I want to strict the user to enter:
1st day of the month in: input name="start"
and strict them too to enter only the last day of the month in: input name="end" (but the default is always 1st day of the month when you click)
For example my data entry that i am looking for like below:
From: 01/07/2015 - To: 30/09/2015.. in this format (dd/mm/yyyy)
Now I can't find any parameter to set the calender to pick the last day of the month instead of always 1st day when you click on the month in "To:" field.
one more thing also that I want to always make "From:" and "To:" having 3months period and no less, I want always to make the range 3 months minimum for the entery.
Thanks a lot in advance...

You could attach an event handler to the changeDate event (doc), and change the date manually (i.e. add a month, substract a day).
For the date handling part, I would
Get the date parts
Increase the month by one, if its December, then change it to January
Create a new Date instance
date = date.setDate(date.getDate() - 1) to get the correct day
The date parts could be exctracted by simple string slicing:
var day = str.slice(0,2);
var month = str.slice(3,5);
var year = str.slice(6,10);

bootstrap-datetimepicker hours and minutes not defaulted to 00:00

how to set default time hours and minutes as 00:00 but if i pick hours and minutes picked value should come. My issue is current time is coming by default and current date is highlighting. i am using bootstrap date time picker
By using option i am changing like this but not working. if i change format like dd/mm/yyyy 00:00 all the time it is showing 00:00 even if i pick hours and minutes. pls help me to solve this issue
My code is
$(document).ready(function(){
$('#datetimepicker1').datetimepicker({
$('#datetimepicker1').datetimepicker("setHours",'00' );
});
$('#datetimepicker2').datetimepicker({
$('#datetimepicker2').datetimepicker("setMinutes",'00' );
});

Perhaps you can try initializing the date picker with a default date, instead of trying to explicitly set the values. (I'm not sure datetimepicker even has setHours/minutes methods.) For example, you might do something like:
var d = new Date();
// hours, minutes, seconds
d.setHours(0, 0, 0);
$('#datetimepicker1').datetimepicker({
defaultDate: d
});
Hopefully this works for you or at least points you in the right direction! :)

What's jquery you using? Is it here ?
You should try to use DateTimePicker jQuery. It's simple and very good.
jQuery('#datetimepicker').datetimepicker({
format : 'd/m/Y H:i',
defaultTime:'00:00',
formatTime:'H:i'
});