JQ UI DatePicker - timezone - javascript

How to force JQ UI DatePicker work in given timezone, not local?
For example: America/Toronto

We could solve this propose with momentJS + set defaultDate option JQ UI DatePicker
//Set default timezone for all new momentJS instances
moment.tz.setDefault('America/Toronto');
//Today date and time in America/Toronto timezone correction
var setDate = moment();
//Set defaultDate in proper date format for datepicker
$(element).datepicker(
{
defaultDate:setDate.format('MM/DD/YYYY')
}
Remember: Don't call toDate() method, use format() for getting proper date and time result in given timezone.

Related

set date to a specific timezone in html

I am using
<input id="123" type="date" name="date1">
I know this will use the default local time. Is there a way I could actually set it to a time with a specific time zone?
For example, my local timezone is PST but I want this input to display a time in CST time.
I have been looking for an answer for a while and still have no luck.
You can use moment.js.
Use the below function after attaching moment.js to your html file.
pass date and zone.
you can get moment.js from https://momentjs.com/
function toTimeZone(time, zone) {
var format = 'YYYY/MM/DD HH:mm:ss ZZ';
return moment(time, format).tz(zone).format(format);
}

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.

Min-max date issue in date-time picker

I am using smDateTimeRangePicker to show a date-time picker dialog.
Along with this, I am using moment.js for date manipulation. For the date picker, I set minDate and maxDate in my controller as follows:
$scope.minDate = moment().subtract(5, 'months').format('DD-MM-YYYY');
$scope.maxDate = moment().format('DD-MM-YYYY');
I want to allow the user to select a date between today and 5 months before today's date.
But when I assign these values to the date-time picker, it is only allowing me to select today's date. All other dates are disabled.
Is there anything that I am missing or doing wrong?
Here's the plunker to an example which reproduces this issue: plunker example
You need to change the format of minDate and maxDate to match the format attribute
$scope.minDate = moment().subtract(5, 'months').format('MM-DD-YYYY');
$scope.maxDate = moment().format('MM-DD-YYYY');
and you haven't used expression binding for attributes in your template like below
max-date="{{maxDate}}"
min-date="{{minDate}}"
Working Plunker

JavaScript date displaying the wrong day and time

I have this application where I want to use you date, but the problem is that the date is not working as I expect.
I create a date object like this:
// Get today's date
today: function () {
// Create a new date
var date = new Date();
// Set to midnight
date.setHours(0, 0, 0, 0);
// Return our date
return date;
},
and If I output that date in my view I get yesterdays date at 23:00 hours....
Which looks like this:
2015-07-08T23:00:00.000Z
Does anyone know how I can get the date to be formatted properly?
Update
Just to elaborate a bit, I want to use the date to compare against records in the database. These records have the date applied to them, because the JavaScript is showing the local date time, it is not comparing correctly. Also there is a case where I am saving that date and I don't want it to save the local date.
based on your culture setting you can use the
date.toLocaleDateString()
this will give localized string format back
date.toUTCString();
date.toLocaleString();
date.toLocaleDateString();
date.toDateString();
date.toISOString();
Find your answer here :) And the best option is to use momentjs http://momentjs.com/
So, I ended up creating this function:
// Converts a date to a timeStamp
this.convertToTimeStamp = function (dateTime) {
// Get just the date
var date = dateTime.toDateString();
// Get the timestamp
var timeStamp = Date.parse(date);
// Return our timeStamp
return timeStamp;
};
If my understanding is correct, that should create the same date no matter what timezone / locale you are in.

MomentJS set timezone

Because of how we store dates I need to set a moment object to timezone +0000.
I've tried using a variety of ways:
var d = moment().hour(0).minute(0).second(0).millisecond(0).zone('+0000');
var d = moment().hour(0).minute(0).second(0).millisecond(0).utc(0);
var d = moment().hour(0).minute(0).second(0).millisecond(0).utc();
When I console.log these dates they come out with the time 00:00:00 GMT+0100 (BST)
Looking at the documentation it seems to say that .utc() and .zone() are for printing a format only, is this true? (This is the same I've seen with other questions on here, none address setting the actual object to a timezone it seems)
After I set and then manipulate the date I convert it to the JS Date object to use with angular-ui bootstrap datepicker (note: it was a moment object which I used console.log on).
Unless you specify a timezone offset, parsing a string will create a
date in the current timezone.
http://momentjs.com/docs/#/parsing/string-format/
Example: You can tell in which timezone is your date using
moment ('2015-05-06T23:00:00.000Z').
If you need to convert this to a specific timezone you can do so:
moment().utc(0).format('YYYY-MM-DD HH:mm Z').
About Timezone in Javascript: How do I specify the time zone when creating a JavaScript Date?

Categories

Resources