Raj
Reputation: 221
jquery datatable provide a date function in form of milliseconds
to all I have written the code for updating the task ownerid by the lookup field owner selection the tasks are shown by the given datepicker value under the query in controller.Now I struggle here my code is update the ownerid perfectly but the activtitydate column in the jquery datatable column is provide the date in millisecond format so I want how to change this into mm/dd/yyyy format.
my controller:
//Remote function using updated the owner of the task
public class TaskOwnerUpdate {
public String dueDate { get; set; }
public Set<Id> selectedTaskIdSet {get; set;}
String ownerIdValue {get; set;}
String selectedColumnValue {get; set;}
public static List<Task> taskList { get; set;}
public TaskOwnerUpdate() { } // empty constructor
public List<Task>selectedtaskList {get; set;}
public Task getOwnerIdTask() {
return [SELECT OwnerId FROM TASK LIMIT 1];
}
@RemoteAction
public static List<Task> getTask (String dueDate) {
system.debug('dueDate value is------>'+dueDate);
List<String> stList = dueDate.split('"');
system.debug('stList value---->'+stList);
List<String>s1 = stList[0].split(',');
system.debug('stList[0] value is---->'+stList[0]);
system.debug('stList[1] value is---->'+stList[1]);
List<String> splitList = stList[1].split('/');
system.debug('splitList value is---->'+splitList);
String dueDate1 = splitList[2]+'-'+splitList[0]+'-'+splitList[1];
taskList = [SELECT Id, Subject, Priority, Status, ActivityDate, Owner.Name, OwnerId
FROM Task WHERE ActivityDate >= :Date.valueOf(dueDate1)];
system.debug('taskList- value is------>'+taskList);
return taskList;
}
@RemoteAction
public static List<Task> updateTask(String ownerIdValue, String selectedColumnValue ) {
system.debug('OwnerId value is----->'+ownerIdValue);
system.debug('selectedColumnValue value is---->'+selectedColumnValue);
List<Task> updatedTaskList = new List<Task>();
Set<Id> idSet = new Set<Id>();
List<String> deserializeStringList = (List<String>)System.JSON.deserialize(selectedColumnValue, List<String>.class);
system.debug('deserializeStringList value>>>>'+deserializeStringList);
for (String strRecord : deserializeStringList) {
Task taskRecord = new Task();
taskRecord.Id = Id.valueOf(strRecord);
taskRecord.OwnerId = Id.valueOf(ownerIdValue);
updatedTaskList.add(taskRecord);
}
if (updatedTaskList.size() > 0) {
Update updatedTaskList;
}
return updatedTaskList;
}
}
and my page:
<apex:page controller="TaskOwnerUpdate">
<apex:form >
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"/>
<apex:includeScript value="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"/>
<apex:sectionHeader title="Task Ownership Update"/>
<apex:pageBlock title="Tasks">
<!---- Section to draw search field for account------->
<apex:pageBlockSection title="Search Tasks" columns="2">
<apex:pageBlockSectionItem >
<apex:inputText value="{!dueDate}" size="10" id="demo" onfocus="DatePicker.pickDate(false, this , false)">dueDate</apex:inputText>
<apex:inputField value="{!OwnerIdTask.OwnerId}" id="owner"></apex:inputField>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockSection >
<button onclick="getTask();return false;">Get Task</button>
<button id="button">Update</button>
</apex:pageBlockSection>
<apex:actionFunction name="callaction" oncomplete="getTask()" reRender="output"/>
<!-- result section for showing matching accounts ------->
<apex:outputPanel id="output">
<apex:pageBlockSection title="Matching Tasks !" columns="1">
<!--
Created Empty table using the CSS styles of visualforce pageBlockTable
This gives same look and feel ------>
<table cellspacing="0" cellpadding="0" border="0" id="searchResults" class="list ">
<colgroup span="2"></colgroup>
<thead class="rich-table-thead">
<tr class="headerRow ">
<th colspan="1" scope="col" class="headerRow">Select</th>
<!--<th colspan="1" scope="col" class="headerRow">Id</th>---->
<th colspan="1" scope="col" class="headerRow">Subject</th>
<th colspan="1" scope="col" class="headerRow">Priority</th>
<th colspan="1" scope="col" class="headerRow">Status</th>
<th colspan="1" scope="col" class="headerRow">ActivityDate</th>
<th colspan="1" scope="col" class="headerRow">OwnerName</th>
</tr>
</thead>
<!-- table body left empty for populating via row template using jquery------->
<tbody />
</table>
</apex:pageBlockSection>
</apex:outputPanel>
<script id="resultTableRowTemplate" type="text/x-jquery-tmpl">
<tr onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}" onmouseout="if (window.hiOff){hiOff(this);} " onmouseover="if (window.hiOn){hiOn(this);} " class="dataRow even first">
<td class="datacel">${Select}<input type = "checkbox" id="${Id}"/></td>
<!---<td class="Idvalue">${Id}</td>------>
<td class="datacell">${Subject}</td>
<td class="dataCell">${Priority}</td>
<td class="dataCell">${Status}</td>
<td class="datecell">${ActivityDate}</td>
<td class="datacell">${Owner.Name}</td>
</tr>
</script>
</apex:pageBlock>
<script type="text/javascript">
// if you are inside some component
// use jquery nonConflict
// var t$ = jQuery.noConflict();
console.log("check call correct");
//var dt = Date.new Instance(document.getElementById('datecell'));
//console.log('dt value', dt);
function getTask() {
var dueDate = $('[id$=":demo"]').val();//$('#demo').val();
console.log("check data",dueDate);
// clear previous results, if any
$("#searchResults tbody").html('');
// The Spring-11 gift from force.com. Javascript remoting fires here
// Please note "abhinav" if my org wide namespace prefix
// testremotingcontroller is the Apex controller
// searchAccounts is Apex Controller method demarcated with @RemoteAction annotation.
// DEPRECATED - abhinav.testremotingcontroller.searchAccounts( accountName, ...)
// NEW - summer'12 approach for calling'
dueDate = JSON.stringify(dueDate);
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.TaskOwnerUpdate.getTask}',
dueDate, function(result, event){
console.log("due date",dueDate);
if (event.status && event.result) {
$.each(event.result, function () {
// for each result, apply it to template and append generated markup
// to the results table body.
$("#resultTableRowTemplate" ).tmpl(this).appendTo( "#searchResults tbody" );
}
);
} else {
alert(event.message);
}
}, {escape:true});
}
</script>
<script type="text/javascript">
console.log("check update correct");
$(function () {
$('.datacel').click(function() {
var allData = $(this).parent().parent().first().text();
console.log("allData value is>>>>",allData);
//alert(allData);
});
$('input:not(#button)').click(function () {
t = $(this).attr('id');
text = $('.time' + t).text();
//alert(text);
});
$('#button').click(function (e) {
e.preventDefault();
var trs = $('table tr');
var values = trs.first().find('td');
// var idr = $('#Idvalue').val();
// console.log("idr value",idr);
var values1 = $('table tr td :checkbox:checked').map(function () {
console.log('\nId::::',$(this).attr('id'));
return $(this).attr('id');
/*return $(this).closest('tr').find('td').text() + "=="
+ values.eq($(this).parent().index()).text();
console.log("id val",$(this).parent().find('td').eq(1).text());
return $(this).closest('td').find('td').eq(1).text()+
values.eq($(this).parent().intex()).text();*/
}).get();
console.log("values1",values1);
getUpdate(values1);
console.log("after passing vales1", values1);
console.log("values1",values1);
return values1;
});
//alert(values1);
//console.log("values1",values1);
//return values1;
//getUpdate(values1);
});
function getUpdate(values1) {
var taskRecord = JSON.stringify(values1);
console.log("data type taskRecord",typeof(taskRecord));
console.log("task record value is>>>",taskRecord);
var ownerIdValue = $('[id$="owner_lkid"]').val();
console.log("data type ownerIdValue",typeof(ownerIdValue));
//var ownerIdValue = document.getElementById('{!$Component.owner}').value;
console.log("ownerId value is >>>>",ownerIdValue);
console.log("values1 >>>>",values1);
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.TaskOwnerUpdate.updateTask}',
ownerIdValue, taskRecord, function(result, event){
if (event.status) {
callaction();
} else {
}
}, {escape:true});
}
</script>
</apex:form>
</apex:page>for any response appriciate it!!!
Upvotes: 0
Views: 365
Answers (2)
Raj
Reputation: 221
To all this code works perfect to my requirement feel free to use/refer it. controller:
//Remote function using updated the owner of the task
public class TaskOwnerUpdate {
public String dueDate { get; set; }
public Set<Id> selectedTaskIdSet {get; set;}
String ownerIdValue {get; set;}
String selectedColumnValue {get; set;}
public static List<Task> taskList { get; set;}
public TaskOwnerUpdate() { } // empty constructor
public List<Task>selectedtaskList {get; set;}
public Task getOwnerIdTask() {
return [SELECT OwnerId FROM TASK LIMIT 1];
}
@RemoteAction
public static List<Task> getTask (String dueDate) {
system.debug('dueDate value is------>'+dueDate);
List<String> stList = dueDate.split('"');
system.debug('stList value---->'+stList);
List<String>s1 = stList[0].split(',');
system.debug('stList[0] value is---->'+stList[0]);
system.debug('stList[1] value is---->'+stList[1]);
List<String> splitList = stList[1].split('/');
system.debug('splitList value is---->'+splitList);
String dueDate1 = splitList[2]+'-'+splitList[0]+'-'+splitList[1];
taskList = [SELECT Id, Subject, Priority, Status, ActivityDate, Owner.Name, OwnerId
FROM Task WHERE ActivityDate >= :Date.valueOf(dueDate1)];
system.debug('taskList- value is------>'+taskList);
return taskList;
}
@RemoteAction
public static List<Task> updateTask(String ownerIdValue, String selectedColumnValue ) {
system.debug('OwnerId value is----->'+ownerIdValue);
system.debug('selectedColumnValue value is---->'+selectedColumnValue);
List<Task> updatedTaskList = new List<Task>();
Set<Id> idSet = new Set<Id>();
List<String> deserializeStringList = (List<String>)System.JSON.deserialize(selectedColumnValue, List<String>.class);
system.debug('deserializeStringList value>>>>'+deserializeStringList);
for (String strRecord : deserializeStringList) {
Task taskRecord = new Task();
taskRecord.Id = Id.valueOf(strRecord);
taskRecord.OwnerId = Id.valueOf(ownerIdValue);
updatedTaskList.add(taskRecord);
}
if (updatedTaskList.size() > 0) {
Update updatedTaskList;
}
return updatedTaskList;
}
}
page:
<apex:page controller="TaskOwnerUpdate" applyHtmlTag="true">
<apex:form >
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"/>
<apex:includeScript value="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"/>
<apex:sectionHeader title="Task Ownership Update"/>
<apex:pageBlock title="Tasks">
<!---- Section to draw search field for account------->
<apex:pageBlockSection title="Search Tasks" columns="2">
<!----<apex:pageBlockSectionItem >----->
<apex:inputText value="{!dueDate}" size="10" id="demo" onfocus="DatePicker.pickDate(false, this , false)" label="DueDate"></apex:inputText>
<apex:inputField value="{!OwnerIdTask.OwnerId}" id="owner" label="Owner"></apex:inputField>
<!----</apex:pageBlockSectionItem>------>
</apex:pageBlockSection>
<center>
<button onclick="getTask();return false;">Get Task</button>
<button id="button">Update</button>
</center>
<apex:actionFunction name="callaction" oncomplete="getTask()" reRender="output"/>
<!-- result section for showing matching accounts ------->
<apex:outputPanel id="output">
<apex:pageBlockSection title="Matching Tasks !" columns="1">
<!--
Created Empty table using the CSS styles of visualforce pageBlockTable
This gives same look and feel ------>
<table cellspacing="0" cellpadding="0" border="0" id="searchResults" class="list ">
<colgroup span="2"></colgroup>
<thead class="rich-table-thead">
<tr class="headerRow ">
<th colspan="1" scope="col" class="headerRow"><input type="checkbox" id="chkbx1" class="chek1"/></th>
<!--<th colspan="1" scope="col" class="headerRow">Id</th>---->
<th colspan="1" scope="col" class="headerRow">Subject</th>
<th colspan="1" scope="col" class="headerRow">Priority</th>
<th colspan="1" scope="col" class="headerRow">Status</th>
<th colspan="1" scope="col" class="headerRow">ActivityDate</th>
<th colspan="1" scope="col" class="headerRow">OwnerName</th>
</tr>
</thead>
<!-- table body left empty for populating via row template using jquery------->
<tbody />
</table>
</apex:pageBlockSection>
</apex:outputPanel>
<script id="resultTableRowTemplate" type="text/x-jquery-tmpl">
<tr onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}" onmouseout="if (window.hiOff){hiOff(this);} " onmouseover="if (window.hiOn){hiOn(this);} " class="dataRow even first">
<td class="datacel"><input type = "checkbox" id="${Id}" class="chek2"/></td>
<!---<td class="Idvalue">${Id}</td>------>
<td class="datacell">${Subject}</td>
<td class="dataCell">${Priority}</td>
<td class="dataCell">${Status}</td>
<td class="date">${ActivityDate}</td>
<td class="datacell">${Owner.Name}</td>
</tr>
</script>
</apex:pageBlock>
<script type="text/javascript">
$(document).ready( function() {
console.log('check box select');
select();
$('.chek2').live('click', function() {
console.log('click function');
if ( $('.chek2').length == $('.chek2:checked').length ) {
$('.chek1').attr('checked', true);
}
else {
$('.chek1').attr('checked', false);
}
});
});
//select is followingly
function select() {
var checkboxes = $("input[type='checkbox']");
console.log(checkboxes);
$("[id*='chkbx1']").change(function() {
console.log('click::::');
if($(this).attr('checked') == true) {
$("input[type='checkbox']").attr('checked', true);
} else {
$("input[type='checkbox']").attr('checked', false);
}
});
console.log('click function is here');
}
</script>
<script type="text/javascript">
//var ms = valueof(${ActivityDate});
//console.log('ms', document.getElementById('date'));
function myFunction(ms) {
console.log('ms', ms);
var dtnum = new Date(ms);
var dat = (dtnum).getDate();
var dtmon = (dtnum).getMonth()+1;
if (dtmon < 10) {
dtmon = '0'+dtmon;
}
var dtyear = (dtnum).getFullYear();
var fulldate = dtmon + '/'+dat + '/' + dtyear;
console.log('fulldate is::::', fulldate);
//console.log($("#date").val());
//$("#date").val() = fulldate;
return fulldate;
}
</script>
<script type="text/javascript">
// if you are inside some component
// use jquery nonConflict
// var t$ = jQuery.noConflict();
console.log("check call correct");
//var dt = Date.new Instance(document.getElementById('datecell'));
//console.log('dt value', dt);
function getTask() {
var dueDate = $('[id$=":demo"]').val();//$('#demo').val();
console.log("check data",dueDate);
//console.log('ms', document.getElementById('date'));
// clear previous results, if any
$("#searchResults tbody").html('');
// The Spring-11 gift from force.com. Javascript remoting fires here
// Please note "abhinav" if my org wide namespace prefix
// testremotingcontroller is the Apex controller
// searchAccounts is Apex Controller method demarcated with @RemoteAction annotation.
// DEPRECATED - abhinav.testremotingcontroller.searchAccounts( accountName, ...)
// NEW - summer'12 approach for calling'
dueDate = JSON.stringify(dueDate);
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.TaskOwnerUpdate.getTask}',
dueDate, function(result, event){
console.log("due date",dueDate);
if (event.status && event.result) {
console.log("::::::::check::::::::",event.result);
$.each(event.result, function( index, value ) {
event.result[index].ActivityDate = myFunction(value.ActivityDate);
console.log('event.result[index].ActivityDate',event.result[index].ActivityDate);
$("#resultTableRowTemplate" ).tmpl(this).appendTo( "#searchResults tbody" );
});
} else {
alert(event.message);
}
}, {escape:true});
}
</script>
<script type="text/javascript">
console.log("check update correct");
$(function () {
$('.datacel').click(function() {
var allData = $(this).parent().parent().first().text();
console.log("allData value is>>>>",allData);
//alert(allData);
});
$('input:not(#button)').click(function () {
t = $(this).attr('id');
text = $('.time' + t).text();
//alert(text);
});
$('#button').click(function (e) {
e.preventDefault();
var trs = $('table tr');
var values = trs.first().find('td');
// var idr = $('#Idvalue').val();
// console.log("idr value",idr);
var values1 = $('table tr td :checkbox:checked').map(function () {
console.log('values1 is following',values1);
console.log('\nId::::',$(this).attr('id'));
if ($(this).attr('id') != "chkbx1") {
return $(this).attr('id');
}
}).get();
console.log("values1",values1);
getUpdate(values1);
console.log("after passing vales1", values1);
console.log("values1",values1);
return values1;
});
//alert(values1);
//console.log("values1",values1);
//return values1;
//getUpdate(values1);
});
function getUpdate(values1) {
var taskRecord = JSON.stringify(values1);
console.log("data type taskRecord",typeof(taskRecord));
console.log("task record value is>>>",taskRecord);
var ownerIdValue = $('[id$="owner_lkid"]').val();
console.log("data type ownerIdValue",typeof(ownerIdValue));
//var ownerIdValue = document.getElementById('{!$Component.owner}').value;
console.log("ownerId value is >>>>",ownerIdValue);
console.log("values1 >>>>",values1);
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.TaskOwnerUpdate.updateTask}',
ownerIdValue, taskRecord, function(result, event) {
if (event.status) {
callaction();
} else {
}
}, {escape:true});
}
</script>
</apex:form>
</apex:page>
thanks, Raj
Upvotes: 0
Alex Mann
Reputation: 21
The library Moment.js is perfect for this. It lets you manipulate data as time data, and lets you format it in a number of different ways.
Using it, if you were to add an identifier to the element in question:
<td id="activityDateCell" class="datecell"></td>then you could run this javascript:
<script type="text/javascript">
var activityDate = "${activityDate}";
activityDate = moment(activityDate).format("MM/DD/YYYY");
$("#activityDateCell").append(activityDate);
</script>Upvotes: 1
Related Questions
- Change date format in js for jquery datatable
- How to format date displayed in Datatable
- how to format date in jQuery DataTables
- How do I format datetime column in jQuery Datable(server side)
- format date as dd/mm/yyyy in datatable column in Javascript/Jquery
- convert a datatable column date format
- jquery datatable render function for date
- Format Date inside jQuery datatable
- How to Compute time via DataTable footer
- plugin DataTables jquery : how display formated Date?