@Rintu Mondal: JQuery

Showing posts with label JQuery. Show all posts

Tuesday, 6 June 2017

Date Picker Control JavaScript + SharePoint + Page



First you have to download the JS files and modify & upload in SharePoint Asset Library:-


Download CSS File:-
http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css


Download JQuery File:- 
http://code.jquery.com/jquery-1.8.3.js
http://code.jquery.com/ui/1.10.0/jquery-ui.js


Go to any SharePoint page - Edit the page - Add Content Editor web part -  Paste below code.


Note- Before paste the below code just the CSS and JQuery


<html lang="en">


<head>


<style>


div.ui-datepicker{


font-size:11px;


}


</style>


<title>jQuery UI Datepicker - Default functionality</title>


<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />


<script src="http://code.jquery.com/jquery-1.8.3.js"/>


<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"/>


<script>


$(function() {


$( "#fromdatepicker" ).datepicker();


$( "#todatepicker" ).datepicker();


});


$(function() {


$("#btnFilter").click(function() {


var startDate = $("#fromdatepicker").datepicker("getDate");


startDate  =  startDate.getFullYear()+"-"+(startDate.getMonth()+1)+"-"+startDate.getDate(); 


var endDate = $("#todatepicker").datepicker("getDate");


endDate  =  endDate.getFullYear()+"-"+(endDate.getMonth()+1)+"-"+endDate.getDate(); 


alert(startDate +"-"+ endDate);


});


});


</script>


<body>


From Date: <input id="fromdatepicker" style="font-size: 11px;" type="text" />


To Date: <input id="todatepicker" style="font-size: 11px;" type="text" /> 


<input id="btnFilter" type="button" value="Generate Report" />


</body>


</html>

Output:-

Wednesday, 12 February 2014

Table bind with DataTable using JQuery (JQuery.dataTables.css and JQuery.dataTables.js)

<html>

<head>

  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

</head>

<body>

  <table id="example">

    <thead>

      <tr><th>Sites</th></tr>

    </thead>

    <tbody>

      <tr><td>SitePoint</td></tr>

      <tr><td>Learnable</td></tr>

      <tr><td>Flippa</td></tr>

    </tbody>

  </table>

  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

  <script>

  $(function(){

    $("#example").dataTable();

  })

  </script>

</body>

</html>

Tuesday, 14 January 2014

Dynamic Add Image inside Radio Buttons Using JQuery

<!DOCTYPE html<
<html<
<head<
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"<
</script<
<script<
$(document).ready(function(){

$("#button").click(function(){
var curAns="Radio 1";
var curVal=$('.optionAnswer:checked').val();

if(curAns == curVal)
{
$('.optionAnswer:checked').parent().append('<img width=25 height=25 src="" alt="correct"/<');
}
else
{
$('.optionAnswer:checked').parent().append('<img width=25 height=25 src="" alt="worng"/<');
$('.optionAnswer').each(function(index){
if($(this).val()== curAns)
$(this).parent().append('<img width=25 height=25 src="" alt="correct"/<');
});

}
});
});
</script<
</head<
<body<
<div id="optionAns")<
   <span< <input type="radio" name="optionGroup" value="Radio 1" class="optionAnswer"<Radio 1</input<</span<</br<
   <span< <input type="radio" name="optionGroup" value="Radio 2" class="optionAnswer"<Radio 2</input<</span<</br<
   <span< <input type="radio" name="optionGroup" value="Radio 3" class="optionAnswer"<Radio 3</input<</span<</br<
</div<
<input type="button" id="button" name="button" value="submit" /<

</body<

</html<

Pages