I'm trying to enable a single day in the calendar, but I'm getting an error.
<script>
var nomersw = 'data_decore';
if(jQuery('input[name="'+nomersw+'"]')){
$(function(){
$("input").datepicker(
{
beforeShowDay: function (date) {
if (date.getDate() == 11 ) {
return [true, ''];
}
return [false, ''];
}
}
);
});
</script>
Observation:
nomersw is in the datepicker name in the form
I appreciate if any colleagues point out the errors in the code.
Related
I'll have an ionic loading indicator that I'll want to show after 2 seconds of loading if the application still loading data from a server else don't show it. This is the html of the spinner.
<!-- Loading -->
<div class="ion-text-center" *ngIf="isLoading && timer == 0">
<ion-spinner name="dots" color="light"></ion-spinner>
</div>
In the page component I'll set isLoading to true each time new posts are loaded. In the setPostData I'll set it back to false. But combining this with the timer doesn't work.
posts: any = [];
timer: any = 0;
isLoading: boolean;
constructor(){...}
getPostData(){
this.timer = setTimeout(() => {}, 2000);
this.isLoading = true;
this.postService.getPosts().subscribe(
(result) => {
this.setPostData(result);
}
);
}
setPostData(data){
this.posts = data.posts;
this.isLoading = false;
}
I'll found another way to do it. Create a timer(setTimeout) and bind the toggleLoading function. In the setPostData function clear the created timer. So after 2500 miliseconds the loading starts. If 2500 miliseconds is not reached the timer is cleared and the loading dots are not displayed as wished.
posts: any = [];
timer
isLoading: boolean;
constructor(){...}
toggleLoading(){
this.isLoading = !this.isLoading;
}
getPostData(){
this.timer = setTimeout(this.toggleLoading.bind(this), 2500);
this.postService.getPosts().subscribe(
(result) => {
this.setPostData(result);
}
);
}
setPostData(data){
this.posts = data.posts;
if(this.timer) {
clearTimeout(this.timer);
}
this.isLoading = false;
}
I am using Datepicker of Flatpickr and I have set the date format and it is working fine in desktop but in mobile it is not working properly.
This is my code that I added in functions.php:
add_action( 'wp_footer', function() {
?>
<script type="text/javascript">
jQuery( window ).load( function( $ ){
var limitFlatPicker;
var afterTwoDays;
var afterEightDays;
limitFlatPicker = limitFlatPicker || {};
limitFlatPicker = {
defaultSettings: {
selector: '.flatpickr-input',
minDate: true,
maxDate: true,
},
settings: {},
init: function( options ) {
this.settings = jQuery.extend( this.defaultSettings, options );
if ( this.settings.minDate || this.settings.maxDate ) {
this.waitForFlatpicker( this.callback );
}
},
waitForFlatpicker: function( callback ) {
if ( typeof window.flatpickr !== 'function' ) {
setTimeout( function() { limitFlatPicker.waitForFlatpicker( callback ) }, 100 );
}
callback();
},
modifyPicker: function( picker, settings ) {
flatpickr( picker ).set( settings );
},
callback: function() {
var self;
self = limitFlatPicker;
jQuery( self.settings.selector ).each( function() {
var picker;
picker = jQuery( this )[0],
pickerSettings = {};
if ( self.settings.minDate ) {
pickerSettings.minDate = self.settings.minDate;
}
if ( self.settings.maxDate ) {
pickerSettings['maxDate'] = self.settings.maxDate;
}
if ( self.settings.dateFormat ) {
pickerSettings.dateFormat = self.settings.dateFormat;
}
self.modifyPicker( picker, pickerSettings );
} );
}
}
limitFlatPicker.init({
minDate: new Date(),
selector: '#form-field-form_field_date',
dateFormat: 'm-d-Y',
});
} );
</script>
<?php
},11);
The dateFormat: 'm-d-Y' is working fine in desktop and in mobile, it is not showing this dateformat.
Any help is much appreciated.
I have searched and read everything I could find on change / set url in datepicker, I tried and tried but I can not change the url of the calendar ...
The situation:
In modal window just by using CSS.
I have a form in a modal CSS3 pupup in which I request the departure date and the end date.
I propose the minimum date and the maximum date and allow the user to change the dates.
Problem:
If the user invokes the calendar by clicking on the icon to change the date (minimum or maximum) and choose another date, modal window closes leaving the calendar active.
Instead I expect to close calendar and continue to manage the form fields in the modal window until the user click on the confirm button.
this is the modified script as I read:
enter code here
from = $( "#from" ).datepicker({
showOn: "button",
buttonImage: "images/calendar_icon-32x32.png",
buttonImageOnly: true,
buttonText: "From date",
changeMonth: true,
dateFormat: 'dd/mm/yy',
onSelect: function(mindata) {
if (mindata != dalla_data) {
dalla_data = mindata;
};
window.location.href = "http://index.php?ricid=1&modo=1&tiporic=2&prg=gesric#gesric_form" + this.value;
}
}).on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
display("Got change event from field");
}),
to = $( "#to" ).datepicker({
showOn: "button",
buttonImage: "images/calendar_icon-32x32.png",
buttonImageOnly: true,
changeMonth: true,
dateFormat: 'dd/mm/yy',
buttonText: "To date",
onSelect: function(maxdata) {
if (maxdata != alla_data) {
alla_data = maxdata;
};
window.location.href = "http://index.php?ricid=1&modo=1&tiporic=2&prg=gesric#gesric_form" + this.value;
}
}).on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
$("#from").datepicker('enable');
$("#to").datepicker('enable');
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
But it does not work, and debugging on the calendar link remains:
<a class="ui-state-default ui-state-active" href="#">
Thanks for your help
ok, I solved
I cleaned the script and now it works.
$( function() {
from = $( "#from" ).datepicker({
showOn: "button",
buttonImage: "images/calendar_icon-32x32.png",
buttonImageOnly: true,
buttonText: "From date",
changeMonth: true,
dateFormat: 'dd/mm/yy'
}),
to = $( "#to" ).datepicker({
showOn: "button",
buttonImage: "images/calendar_icon-32x32.png",
buttonImageOnly: true,
buttonText: "To date",
changeMonth: true,
dateFormat: 'dd/mm/yy'
});
$("#from").datepicker('enable');
$("#to").datepicker('enable');
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
Trying to use jquery-chosen with vue, the problem is that this plugin hides the actual select that I applied v-model, so when I select a value vue doesn't recognize it as a select change event and model value is not updated.
The value of the select is being changed actually when I select something, I've inspected this with console.log to see the selected value.
http://jsfiddle.net/qfy6s9Lj/3/
I could do vm.$data.city = $('.cs-select').val(), that seems to work,
But is there another option? If the value of the select was changed why vue doesn't see this?
#swift's answer got pretty close, but as #bertrand pointed out, it doesn't work for multiselects. I've worked something out that works with both cases: http://jsfiddle.net/seanwash/sz8s99xx/
I would have just commented but I don't have enough rep to do so.
Vue.directive('chosen', {
twoWay: true, // note the two-way binding
bind: function () {
$(this.el)
.chosen({
inherit_select_classes: true,
width: '30%',
disable_search_threshold: 999
})
.change(function(ev) {
// two-way set
// Construct array of selected options
var i, len, option, ref;
var values = [];
ref = this.el.selectedOptions;
for (i = 0, len = ref.length; i < len; i++) {
option = ref[i];
values.push(option.value)
}
this.set(values);
}.bind(this));
},
update: function(nv, ov) {
// note that we have to notify chosen about update
$(this.el).trigger("chosen:updated");
}
});
var vm = new Vue({
data: {
city: 'Toronto',
cities: [{text: 'Toronto', value: 'Toronto'},
{text: 'Orleans', value: 'Orleans'}]
}
}).$mount("#search-results");
I am opened for other suggestions, but for the time-being I did it this way:
html
<div id='search-results'>
{{city}}
<select class="cs-select" v-model='city'>
<option value="Toronto">Toronto</option>
<option value="Orleans">Orleans</option>
</select>
</div>
js
window.vm = new Vue({
el: '#search-results',
data: {
city: 'Toronto',
}
})
$('.cs-select').chosen({
inherit_select_classes: true,
width: '30%'
}).change( function() {
vm.$data.city = $('.cs-select').val()
})
Update: Be advised this doesn't work from within a v-for loop. A related question that deals with that is available here.
Going off of #kaktuspalme's solution, and with help from my friend Joe Fleming, I came up with a solution that works with Vue 2 and allows single and multiple selections:
Vue.directive('chosen', {
inserted: function(el, binding, vnode) {
jQuery(el).chosen().change(function(event, change) {
if (Array.isArray(binding.value)) {
var selected = binding.value;
if (change.hasOwnProperty('selected')) {
selected.push(change.selected);
} else {
selected.splice(selected.indexOf(change.deselected), 1);
}
} else {
var keys = binding.expression.split('.');
var pointer = vnode.context;
while (keys.length > 1)
pointer = pointer[keys.shift()];
pointer[keys[0]] = change.selected;
}
});
},
componentUpdated: function(el, binding) {
jQuery(el).trigger("chosen:updated");
}
});
Use it like this:
<select v-model="mymodel" v-chosen="mymodel">...</select>
It works with multiple="multiple" and even with nested state, e.g.:
<select v-model="nested.mymodel" v-chosen="nested.mymodel">...</select>
See the fiddle here: https://jsfiddle.net/tylercollier/bvvvgyp0/5/
Answer:
http://jsfiddle.net/qfy6s9Lj/5/
<div id='search-results'>
Vue model value <br>
{{city}}
<hr>
Select value:
<select class="cs-select" v-chosen>
<option value="Toronto">Toronto</option>
<option value="Orleans">Orleans</option>
</select>
</div>
Vue.directive('chosen', {
bind: function () {
var vm = this.vm;
this.el.options = vm.cities;
this.el.value = vm.city;
$(this.el).chosen({
inherit_select_classes: true,
width: '30%',
disable_search_threshold: 999})
.change( function() {
vm.city = this.el.value;
}.bind(this)
);
}
});
var vm = new Vue({
data: {
city: 'Toronto',
cities: ['Toronto', 'Orleans']
}
}).$mount("#search-results");
UPDATE: an even better solution (thanks to simplesmiler):
http://jsfiddle.net/simplesmiler/qfy6s9Lj/8/
I made an update for vue2.
Vue.directive('chosen', {
selected: null,
inserted: function (el, binding) {
selected = binding.value;
$(el).chosen().change(function(event, change) {
if(change.hasOwnProperty('selected')) {
selected.push(change.selected);
} else {
selected.splice(selected.indexOf(change.deselected), 1);
}
});
},
componentUpdated: function(el, binding) {
selected = binding.value;
$(el).trigger("chosen:updated");
}
});
var vm = new Vue({
el: '#app',
data: {
selected: [],
cities: [{id: 1, value: "Toronto"}, {id: 2, value: "Orleans"}, {id: 3, value: "Bern"}]
}
});
See: https://jsfiddle.net/kaktuspalme/zenksm2b/
Code taken from #kaktuspalme answer. It works with non-multiple elements now and only for non-multiple.
Vue.directive('chosensingle', {
inserted: function (el, binding) {
var selected = binding.value;
$(el).chosen().change(function(event, change) {
if(change.hasOwnProperty('selected')) {
selected.value = change.selected;
} else {
selected.value ='';
}
});
},
componentUpdated: function(el, binding) {
$(el).trigger("chosen:updated");
}
});
Comments from #Tyler Collier are taken into account
But be carefully,property you use in v-model should be defined as array , e.g. applicantId: [] otherwise it doesn't work
I have a datepicker that is bind to the textbox
MakeDateField: function () {
$(this).not(".dispField").datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, yearRange: '-100:+20', onSelect: function () { $(this).blur(); } });
$(this).blur(function () {
$(this).val($.trim($(this).val()));
if (datePickerBlurFix == 0) {
datePickerBlurFix = 1;
if (isValidDate($(this).val()) == false) {
$(this).val(convertDate($(this).val()));
if (dateRegEx.test($(this).val()) == false && $(this).val() != '') {
if ($(this).val() != "today" && $(this).val() != "**No Access**") {
$(this).val('');
msgBox({ Msg: msgDateCheck, Title: applicationName + ' - Error', Width: 300, Type: 'warning' }, function () {
$(this).focus();
datePickerBlurFix = 0;
});
}
}
}
}
datePickerBlurFix = 0;
});
},
My problem is when I press enter, the datepicker will automatic select today date. But it doesn't go in to the following code
$("#<%=txtDateSendFrom.ClientID %>").keypress(function (event) {
if (event.which == 13) {
$("#<%=btnFilter.ClientID %>").trigger("click");
event.preventDefault();
}
});
No matter how hard I press "Enter". I think this is because it has lost focus, but if I add one $(this).focus() in to the datepicker. It also didn't work, plus the window of the datepicker will remain opened.
How can I solve this problem?
Thank You