Here is my code :
<script type="text/javascript">
$('#calan').MdPersianDateTimePicker({
Placement: 'botto',
Trigger: 'focus',
EnableTimePicker: true,
TargetSelector: '',
GroupId: '',
ToDate: false,
FromDate: false,
});
</scrip>
How to use MdPersianDateTime to date in input.
according to PersianDateTimePicker Documents
you can use it by
`$('#id').MdPersianDateTimePicker({targetTextSelector: '#inputTextDate1',targetDateSelector: '#inputHiddenDate1',});`
just
add these files to you html:
<link href="/dist/jquery.md.bootstrap.datetimepicker.style.css" rel="stylesheet"/>
<script src="/dist/jquery.md.bootstrap.datetimepicker.js"></script>
I suggest to add scripts at the end of body tag and after jQuery library.
for Options and Functions you can refer to document
Related
I'm trying to do an initial filtering on my datatable, where the process is to filter and show data which the login user was created.
Using Jquery datatable I have initialized it like below:
$('#datatable').dataTable( {
"oSearch": {"sSearch": $('#mytext').val() }
} );
so I tried to implement it to my code :
<!-- JS files -->
<script type="text/javascript" src="static/js/datatable.min.js"></script>
<!-- Add the following if you want to use the jQuery wrapper (you still need datatable.min.js): -->
<script type="text/javascript" src="static/js/datatable.jquery.min.js"></script>
<script>
var tableFirst = $('#filetbl').datatable({
pageSize: 1000,
sort: [true, true, true, true, true, true, true, true, true, true, true, true, true],
filters: [false, false, 'input', 'select', 'select', 'select', 'select', 'select', 'select', 'select', 'select', 'select', false],
filterText: '検索',
});
$(document).ready(function() {
$("select[data-filter='10']").val(loginuser);
$('#filetbl').dataTable( {
"oSearch": {"sSearch": loginuser }
} );
});
</script>
and here is my HTML code:
<table id="filetbl" class="table table-hover table-sm">
<thead style="background-color: #666666;color:#FFF;font-weight: bold; ">
<tr>
<td>-</td>
<td>実験ID</td>
<td>実験名</td>
<td>機種</td>
<td>号機</td>
<td>フェーズ</td>
<td>紙種</td>
<td>温度</td>
<td>湿度</td>
<td>登録日</td>
<td>担当</td>
<td>バージョン</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
but on my document ready event, this error always occurred
Uncaught TypeError: $(...).dataTable is not a function
do anybody knows what's the cause of the error?
I think it usually would means I haven't include the JS extension on my code, but as you can see I've already done it.
Could anyone knows what went wrong or please share any tutorial.
I think the datatable initialization have mistake
it should be :
$('#myTable').DataTable();
I have setup FullCalendar (v3.8.0) to pull event data from Google Calendar, using qTip2 for displaying event information. This works fine.
I am now trying to display the event's location attribute. Sadly, I cannot seem to figure out how to get FullCalendar to save the information from Google Calendar in the event.
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Test">
<meta name="author" content="Test">
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' href='qtip/jquery.qtip.min.css' />
<script src='lib/jquery.min.js'></script>
<script src='qtip/jquery.qtip.min.js'></script>
<script src='lib/moment.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script type='text/javascript' src='fullcalendar/gcal.js'></script>
</head>
<body>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: '<<hidden>>',
events: {
googleCalendarId: '<<hidden>>'
},
header: {
left: 'title',
center: 'listWeek, agendaWeek, month',
right: 'prev,next'
},
weekends: false,
eventRender: function(event, element) {
element.qtip({
content: event.description,
title: event.title,
position: {
my: 'center', //Ecke des Tooltips
at: 'center', //Position auf der Seite (auch Target möchlich)
target: $(window)
},
show: 'click'
});
},
eventClick: function(event) {
if (event.url) {
return false;
}
}
});
});
</script>
<div id='calendar'></div>
</body>
I have tried to add the location attribute to EventDef.defineStandardProps, but this apperas to have no effect.
EventDef.defineStandardProps({
// not automatically assigned (`false`)
_id: false,
id: false,
className: false,
source: false,
// automatically assigned (`true`)
title: true,
url: false,
rendering: true,
constraint: true,
overlap: true,
editable: true,
startEditable: true,
durationEditable: true,
color: true,
backgroundColor: true,
borderColor: true,
textColor: true,
location: true
});
This was also discussed at "fullcalendar jQuery - Possible to retrieve description from Google Calendar events?", but the solution provided appears to be outdated and not applicable anymore.
Every other thread about this topic has either no or no conclusive answer.
Which steps can I take to be able to use the event location?
During the eventRender callback (https://fullcalendar.io/docs/event_rendering/eventRender/) you shuld be able to access event.location, assuming Google has provided you with that field in the JSON you receive. You can check the content of the event by inserting the line console.log(JSON.stringify(event)); into your eventRender code, to log the event properties available to you.
FullCalendar happily keeps custom properties on the event object, if the data source supplies them. Once you've got that data, you can insert it into the event's HTML however you please.
I don't know where in the process you were trying to add things to the event standard properties, but anyway that makes no sense - it would just pre-define an empty attribute, it doesn't cause it to be actually populated with anything.
I have been unable to implement fullcalendar into my application and cannot find any information detailing exactly how to implement it using node, express and handlebars. I've tried multiple ways of adding fullcalendar without any luck. Other web pages in my application are working and render their information so I don't know why fullcalendar won't work after following the instructions on the website.
<!-- main.handlebars -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Page level plugin CSS-->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Link and script for calendar -->
<link rel='stylesheet' href='../../node_modules/fullcalendar/dist/fullcalendar.css' />
<script src='../../node_modules/jquery/dist/jquery.min.js'></script>
<script src='../../node_modules/moment/min/moment.min.js'></script>
<script src='../../node_modules/fullcalendar/dist/fullcalendar.js'></script>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'prev, next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
timezone: "local",
defaultView: "month",
firstHour: "7",
weekMode: "liquid"
});
});
</script>
<title>Workmate</title>
</head>
<body>
{{#if user}}
{{> _appNavbar}}
{{else}}
{{> _navbar}}
{{/if}}
<div class="container">
{{> _msg}}
{{> _errors}}
{{{body}}}
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
</body>
</html>
After the main.handlebars I have the schedule.handlebars which should load the empty calendar.
<div id='calendar'></div>
I've followed the instructions on the fullcalendar website and it doesn't render the calendar on the schedule.handlebars page.
// webapp.js
//App schedules route
router.get('/schedules', ensureAuthenticated, (req, res) =>{
res.render('webapp/schedules');
});
This is all the code I have to implement the application. Any help will be greatly appreciated as this is for my final year project in college.
Thanking you all in advance.
Not sure if anyone would be interested, but after quite some time spent on trial & errors (lots of errors), I managed to make this work in conjunction with Handlebars.
First, I had to write a separate .js file (calendar.js) for the $(document).ready function:
$(document).ready(function() {
// Let's make sure that this 2 little critters get loaded, otherwise fullcalendar wont work.
$.when (
$.getScript("/s/js/moment.min.js"),
$.getScript("/s/calendar/fullcalendar.min.js"))
.done(function()
{
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,month'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listWeek',
defaultDate: '2018-03-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2018-03-01'
},
{
title: 'Long Event',
start: '2018-03-07',
end: '2018-03-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-03-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-03-16T16:00:00'
},
{
title: 'Conference',
start: '2018-03-11',
end: '2018-03-13'
},
{
title: 'Meeting',
start: '2018-03-12T10:30:00',
end: '2018-03-12T12:30:00'
},
{
title: 'Lunch',
start: '2018-03-12T12:00:00'
},
{
title: 'Meeting',
start: '2018-03-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2018-03-12T17:30:00'
},
{
title: 'Dinner',
start: '2018-03-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2018-03-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2018-03-28'
}
]
}
);
}
);
});
Then onto the Handlebars template:
<section>
<style>
#calendar {
max-width: 800px;
margin: 0 auto;
}
</style>
<div id='calendar'></div>
and finally my app.jes file looked something like this:
app.get("/", async(req, res, next) => {
try {
let projectid = '2188'
let users = await req.app.locals.db.getRate(projectid);
res.render("listview", {
title: "Calendar",
rows: users,
scripts: ["/js/views/calendar.js"]
});
} catch (ex) {
return next(ex);
}
});
There are a couple of required css files, which were linked on the master Handlebars template.
I'm sure this isn't the best way to integrate it, as I'm really new to NodeJS and overall Javascript, but after a long weekend trying to figure this out, seeing the calendar render was refreshing.
Hope this helps anyone.
cheers!
I can see two potential issues. You are including some local scripts like that:
<!-- Link and script for calendar -->
<link rel='stylesheet' href='../../node_modules/fullcalendar/dist/fullcalendar.css' />
<script src='../../node_modules/jquery/dist/jquery.min.js'></script>
<script src='../../node_modules/moment/min/moment.min.js'></script>
<script src='../../node_modules/fullcalendar/dist/fullcalendar.js'></script>
Do you expose the node_modules directory through express in order to be able to serve those files? Have a look here:
https://expressjs.com/en/starter/static-files.html
It is not good practice though to expose the node_modules directory though, it is better if you have a building step of your application that will copy over all your libraries into a dedicated dist directory and ideally will minify and uglify them as well.
The second thing that can be problematic is the place that you include your script. It is good practice to move all the js imports inside the body just before the body closing tag (). You already defined some there. The document ready function will run but the div with the id calendar will not be there. More details here: Where should I put <script> tags in HTML markup?
Update 1
You need to be able to server the files in the node_modules (it is not a good practice though) like that:
app.use('/modules', express.static(path.join(__dirname, 'node_modules')))
And then include your script paths like that:
<link rel='stylesheet' href='/modules/fullcalendar/dist/fullcalendar.css' />
<script src='/modules/jquery/dist/jquery.min.js'></script>
<script src='/modules/moment/min/moment.min.js'></script>
<script src='/modules/fullcalendar/dist/fullcalendar.js'></script>
I am using CodeMirror to display XML in XML mode, but the code is not being automatically indented.
I checked and the XML mode does implement indent(state, textAfter, fullLine), which handles the indenting, so it should be working.
This is how I am initializing CodeMirror:
CodeMirror.fromTextArea(document.getElementById("test"), {
mode: 'application/xml',
theme: 'eclipse',
lineNumbers: true,
lineWrapping: true,
readOnly: true,
cursorBlinkRate: -1
});
Check this jsFiddle link for a live version: https://jsfiddle.net/zrosfz7x.
Any ideas?
In order to provide a solution I have added an external beautifier for xml.
Here's a complete working example.
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet href="//codemirror.net/lib/codemirror.css">
<script src=//codemirror.net/lib/codemirror.js></script>
<script src=//codemirror.net/mode/xml/xml.js></script>
<script src="//cdn.rawgit.com/vkiryukhin/vkBeautify/master/vkbeautify.js"></script>
</head>
<body>
<textarea id="test"><?xml version="1.0" encoding="UTF-8" ?><note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note></textarea>
<script>
document.getElementById("test").value = vkbeautify.xml(document.getElementById("test").value);
CodeMirror.fromTextArea(document.getElementById("test"), {
mode: 'application/xml',
// theme: 'eclipse',
lineNumbers: true,
lineWrapping: true,
readOnly: true,
cursorBlinkRate: -1
});
</script>
</body>
</html>
also here the updated jsFiddle: http://jsfiddle.net/zrosfz7x/3/
I use NestedSortableWidget. I use this scripts:
<script type="text/javascript" src="../../Scripts/jquery-1.js"></script>
<script type="text/javascript" src="../../Scripts/interface-1.js"></script>
<script type="text/javascript" src="../../Scripts/inestedsortable.js"></script>
and
<script type="text/javascript">
jQuery(function($) {
$('#spans-divs-regular').Sortable(
{
accept: 'page-item4',
opacity: 0.8,
helperclass: 'helper',
onChange: function(serialized) {
$('#left-to-right-ser').html("sds:" + serialized[0].hash);
}
}
);
});
</script>
I doesn't need nested items but sortable. I only need to send postback to save items' state. So when I use $('#spans-divs-regular').Sortable onchange doesn't work. But if use $('#spans-divs-regular').NestedSortable onchange works only when I change nesting elements.
Here is my simple html page: source_html. I need your help.
Solution
I solved this problem a long time ago. So I don't remember the solution very well.
But I found my final script:
<script type="text/javascript">
jQuery(function($) {
$('#spans-divs-regular').Sortable(
{
accept: 'page-item4',
opacity: 0.8,
helperclass: 'helper',
onChange: function(serialized) {
$.post('/Persons/PersonViewOrderList?sort', serialized[0].hash + '');
},
autoScroll: true,
handle: '.sort-handle',
fx:300,
revert: true
})
});
</script>