I understand that the inlnie Angular UI Bootstrap datepicker allows you set the timezone via ng-model-options. I'm using the datepicker-popup (ui.bootstrap.datepickerPopup) and would like to do the same, but ng-model-options doesn't appear to work.
My api returns the model in UTC time and need to ensure that the date displayed by the datepicker is also displayed in UTC.
Anybody know how to configure this?
Related
When using the DatePicker component from Ant Design and setting its value with the value prop, all dates in the pop-up calendar are highlighted in blue as if they are selected.
Moving the cursor over the pop-up calendar causes the date and month to change automatically without any click.
Clicking the "back" button also causes the year to change.
This issue does not occur when the DatePicker is not a controlled component. ( value is not passed as a prop )
DEMO
Ant-Design Version: 5.1.2
Change from moment js to dayjs
Ant Design is using Dayjs as a date library from 5.0.0.
Till 4.x it is momentjs.
The issue is because of passing a moment object as value to datepicker which expects a dayjs object internally.
We need to pass dayjs object instead of moment js object to resolve the issue.
Check this LIVE DEMO
If you want to use moment as your Date Library for your project follow this guide
I implemented a date picker in a nuxtjs with the vuetify app. It's working fine when selecting any date from the calendar. I need to enable the same functionality while typing also. If I am typing like 12122021, it should be formatted to 12/12/2021 on typing itself. Here is what I have tried so far.
https://stackblitz.com/edit/github-fms71e?file=pages/index.vue
I am getting an undefined error when I lose focus. How can I implement the functionality?
Check this codesandbox I made, I'm not using Nuxt but you can make yourself an idea to implement it on your project: https://codesandbox.io/s/stack-70724804-sryk8?file=/src/components/custom/CustomDatePicker.vue
This is a custom date picker component that I made for one of my projects. You can customize it to your needs but the component already come with multiple customization options that you can enable/modify through props.
The date picker can display dates in 3 formats. It use vue-the-mask library to control manual date inputs and some auxiliary functions to control date convertions that I import as a mixin.
dd/MM/yyyy
MM/dd/yyyy (Using "month-first" prop)
yyyy/MM (using "month" prop)
Regardless of the format you choose to display to the end user, the custom date picker will always work internally with yyyy-MM-dd or yyyy-MM date format
I have a bootstrap datetimepicker installed on my website, which is this plugin: https://eonasdan.github.io/bootstrap-datetimepicker/
The problem I experience is that whenever a user has a different timezone, the time in the datetimepicker changes aswell. (The value is coming from the database and is a solid date)
So for example, my timezone it does:
Whenever I change my timezone, it reverts to this:
Make one timezone default. Either in 'connect.php' or in 'head.php'. Fix it, wherever you feel suitable.
date_default_timezone_set("Asia/Bangkok");
Now, According to Bangkok, all user's time will get set. Fix this code in that page, which is included in each and every page. That's the reason i prefer it to be in 'connect.php' or 'header.php'.
I am using Datebox widget and want to limit the dates from which the user can choose.
eg. Only dates between 2013-Jan-02 and 2013-Jan-25 should be enabled, rest disabled.
How do I provide these values programatically ? Passing it in JSON is not working for me.
$('#dateInput').datebox({"mode": "calbox", 'min':"2013-01-02", 'max':"2013-01-25"});
Please let me know the syntax to pass the date range parameters.
I dont know whether it is possible in Datebox widget. But if you pick Jquery UI datepicker, it has this option.
Have a look at this if you are interested
http://jqueryui.com/datepicker/#min-max
I have faced a little problem while trying to use this two jquery plugins. Hope someone can help me out with this.
The first plugin (DatePicker) I have used is the default one that comes with the jqueryui.
The second plugin (DateTimePicker) is the DateTimePicker from http://trentrichardson.com/examples/timepicker/
What I am trying to achieve is to have a user-defined date range like the sample provided in the jqueryui, with two textboxes (specify start date and end date) http://jqueryui.com/demos/datepicker/date-range.html
While having another datetimepicker to allow user to select a datetime within the date specified above.
Here's a sample: http://jsfiddle.net/uyB52/1/
However, the issue here is that whenever I try to add in the datetimepicker javascript, the datepicker will not function properly. It will not be able to set the minimum date range as what it is suppose to be.
Have anyone encountered the same issue before? Can some one please advice me? I am still new to programming. Thanks in advance!
It looks like your datetimepicker plugin interferes with jQuery UI (although it is supposed to be a working jQuery UI plugin). There may are possibilities to fix this issue, but I would recommend to use no or another plugin for picking the time (which works).
If you want to use a datetimepicker, you will have to search for different plugins and find out which one fits your needs best. I can not really recommend a plugin because it depends on your requirements.
But you could also go without a datetimepicker plugin and only use jQuery UI instead? Have a look at this fiddle: http://jsfiddle.net/uyB52/7/
The idea is to use jQuery UI's datepicker for picking dates, and use dropdown boxes for choosing the time. You could also let the user input the time in an input field and validate it. Or, instead of dropdown boxes, use the jQuery UI slider.
Got it. You should convert string into Date as minDate and maxDate options take Date object.
$("#from").datepicker("option", "maxDate", new Date(selected_date))
jsfiddle