bootstrap-datetimepicker enabledDates not working as expected - javascript

bootstrap-datetimepicker
I am using this plugin and having issues in enabling certain dates.
This snippet correctly enables dates during initialization.
$("#example-datepicker").datetimepicker({
locale: "en",
format: 'M.D.YYYY',
useCurrent: true,
enabledDates: ['2020-07-24', '2020-08-25']
});
But after initialization, when I wanna update enabled dates, it doesn't work.
$("#example-datepicker").data("DateTimePicker").enabledDates(['2020-02-24', '2020-05-25']);
Any help is much appreciated!
PS: Are there any other plugins that can control what dates to enable?

Add extraFormats in initialization.
$("#example-datepicker").datetimepicker({
locale: "en",
format: 'M.D.YYYY',
extraFormats: ['YYYY-MM-DD'],
useCurrent: true,
enabledDates: ['2020-07-24', '2020-08-25']
});
By adding that, the plugin can understand dates provided in enabledDates.
The reason it was rendered correctly at initialization is that since YYYY-MM-DD is a standard Date format, it is recognized.
But after initialization (format has been specified), it can no longer recognize the standard format.

Related

Using Jquery's datepicker is it possible to set a default date if the date passed to it is None?

I'm using Jquery's datepicker with Jinja. I'm going to be passing dates from the Python side to the HTML & JS side to use with the datepicker, but there may not always be a date, so in the case that a date doesn't exist, can I have the datepicker default to the current date? Or not default to date at all?
$('#datepicker2').datepicker({
format: 'mm-dd-yyyy',
autoclose: true,
minDate: 0,
}).datepicker('setDate', 'now')
For example here is a datepicker I'm using. It defaults to the current date, but I want to be able to pass in a date to it to set the date, and if that date is None/Null, then I want it to default to 'now'. Is there some sort of conditional I can tie to it? Any help is appreciated! Thanks!

Format LT datetimepicker : always returns today's date

I've to use the bootstrap datetimepicker for a legacy project.
With "LT" format, I've an issue, even if I set a default date, it returns the current date. (today).
check it on
codepen
$(function () {
$('#datetimepicker3').datetimepicker( {
defaultDate: moment("15/05/1992","DD/MM/YYYY"),
format: 'LT'
});
$('#datetimepicker3').on('dp.change',function(){
console.log('-');
console.log($('#datetimepicker3').data('DateTimePicker').date());
console.log($('#datetimepicker3').data('DateTimePicker').date().format('DD/MM/YYYY HH:mm'));
console.log('-');
});
});
I need to receive the date I set by default in datetimepicker.
Thanks.
I think the problem is exactly because you are using 'LT'. LT is a format of TIME-ONLY, so the information about the date is lost. That way, when it transform the "only time" information to a date or moment object, it uses the current date.
The defaultDate is to set the initial date/time for the component and not to define the date that will be used when dealing with time-only information.
My suggestion: take the value from the component (as you did), extract the time and then set the desired date for that time.
I hope it helps.

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.

Bootstrap Date Range Picker -> Single Date Picker: How to set a Date

I'm experimenting with Boootstrap Date Range Picker
Whats the best way to set Date into a Single Date Picker via Javascript?
Single Date Picker initialization code
$(#date).daterangepicker({
locale: {
format: 'DD/MM/YYYY',
},
singleDatePicker: true,
showDropdowns: true
});
I tried with below code:
$("date").data('daterangepicker').setStartDate(data.startDate);
This way, I'm getting below output, which is not really acceptable!!!
Hope someone come up with a nice solution.
Cheers!!
Try
$("date").data('daterangepicker').setStartDate(data.startDate);
$("date").data('daterangepicker').setEndDate(data.startDate);
That is the only way I can find so far.
Try this:
Set Date:
$(#date).daterangepicker({
locale: {
format: 'DD/MM/YYYY',
},
singleDatePicker: true,
showDropdowns: true,
startDate: '2020/03/04',
startDate: '2020/03/04'
});
Reset date:
$("#date").data('daterangepicker').setStartDate('2020/03/04');
$("#date").data('daterangepicker').setEndDate('2020/03/04');
If u gonna reset current date:
$("#date").data('daterangepicker').setStartDate(moment());
$("#date").data('daterangepicker').setEndDate(moment());
I had the same issue, in my case. The issue was in the startDate format, it was not matching with the format given in locale:{format:'DD/MM/YYYY'}

Eonasdan Datetimepicker - how manipulate date

I wanted to ask, how can i manipulate data in Javascript, to have data like this in datetime input:
From 2015.10.12
Not as default:
2015.10.12.
Here is my code, You will see format option for date formatting, but this is wrong idea:
$('#datetimepicker1').datetimepicker({
locale: 'en',
format: 'FROM' + 'YYYY-MM-DD',
});
I am building form with 2 inputs, From and To, and when user selects some date, i wanted to show him not just date, but also this info.
Thank You for help.
This code will allow for custom text.
format: '[AB] YYYY-MM-DD'.Needed to add brackets [].

Categories

Resources