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 */})
}
Related
I'm having trouble to dynamically change the selected day. For example, I want to change selected day to today when leaving the screen; I don't want to have other selected day than today when leaving... How can I do that? I'm using the agenda.
Also, I want to change the selected day when the user clicks on some button in that screen. My agenda list date is not changed at all if I just set the state for selectedDay...
My code for now;
componentDidMount() {
this.props.navigation.addListener('didBlur', (playload)=>{
console.log(playload);
this.onDayPress(Moment().format('YYYY-MM-DD').toString());
});
}
My agenda:
<Agenda
// the list of items that have to be displayed in agenda. If you want to render item as empty date
// the value of date key kas to be an empty array []. If there exists no value for date key it is
// considered that the date in question is not yet loaded
items={this.state.items2}
// callback that gets called when items for a certain month should be loaded (month became visible)
//loadItemsForMonth={}
// callback that fires when the calendar is opened or closed
onCalendarToggled={(calendarOpened) => {}}
// callback that gets called on day press
onDayPress={this.onDayPress.bind(this)}
// callback that gets called when day changes while scrolling agenda list
onDayChange={(day)=>{
this.setState({day: day})
console.log('OnDayChange: ' + day);
}}
// initially selected day
//selected={ Moment().format('YYYY-MM-DD').toString()}
//selected={'2018-02-20'}
selected={this.state.selectedDay}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={this.state.minDate}
// Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
maxDate={this.state.maxDate}
...
onDayPress method;
onDayPress(day) {
//console.log('Predn zamenjam selected day: ' + this.state.selectedDay);
if(day.dateString === undefined) {
if(day !== undefined) {
//console.log('day: ' + day);
this.setState({
selectedDay: day
});
return true;
}
}
this.setState({
selectedDay: day.dateString
});
this.getNextThreeDays(day.dateString);
this.getQuotes(day.dateString);
}
Environment
npm ls react-native-calendars: 1.19.4
npm ls react-native: ^0.55.4
Few years late but managed to solve this using refs
import React, { createRef } from 'react';
const agendaRef = createRef();
When rendering the agenda include the reference
<Agenda
ref={agendaRef}
...
/>
For the onPress function for the button include the call to chooseDay
const date = '2020-10-01' // the date you want to go to
agendaRef.current.chooseDay(date)
It should animate as if the date button was tapped
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 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);
});
We are launching an events application where users can search upcoming music festivals. We also want the filtered search results to display in chronological order by "startDate".
Our event cards:
<v-card flat class="pa-2 mb-3 eventcard" v-for="event in filteredEvents" :key="event.id"></v-card>
Then our computed property:
filteredEvents: function(){
return this.$store.getters.loadedEvents.filter((event) => {
return event.title.toLowerCase().match(this.search.toLowerCase())
})
}
And finally, an example of an event start date:
startDate:"2018-04-13"
Per the docs, I've tried adding "_.orderBy(this.event, 'startDate')" but I just get the error this.search.toLowerCase(...).orderBy is not a function
Any ideas? Thanks!
use .sort
export default {
filteredEvents: function() {
return this.$store.getters.loadedEvents
.filter(event => {
return event.title.toLowerCase().match(this.search.toLowerCase());
})
.sort(function(a, b) {
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(b.startDate) - new Date(a.startDate);
});
}
};
method from https://stackoverflow.com/a/10124053/5599288
I use moment.js to display how many time has passed from some event.
I have a list (rendered using vue.js)
event 3, 5 seconds ago
event 2, 1 minute ago
event 1, 5 minutes ago
The problem is: list is not updated frequently (new items are added, for example, every 2 minutes).
I want to update n (seconds|minutes) ago strings.
Should I do simple loop using setInterval?
for(let i = 0; i < this.list.length; i++) {
let item = this.list[i];
item.created_at_diff = moment(item.created_at).fromNow();
this.$set(this.list, i, item);
}
or there is a better approach?
Here is how I would do such a thing, tell me if I am wrong:
First, I would create a component that will make the timer:
let Timer = Vue.extend({
template: '#timer',
props: ['timestamp'],
data () {
return {
formatted: ''
}
},
methods: {
format () {
let self = this
this.formatted = moment().to(moment(this.timestamp,'X'))
// Uncomment this line to see that reactivity works
// this.formatted = moment().format('X')
setTimeout(() => {
self.format()
},500)
}
},
created () {
this.format()
}
})
The timer takes one property, a UNIX timestamp in seconds. The component contains one method called format() that will update the only data formatted of the component. The method is recursive and calls itself every 500ms (with the setTimeout()), you can make this number bigger if you want.
Here is a jsFiddle I made if you want to test it:
https://jsfiddle.net/54qhk08h/