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.
Related
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!
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.
I need to set today date is server date but in fullCalendar it is displaying local system date as today date.
I have set server date with gotoDate option as following.
$('#calendar').fullCalendar('gotoDate', currentDate);
but it is not working properly as i click on the today button it is displaying local system date.
please help me.
You can set the default date in fullcalendar:
https://fullcalendar.io/docs/current_date/defaultDate/
you have to use moment plugin (which is a third party plugin and you have to include it separately in your project before fullcalendar)
https://fullcalendar.io/docs/utilities/Moment/
I set the current date on click of today button. Code is as following.
$('.fc-today-button').click(function () {
$('#calendar').fullCalendar('gotoDate', currentDate);
});
I'm needing some guidance with a little jQuery's datepicker problem, surely its some detail i'm overseeing.
I'm trying to set some minimum dates for two datepickers; I fetch via ajax a message containing a description, a start date, and an end date, and show those values on a form. For start/end dates, I have jQuery datepickers, and for start date I always set the mininum date as today, which usually overwrites the fetched value. On the other hand, for end date, I want to set the minimum date as whatever is selected on the other datepicker (so you can't cross dates and set an end date lower than start date)
I try to set the EndDate.datepicker minDate as soon as I bind the datepicker, and again after eventually setting a value for StartDate, but it still isn't working on EndDate (it doesn't limit any date, much less update the limit when I change the StartDate)
This's the code I have:
StartDate.datepicker({ minDate: -0 });
EndDate.datepicker({ minDate: StartDate.datepicker("getDate") });
//Initial Behavior - when loading, show last landing message
$.ajax({
...
success: function (data) {
var fetchedStartDttm = ParseJsonDate(data.GetMessageResult.StartDttm);
var fetchedEndDttm = ParseJsonDate(data.GetMessageResult.EndDttm);
var today = new Date();
if (today <= fetchedEndDttm) {
//Message still in valid period
Message.val(data.GetMessageResult.MessageDesc);
StartDate.datepicker("setDate", fetchedStartDttm);
EndDate.datepicker("setDate", fetchedEndDttm);
} else {
//Last message already expired
Message.val("Text to be displayed (DELETE THIS REMINDER)");
StartDate.datepicker("setDate", today);
EndDate.datepicker("setDate", today);
}
//minimum enddate should be at least the startDate
EndDate.datepicker({ minDate: StartDate.datepicker("getDate") });
}
});
I'd deeply appreciate any help!
-ccjmk
I found similar questions and they have working solutions (at least for me)
Explaned here:How do I set Min Date in Datepicker from another Datepicker?
and here: Restrict date in jquery datepicker based on another datepicker or textbox
I'm using jquery-ui datepicker on a User DOB field in a Rails 3.2 app.
I'm trying to achieve the following:
restrict the range of dates that can be selected, max = today, min = 100 years ago.
initialize the datepicker with the date currently stored in the database (if any).
display the selected date in a particular format in the dob text field.
My form looks like this:
<%= form_for #user do |f| %>
<%= f.text_field :dob, :class=>'date-selector-dob', :value => (#user.dob.blank? ? '' : #user.dob.to_s(:long)) %>
<% end %>
where .to_s(:long) is the display format I'm after.
With the following javascript the datepicker works, the text field is properly formatted, but no max/ min date is set, and no initialization with the stored date occurs.
$(function (){ // enabledate picker
$('.date-selector-dob').datepicker();
});
I added to this functions that I though would set min/max range and initialize, as follows:
$(function (){ // enable date picker
$('.date-selector-dob').datepicker({minDate: new Date('-100Y'), maxDate: new Date('-1D')}); // enable datepicker and set range
$('.date-selector-dob').datepicker('setDate', new Date($('.date-selector-dob').attr('value'))); // initialize datepicker with stored value
});
This is initializing the date picker correctly, but is not setting a min/max range. Is my approach incorrect?
In addition, the extended function resets my formatting string, and data is not displayed according to .to_s(:long). Using the basic function above, this formatting string is properly applied. What would cause this?
I'm pulling my hair out with this! I'd really appreciate it if someone can help me see whatever is it I've missed, and understand what I'm doing wrong. Thanks!
JavaScript's Date doesn't know what -100Y or -1D mean so your minDate and maxDate settings aren't going to be anything that the datepicker will understand.
From the fine manual:
minDate
Set a minimum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.
So you want this:
$('.date-selector-dob').datepicker({
minDate: '-100y',
maxDate: '-1d'
});
Demo: http://jsfiddle.net/ambiguous/RQgCW/
If you want the datepicker to use a certain format for the date, use the dateFormat option:
The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the formatDate function.
Also, you should be able to skip this:
$('.date-selector-dob').datepicker('setDate', new Date($('.date-selector-dob').attr('value')))
and just set the <input>'s value attribute to the date (preferably in ISO 8601 format), then the datepicker should be able to take it from there on its own.
At the time of initialize datepicker object we need to pass all our conditions as a hash. In your example you datepicker initialized for second time, that's the problem for not getting date range.
$(function (){
$('.date-selector-dob').datepicker({
dateFormat: 'M dd, yyyy',
minDate: '-1y',
maxDate: '+1m',
});
});
You can set the date by following way, for this you need to specify correct date format(already specified in initializer param as 'dateFormat')
$('#popupDatepicker').val("Feb 13, 2012");