I am using Bootstrap 3 Datetimepicker with Rails 4.
Issues is with, when I have validations on the datetimepicker.
$('#start_date').datetimepicker({
format: 'DD-MM-YYYY hh:mm A',
minDate: moment(),
widgetPositioning: {
horizontal: 'auto',
vertical: 'auto'
}
});
So, with this I cannot select the datetime before current time which is my requirement. But when I edit the particular record, I get the current time only. It does not shows me the saved datetime from the datatbase.
If I remove the minDate, it shows me the correct datetime.
Is there any way to handle this ? Or I have to handle through backend only by removing the minDate?
This is the link which I am following:
https://eonasdan.github.io/bootstrap-datetimepicker/
Thanks.
Have you tried something like:
$('#start_date').datetimepicker({
format: 'DD-MM-YYYY hh:mm A',
minDate: moment(),
keepInvalid: $('#start_date').val() ? true : false,
widgetPositioning: {
horizontal: 'auto',
vertical: 'auto'
}
});
Related
I wanted to create a graph which contains a Time Cartesian axis. The docs tell me that I need to use an adapter for a type: 'time' axis. I chose chartjs-adapter-date-fns, and imported it using the following cdn:
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
Now the docs tell me an object must be passed as the adapters.date property of an axis id. But which class/object should I put there? I'm stuck here. Can anyone point me in the right direction?
I'm using ChartJS 3.4.1 and Chartisan.
x: {
adapters: {
date: {
// Adapter object here.
}
},
type: 'time',
time: {
unit: 'day'
},
},
Many thanks in advance!
The documentation for chartjs-adapter-date-fns states:
date-fns requires a date-fns locale object to be tagged on to each format() call, which requires the locale to be explicitly set via the adapters.date option
And gives the following example:
// import date-fns locale:
import {de} from 'date-fns/locale';
// scale options:
{
adapters: {
date: {
locale: de
}
}
}
Hopefully not too late, but just in case: I grappled with this, too, and in the end found that you can simply feed chartjs with time scale integers as x values. Convert your timestamps to seconds since the epoch and multiply by 1000, because js uses milliseconds whereas unix uses seconds.
My code is in python, so I convert the timestamp string to milliseconds since the epoch, fist:
# get data from backend
hist = self.backend_get(f"/{name}/history")
# convert format for chart, filter out None
data_l = [{'x' : 1000*int(datetime.fromisoformat(d['timestamp']).strftime('%s')),
'y' : d['value']} for d in hist if d['value'] is not None]
label = "<insert your label>"
Now construct the data
data = {
'type': 'line',
'data': {
'labels': [],
'datasets': [{
'label': label,
'data': data_l,
}]
},
'options': {
'scales': {
'x': {
'type': 'time',
'time': {'unit': 'day'},
},
},
},
}
Finally insert the charts js and canvas into the html:
html_s += '''
<div>
<canvas id="myChart" class="history_canvas"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx,
'''
html_s += f'{data}'
html_s += '''
);
</script>
<h3>Raw data</h3>
'''
PS I think this only works in Unix because of the epoch.
Nevermind, just adding the cdn was sufficient. The problem was that the labels weren't in date format but in relative time instead ("2 hours ago" instead of 20-07-2021)
I am having a problem with my fancybox 3 and jquery ui datepicker.
if I place the datepicker outside the fancybox.. the dropdown for months and years are working.. but when I place it inside fancybox. the dropdown is not being triggered. any idea what is happening?
$("#Date_To").datepicker({changeMonth: true,changeYear: true});
image
Try disabling focusing, something like this:
$('[data-fancybox]').fancybox({
autoFocus : false,
trapFocus : false,
touch : false,
beforeClose : function() {
$( ".selector" ).datepicker( "hide" );
}
});
Demo - https://codepen.io/fancyapps/pen/QqLXaz
I tried using modal and found a solution. is there any way I can covert this code for fancybox?
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
$confModal.on('hidden', function() {
$.fn.modal.Constructor.prototype.enfor
I am facing one problem that Datepicker is not working properly first time, i.e. first time when i open the page and click on "from"/"to" input field, the datepicker opens but I cannot select a date as I get an error on console: "Uncaught Missing instance data for this datepicker". But when I refresh page, it perfectly works!
Why does this happens?
This is my code:
$('.datepicker').live('focus',function(){
$(this).datepicker({
defaultDate : "+1w",
changeMonth : true,
numberOfMonth : 1,
dateFormat: 'dd-mm-yy'
});
});
can you tell is it right to use '.live' method here?
i guess you are doing this
$("#datepicker").click(function(){
$(this).datepicker({ dateFormat: 'yy-mm-dd' }).val();
});
May be only this will work as it did for me
$(function() {
$("#datepicker").datepicker({ dateFormat: 'yy-mm-dd' }).val();
});
If its for multiple inputs just make use of class name instead of id.
$('.datepicker').on('focus',function(){
$(this).datepicker({
defaultDate : "+1w",
changeMonth : true,
numberOfMonth : 1,
dateFormat: 'dd-mm-yy'
});
});
Try this
for it to show first time you can do this inside on click:
$("#datepicker").datepicker().datepicker( "show" )
You can try this
$('body').on('focus',".datepicker", function(){
$(this).datepicker();
});
I use Google Chart API.
Can page number be shown in Table while paging is enabled ?
Page number will automatically show up just by using "page: 'enable'" while giving table options.
var tab_options = {title: 'Table View',
showRowNumber: true,
width: '100%',
hieght: '50%',
page: 'enable',
pageSize: '10',
// pagingSymbols: {prev: ['< prev'],next: ['next >']},
allowHtml: true,
alternatingRowStyle: true}
// Instantiate and Draw our Table
var table = new google.visualization.Table(document.getElementById(div_id));
table.clearChart();
table.draw(TableData, tab_options);
Refer more here
Is there any way to apply a template to the selected value of a ComboBox? I'm using a template to display the drop down values of the ComboBox, but as soon as i select one, the plain value from the datastore is shown.
{
id: 'requestStatusCombo',
hiddenName: 'requestStatus',
tpl: '<tpl for="."><div class="x-combo-list-item">{statusCode:requestStatus}</div></tpl>',
fieldLabel: 'Status',
xtype: 'combo',
mode: 'local',
triggerAction: 'all',
store: new Ext.data.ArrayStore({
fields: ['statusCode'],
data: [['unassigned'],['assigned'],['closed']]
}),
valueField: 'statusCode',
displayField: 'statusCode'
}
I want to use my format function requestStatus to translate the statusCodes into locale spesific status names, and this works well for the drop down list, but as soon as I select something, the statusCode is shown.
So is it possible to assign a template to the displayField, or perhaps do some simple batch modification on the datastore? By processing the input through a reader maybe? Is there another <tpl for="?"> keyword that will make this happen?
I'm looking for some simple method utilizing the Ext library. If the only solution is to pre process the data, I'm capable of doing that myself.
I found a solution!
I changed my datastore, and added a reader to pre-process the status using a convert function:
{
id: 'requestStatusCombo',
hiddenName: 'requestStatus',
fieldLabel: 'Status',
xtype: 'combo',
mode: 'local',
triggerAction: 'all',
store: new Ext.data.Store({
data: [['unassigned'],['assigned'],['closed']],
reader: new Ext.data.ArrayReader({},[
{name: 'statusCode', mapping: 0},
{name: 'displayname', mapping: 0, convert: function(statusCode) {
return Ext.util.Format.requestStatus(statusCode);
}}
])
}),
valueField: 'statusCode',
displayField: 'displayname'
}
Examinig generated DOM you will notice that while list elements are DIVs, the field itself is html INPUT element. You can't have HTML within INPUT element... so no... no xtemplate here.
This does not mean it can't be done by extending Ext.form.ComboBox (or Ext.Component maybe)