I am using https://github.com/TrevorS/bootstrap3-datetimepicker-rails datetimepicker in my rails application. How do we close the widget after clicking on today button?
$(document).on('turbolinks:load', () => {
$(".form_datetime").datetimepicker({
timeZone: 'utc',
format: "YYYY-MM-DD HH:mm:ss UTCZ",
defaultDate: moment().tz('UTC'),
icons: {
today: 'todayText',
up: 'glyphicon glyphicon-chevron-up',
up: "fa fa-arrow-up",
down: "fa fa-arrow-down",
previous: " fa fa-arrow-left",
next: "fa fa-arrow-right"
},
showTodayButton: true,
ignoreReadonly: true,
allowInputToggle: true,
useCurrent: true,
});
Watch for the dp.change event, access the date picker through the data attribute of the anchor element, then call the hide function.
$(document).on("dp.change", () => {
$(".form_datetime").data("DateTimePicker").hide()
})
Documentation Source:
http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#hide
http://eonasdan.github.io/bootstrap-datetimepicker/Events/#dpchange
Related
I would like to prevent a new slot being created when already occupied. For example, if the dates selected overlap e.g. Slot one has 10am to 11am and potential added slot is 10:15 to 11:15, I want to block this as some of the time is already taken.
Currently, I am trying to use the dateEvent option in Vue but it still creates the slot. I wanted to get the current slot data but can't find a way of doing this and eventOverlap and slotEventOverlap seem to do nothing in this context.
Has anyone run into this problem before?
Code Example:
export default {
components: {
FullCalendar
},
mounted() {
console.log('Component mounted.')
},
data() {
return {
allEvents: [],
calendarOptions: {
plugins: [timeGridPlugin, dayGridPlugin, interactionPlugin],
initialView: 'timeGridDay',
selectable: true,
selectMirror: true,
allDaySlot: false,
slotDuration: "00:15:00",
slotMinTime: '09:00:00',
slotMaxTime: '19:00:00',
editable: false,
eventLimit: true,
eventOverlap: false,
slotEventOverlap: false,
dateClick: this.handleDateClick,
events: function (fetchInfo, successCallback, failureCallback) {
//...
},
}
}
},
methods: {
handleDateClick: function (arg) {
console.log(arg, arg.view.getCurrentData())
let startDateTime = new Date(arg.dateStr)
let endDateTime = new Date(arg.dateStr)
const calendar = this.$refs.fullCalendar.getApi()
var event = calendar.getEventById('my-event')
if (event) {
event.remove()
}
calendar.addEvent({
id: 'my-event',
title: 'Selected Slot',
start: startDateTime,
end: new Date(endDateTime.setHours(endDateTime.getHours() + 1))
})
calendar.unselect()
}
},
}
I am using https://www.npmjs.com/package/vue-multi-date-picker in my vuejs code
I want to know when I edit the form How to show selected dates in datepicker text.
for example I am using
<m-date-picker
v-model="date"
:lang="lang"
:multi="multi"
:always-display="false"
:format="formatDate"
data-parsley-required="true"
:class="{
'is-invalid':
submitted &&
$v.date.$error
}"
>
</m-date-picker>
export default {
name: "newspaper-result",
components: {
editor: Editor // <- Important part
},
data() {
return {
multi: true,
lang: "en",
date: [],
notClassified: true,
submitted: false
};
},
methods: {
formatDate(date) {
return date.toLocaleDateString();
},
}
Now when I insert the date in
this.date = date come from db gives error that date.toLocaleDateString(); is not a function
You are calling toLocaleDateString() function on a string, but strings don't have such function, this is why you are getting the error.
This function needs a properly constructed date object, not a string, so convert it using new Date():
formatDate(date) {
return new Date(date).toLocaleDateString()
}
I am using fullCalendar v4.0 with no jquery. I have initialized it like this
<div id="calendar"></div>
In data object I have this.
calendar: null,
config: {
plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
axisFormat: 'HH',
defaultView: 'timeGridWeek',
allDaySlot: false,
slotDuration: '00:60:00',
columnFormat: 'dddd',
titleFormat: 'dddd, MMMM D, YYYY',
defaultDate: '1970-01-01',
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
eventLimit: true,
eventOverlap: false,
eventColor: '#458CC7',
firstDay: 1,
height: 'auto',
selectHelper: true,
selectable: true,
timezone: 'local',
header: {
left: '',
center: '',
right: '',
},
select: (event) => {
this.selectCalendar(event)
},
header: false,
events: null
}
}
while having a calendar in data variable, Now I can render() and destroy() it from anywhere.
But I am having an issue for handling Calendar events:
Such as
select: (event) => {
this.selectCalendar(event)
}
I have defined another method in methods: {} as selectCalendar() to call it in select but I am getting an error as
Uncaught TypeError: Cannot read property 'selectCalendar' of undefined
I want to do few operations on select, eventClick, eventDrop, eventResize, but I am unable to call a method within the config.
Also is there any way possible to define select or any method as
select: this.selectCalendar
So that it will just straight send an event to the defined method?
I have tried vue-fullcalendar but it doesn't work for my cause. Any help will be thankful.
Vue v.2.5.21
I am using vue full calendar, you can handle event of fullcalendar like code below
<full-calendar :event-sources="eventSources" #event-selected="myEventSelected"></full-calendar>
export default{
methods:{
caculateSomething(event){
//do st here
},
myEventSelected(event){
//do st here
this.caculateSomething(event)
console.log(event)
}
}
}
This is how I sorted this out.
in html <div id="calendar"></div>
in your data() => {}
calendar: null,
config: {
plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
axisFormat: 'HH',
defaultView: 'timeGridWeek',
allDaySlot: false,
slotDuration: '00:60:00',
columnFormat: 'dddd',
columnHeaderFormat: { weekday: 'short' },
defaultDate: '1970-01-01',
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
eventLimit: true,
eventOverlap: false,
eventColor: '#458CC7',
firstDay: 1,
height: 'auto',
selectHelper: true,
selectable: true,
timezone: 'UTC',
header: {
left: '',
center: '',
right: '',
},
header: false,
editable: true,
events: null
}
Don't define any select, resize or dropEvent in config for the first time, but then the part where you are going to render the calendar do something like this
if (this.calendar == null) {
console.log(this.schedule)
let calendarEl = document.getElementById('calendar');
let calendarConfig = this.config
let select = (event) => {
this.selectCalendar(event)
}
let eventClick = (event) => {
this.clickCalendar(event)
}
let eventDrop = (event) => {
this.dropCalendar(event)
}
let eventResize = (event) => {
this.resizeCalendar(event)
}
calendarConfig.select = select;
calendarConfig.eventClick = eventClick;
calendarConfig.eventDrop = eventDrop;
calendarConfig.eventResize = eventResize;
this.calendar = new Calendar(calendarEl, calendarConfig);
this.calendar.render();
this.renderEvents()
}
Now you can handle those events of FullCalendar in your own methods.
Also having the calendar in this.calendar gives you the power to destroy it from anywhere, in the methods: {}
In FullCalendar 4.0 things have been changes but quite simpler.
these are the methods attached to FullCalendar Events
selectCalendar(event) {
this.calendar.addEvent(event)
},
clickCalendar(event) {
if (window.confirm("Are you sure you want to delete this event?")) {
let findingID = null
if (event.event.id === "") {
findingID = event.el
} else {
findingID = event.event.id
}
let removeEvent = this.calendar.getEventById( findingID )
removeEvent.remove()
}
},
dropCalendar(event) {
},
resizeCalendar(event) {
},
destroyCalendar() {
if (this.calendar != null) {
this.calendar.destroy();
this.calendar = null
}
}
when an event is added by you. You can find it through el in an event, but the custom events should have a unique ID. through which you will find and delete it.
I have created Dialog in AddButtonEntryPoint.js file and I want to access that variable in Form.js file to hide the dialog after click on Submit button So, How can i call.
Here is the code which i have written
AddButtonEntryPoint.js
var w = new Form({});
var d = new Dialog({
id: 'FormDialog',
title: "Bridge Form",
style: "width: 270px; height: 270px;",
content: w,
onHide: function() {
// To prevent destroying the dialog before the animation ends
setTimeout(lang.hitch(this, 'destroyRecursive'), 0);
}
});
d.show();
};
Form.js
return declare( "mypackage.MyForm", Form, {
repotextbox: new TextBox({
name: "text",
placeHolder: "Enter text here."
} , dojo.doc.createElement('input')),
DFMtextbox: new TextBox({
name: "text",
placeHolder: "Enter text here."
} , dojo.doc.createElement('input')),
submitButton: new Button({
type: "submit",
label: "Submit"
}),
constructor: function(args) {
declare.safeMixin(this, args);
},
onSubmit: function() {
var repositoryID = this.repotextbox.get('value');
xhr("https://samples.openweathermap.org/data/2.5/weather?q={repositoryID}",{
// The URL of the request
method: "GET",
handleAs: "json",
}).then(
function(data){
alert(data.success + " " + JSON.stringify(data));
},
function(err){
alert( "Your message could not be sent, please try again.");
});
},
});
}
);
In form.js file, Under onSubmit function I have to hide the dialog created in AddButtonEntryPoint.js when the user click on Submit button.
In Form.js you have to add a property that will reference the Dialog instance
return declare( "mypackage.MyForm", Form, {
myDialog: null,
// etc
}
Then in AddButtonEntryPoint you can either set this property when you initialize w if you put it after:
var d = new Dialog({
id: 'FormDialog',
title: "Bridge Form",
style: "width: 270px; height: 270px;",
content: w,
onHide: function() {
// To prevent destroying the dialog before the animation ends
setTimeout(lang.hitch(this, 'destroyRecursive'), 0);
}
});
var w = new Form({
myDialog: d
});
or you can keep it as it is and call w.set("myDialog", d); later - but in this case any code in postCreate that requires the dialog will not run.
Hope this helps!
I'm very new to Datatables plugin and i'm using it for my small project. I have the following problem like this:
+ I want to create a table and each row have a link to pop up a modal for editing.
Currently my datatables implementation as follow:
$(document).ready(function () {
$('#dtTable').DataTable({
serverSide: false,
processing: true,
deferRender: true,
ajax: {
type: 'POST',
url: '#Url.Action("GetClasses", "CLASSes")',
dataSrc: ""
},
columns: [
{ data: 'CLASSID' },
{ data: 'CLASSCODE' },
{ data: 'CLASSNAME' },
{
orderable: false,
searchable: false,
render: function (data, type, full, meta) {
debugger;
var data = full.CLASSID;
return 'Action';
}
}
]
});
})
The problem is that when ever i click on the Action link the modal will appear and then disappear instantly, place a debugger at the render section it's seemed that this section call twice and i don't know why?
So please help me to achieve this, each row has its link to pop up a modal and when click on it.
Thanks you guys very much
jQuery DataTables plug-in indeed calls render multiple times: for data type detection, display, sorting, etc.
Use the following code to produce content for display only:
render: function (data, type, full, meta) {
if(type === 'display'){
data = 'Action';
}
return data;
}
Regarding modal dialogs, most likely there is a problem somewhere else in your code that makes the modal dialog disappear.