I am trying to use a date picker field on a Yii2 application and set the onchange js function. I am using this date picker. Can anybody show me how to set the onchange js function?
You should use the clientEvents option to specify the bootstrap datetime picker's event dp.change
dp.change Fired when the date is changed.
Parameters:
e = {
date, //date the picker changed to. Type: moment object (clone)
oldDate //previous date. Type: moment object (clone) or false in the event of a null }
Emitted from:
toggle() Note: Only fired when using useCurrent
show() Note: Only
fired when using useCurrent or when or the date is changed to comply
with date rules (min/max etc)
date(newDate)
minDate(minDate)
maxDate(maxDate)
daysOfWeekDisabled()
To use it inside your active form you can use the following
echo $form->field ( $model , 'date_booking')->widget (
nex\datepicker\DatePicker::className () , [
'addon' => false ,
'size' => 'sm' ,
'clientEvents' => [
'dp.change' => new \yii\web\JsExpression ( "function (e) { console.log(e.date,e.oldDate); }" ) ,
] ,
] );
May be This could help you.
$("#id").on("dp.change", function (e) {
$('#id').data("DateTimePicker").minDate(e.date);
});
Related
I'am vuejs-datepicker . I'm trying to print the selected date which is stored in a variable in data. Initially the value of the variable is empty. vuejs-datepicker supports the selected event. so when the event is triggering, I mean if date is selected the selected event get triggered. but does not print ta current selected date rather it print empty string. if I again select another date the it prints the previous date. It is printing the the previous stored date. code is given below
Uses
<date-picker :bootstrap-styling="true" class="datepicker form-control"
placeholder="Select Date" v-model="appointment.appointmet_date"
#selected="dateSelected()"></date-picker>
dateSelected method
dateSelected () {
console.log(this.appointment.appointmet_date)
},
data property
data () {
return {
appointment: {
appointmet_date: '',
}
}
}
When I entered first date it printed null. when I entered date second time it printed the time entered first time
upadate
dateSelected () {
// console.log(this.appointment.appointmet_date)
var self = this
this.$nextTick(() => console.log(self.appointment.appointmet_date))
this.$http.post(apiDomain + 'api/getAvailableDate', {avlDate: self.appointment.appointmet_date})
.then(response => {
console.log(response)
})
}
when i entered first date it printed null. when i entered date second time it printed the time entered first time
Yes because the selected event is fired before the Vue nextTick function which updates the v-model.
Please below code and working codesandbox demo.
dateSelected (e) {
console.log(this.appointment.appointmet_date);
this.$nextTick(() => console.log(this.appointment.appointmet_date))
},
For future visitors - simply make the post request within the Vue nextTick() like so:
dateSelected () {
...
this.$nextTick(() => {/* post call here */})
}
I am using data tables to display a list of events of different types. Besides the default global text search I need to
1. filter list by event type
2. filter list by date range (show only today -> infinity)
3. Save the state of the table for the the current session.
The state saves as expected except for the date range search which is always reset. Am I missing something or custom search functions are out of the scope of state saving? Here's the relevant code in jQuery:
Fist I add my own search function through the provided method. This works except it's state is not saved
// Extend search()
var threshold_timestamp = xxxxxxxxxxxx // set for beginning of today)
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex) {
var timestamp = parseInt(data[1]); // event date timestamp
if (timestamp > threshold_timestamp) {
return true;
}
return false;
}
);
Then I add a listeners for the select used to switch between the event type options ('','Event','Sports','Dance'...) and the button user to turn on/off the date range filter
$('#filter-by-type').on('change', function() {
table.columns(0).search( $(this).val() ).draw();
});
$('#dt-history').on('click', function() {
// Logic to toggle threshold_timestamp between 0 or value
table.draw();
});
Then I call DataTables
var table = $('#example').DataTable( {
ajax: "datasource.json",
stateSave : true,
stateDuration: -1,
columns: [
{ data: "type"}, //str as 'Sport','Dance'
{ data: "date"} // int as 1528572000
]
});
I managed to scratch my head sideways and "save the date search" using localstorage but that is a hack. On page load I trigger a button click to execute the search so initially the tables seems empty, the "No data available in table" message appears and then the filtered results display. As a second hack I will suppress that message so when there will really be no data... there will be no message :(
I am using the Vue wrapper for Kendo UI and can't get sorting to work in Chrome.
I am trying to group my data into sites and order the rows by categories in those sites.
My first column in Vue is a hidden one with the category index to sort them:
<kendo-grid-column field="___categorySortingIndex" :hidden="true"></kendo-grid-column>
If I do not enable grouping on my dataSource then it orders all the categories as expected after the index number.
The issue I am dealing with only occurs when grouping the items:
group: {
field: "___siteSortingIndex",
dir: "asc"
}
There is a tutorial on it using Kendo jQuery but the functionality does not seem to work for the vue components since vue uses template syntax instead of an array of objects like the jQuery example does.
The jQuery tutorial solution:
...
columns: [{
field: "Name"
}, {
field: "Address",
sortable: {
compare: function(a, b, descending) {
if(a.Address !== b.Address)
{
return a.Address - b.Address;
}
if (descending) {
return b._position - a._position;
} else {
return a._position - b._position;
}
}
}
}]
...
Trying to do it in Vue:
<kendo-grid-colum :sortable="sortableObject" ...>
...
sortableObject = {
compare: ( a, b, descending ) => {
...
}
};
...
Setting the sortable prop to an object gives the following warning:
[Vue warn]: Invalid prop: type check failed for prop "sortable". Expected Boolean, got Object.
Is there a way to stable sort for chrome using the vue wrapper to kendo ui?
The :sortable property in the grid column only takes a Boolean type.
However, there is a :sortableCompare property that takes a Functionthat should return an object with sortable.comparein a similar way to the jQuery example you posted.
I solved this by listening to the #databinding event:
<kendo-grid ... #databinding="onDataBinding" ...>
This event runs before the template is rendered and it is possible to then sort the data before it is used in the kendo vue template:
onDataBinding( e ) {
forEach( e.items, item => {
item.items.sort( ( a, b ) => a.___categorySortingIndex - b.___categorySortingIndex );
} );
}
Whether or not this is considered bad I can't say, but it did work for what I needed it to do.
For a simple example: textbox to input currency data.
The requirement is to display user input in "$1,234,567" format and remove decimal point.
I have tried vue directive. directive's update method is not called when UI is refreshed due to other controls. so value in textbox reverts to the one without any formatting.
I also tried v-on:change event handler. But I don't know how to call a global function in event handler. It is not a good practice to create a currency convert method in every Vue object.
So what is the standard way of formatting in Vue 2.0 now?
Regards
Please check this working jsFiddle example: https://jsfiddle.net/mani04/bgzhw68m/
In this example, the formatted currency input is a component in itself, that uses v-model just like any other form element in Vue.js. You can initialize this component as follows:
<my-currency-input v-model="price"></my-currency-input>
my-currency-input is a self-contained component that formats the currency value when the input box is inactive. When user puts cursor inside, the formatting is removed so that user can modify the value comfortably.
Here is how it works:
The my-currency-input component has a computed value - displayValue, which has get and set methods defined. In the get method, if input box is not active, it returns formatted currency value.
When user types into the input box, the set method of displayValue computed property emits the value using $emit, thus notifying parent component about this change.
Reference for using v-model on custom components: https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events
Here is a working example: https://jsfiddle.net/mani04/w6oo9b6j/
It works by modifying the input string (your currency value) during the focus-out and focus-in events, as follows:
<input type="text" v-model="formattedCurrencyValue" #blur="focusOut" #focus="focusIn"/>
When you put the cursor inside the input box, it takes this.currencyValue and converts it to plain format, so that user can modify it.
After the user types the value and clicks elsewhere (focus out), this.currencyValue is recalculated after ignoring non-numeric characters, and the display text is formatted as required.
The currency formatter (reg exp) is a copy-paste from here: How can I format numbers as money in JavaScript?
If you do not want the decimal point as you mentioned in question, you can do this.currencyValue.toFixed(0) in the focusOut method.
I implemented a component. According to Mani's answer, it should use $emit.
Vue.component('currency', {
template: '<input type="text"' +
' class="form-control"' +
' :placeholder="placeholder""' +
' :title="title"' +
' v-model="formatted" />',
props: ['placeholder', 'title', 'value'],
computed: {
formatted: {
get: function () {
var value = this.value;
var formatted = currencyFilter(value, "", 0);
return formatted;
},
set: function (newValue) {
var cleanValue = newValue.replace(",", "");
var intValue = parseInt(cleanValue, 10);
this.value = 0;
this.value = intValue;
}
}
}
}
);
Using Vue custom directives + .toLocaleString() is also a very good option.
Vue.directive("currency", {
bind(el, binding, vnode) {
el.value = binding.value && Number(binding.value).toLocaleString('en-US', {style: 'currency', currency: !binding.arg ? 'USD' : binding.arg });
el.onblur = function(e) {
e.target.value = Number(e.target.value).toLocaleString('en-US', {style: 'currency', currency: !binding.arg ? 'USD' : binding.arg});
};
el.onfocus = function(e) {
e.target.value =
e.target.value && Number(e.target.value.replace(/[^\d.]/g, ""));
};
el.oninput = function(e) {
vnode.context.$data[binding.expression] = e.target.value;
};
}
});
Here is the example link: https://codepen.io/Mahmoud-Zakaria/pen/YzPvNmO
Environment: Dojo.1.8.4
If the DateTextBox does not contain a valid date, I wish to start the calendar popup at a date in the past (it's a date of birth entry box). What is the best way of achieving this?
<div maxlength="12"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props="required: true, constraints:{min:'1880-01-01',
max: new Date()}, popupClass: 'dojox.widget.Calendar'">
</div>
I want to be able to put a 'startDate' parameter or similar in the above such that the constructor for the popup will pick it up and use it.
It looks as though the dojox.widget._CalendarBase sets the date to the current date in its constructor. (actually seems to set it in both the constructor and the declaration).
NOTE: If you are using the dijit/Calendar dropdown default then use the dropDownDefaultValue property as #vogomatix says in the other answer.
The following is if you are using the dojox/widget/Calendar for the dropdown.
By default the popup is set to the current value of the textbox and if null, it will use the current date.
You can do
1) set the value of the text box to what you want the default to be
OR
2) use aspects to set the value in the calendar when it is opened.
require([
'dojo/dom',
'dojo/aspect',
'dijit/form/DateTextBox',
'dojox/widget/Calendar'
], function(dom, aspect, DateTextBox, Calendar){
var dt = new DateTextBox({ popupClass: Calendar }, dom.byId('dtText'));
aspect.after(dt, 'openDropDown', function() {
// only default if there is no value
if(dt.get('value') == null) {
// Do not set the text box when changing value,
// so temporarily override the onchange function
var oldOnChange = dt.dropDown.onChange;
dt.dropDown.onChange = function(){};
dt.dropDown.set('value', new Date(1980, 7, 4)); // default to August 4th, 1980
dt.dropDown.onChange = oldOnChange;
}
});
});
See it in action:
http://jsfiddle.net/cswing/kQYhQ/
One solution is to set dropDownDefaultValue, which works with the standard calendar.
var dt = new DateTextBox({dropDownDefaultValue: new Date( 1950,1,1)},
dom.byId('dtText'));
dropDownDefaultValue gets passed to the calender in the form of currentFocus by the popup. Unfortunately dojox.widget.Calendar does not recognise currentFocus and the way round that is to either extend the class to do so, or to use the aspect method above.
This is how to extend the dojox.widget.Calendar in order to accept the currentFocus passed by the popup. Like the aspect method above, it temporarily disables onChange in order to prevent the value being placed in the parent DateTextBox
define([
"dojo/_base/declare",
"dojox/widget/Calendar"
], function(declare, calendar){
return declare("my.dijit.Calendar", [calendar], {
postCreate: function() {
this.inherited(arguments);
var oldOnChange = this.onChange;
this.onChange = function(){};
this.set('value', this.parseInitialValue( this.currentFocus));
this.onChange = oldOnChange;
}
});
});