I'm writing a webpage where there is a table created with data from database. And here I'm using Ajax.
And below is my code.
index.jsp
<html>
<head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<marquee>
<h1>This is an example of ajax</h1>
</marquee>
<p>
Date: <input type="text" id="startDatePicker">
</p>
<p>
Date: <input type="text" id="endDatePicker">
</p>
<form name="vinform">
Enter id:<input type="button" id="vutton" value="Click Me">
</form>
<span id="tableDiv"> <span id="err">Select Correct Dates</span>
</span>
<script type="text/javascript" src="table.js"></script>
</body>
</html>
table.js
var startDate = $("#startDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
var endDate = $("#endDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
$('#vutton').click(function() {
$.getJSON('ControllerServlet', {
'startDate' : startDate.val(),
'endDate' : endDate.val()
}, function(searchList) {
var $table = $('<table>').appendTo($('#tabDiv'));
$.each(searchList, function(index, result) {
$('#err').hide();
$('<tr>').appendTo($table).append(
$('<td>').text(result.caseNumber)).append(
$('<td>').text(result.caseOwner)).append(
$('<td>').text(result.status)).append(
$('<td>').text(result.issue)).append(
$('<td>').text(result.reason)).append(
$('<td>').text(result.age));
});
});
});
Here each time i click on the button the table data gets appended instead of displaying only current result. I think this is due to the append in my javascript, Here I want to know how can i display table only, on each click of button based on the parameters, i want a new table to be displayed instead of getting appended to the existing one.
Please tell me how can i do this.
Thanks
Maybe you need to remove all content before add the new table:
var startDate = $("#startDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
var endDate = $("#endDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
$('#vutton').click(function() {
$.getJSON('ControllerServlet', {
'startDate' : startDate.val(),
'endDate' : endDate.val()
}, function(searchList) {
$('#tabDiv').html(""); //here's the trick
var $table = $('<table>').appendTo($('#tabDiv'));
$.each(searchList, function(index, result) {
$('#err').hide();
$('<tr>').appendTo($table).append(
$('<td>').text(result.caseNumber)).append(
$('<td>').text(result.caseOwner)).append(
$('<td>').text(result.status)).append(
$('<td>').text(result.issue)).append(
$('<td>').text(result.reason)).append(
$('<td>').text(result.age));
});
});
});
But with this information I can't help you more.
Perhaps this would help if you don't want the err span to be removed
var startDate = $("#startDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
var endDate = $("#endDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
$('#vutton').click(function() {
$.getJSON('ControllerServlet', {
'startDate' : startDate.val(),
'endDate' : endDate.val()
}, function(searchList) {
$('#tabDiv > table').remove(); // here's the trick
var $table = $('<table>').appendTo($('#tabDiv'));
$.each(searchList, function(index, result) {
$('#err').hide();
$('<tr>').appendTo($table).append(
$('<td>').text(result.caseNumber)).append(
$('<td>').text(result.caseOwner)).append(
$('<td>').text(result.status)).append(
$('<td>').text(result.issue)).append(
$('<td>').text(result.reason)).append(
$('<td>').text(result.age));
});
});
});
Related
With this code, I able to get selected date as unix.
jsfiddle
function getValue() {
var date = $('#example').data("DateTimePicker").date();
if( date ){
alert(date.unix());
}
}
How about PersianDate, I want to get selected date as unix.
jsfiddle
You can do it by using getState method on persianDatepicker instance, like this:
var pd = $('#example').persianDatepicker({
autoClose: true,
// other options
});
function showUnix() {
const state = pd.getState();
alert(state.selected.unixDate);
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://babakhani.github.io/PersianWebToolkit/doc/lib/persian-date/dist/persian-date.js"></script>
<script src="https://babakhani.github.io/PersianWebToolkit/doc/lib/persian-datepicker/dist/js/persian-datepicker.js"></script>
<link href="https://unpkg.com/persian-datepicker#latest/dist/css/persian-datepicker.min.css" rel="stylesheet" />
<input type="text" id="example" class="initial-value-type-example inline-example leapyear-algorithmic">
<button onclick="showUnix()">show unix</button>
I am quite new to WebApp/HTML/JS and would like to make a basic tool where a user can enter two dates and times, and the tool will tell them the difference (so for example difference= 220 hours 40 minutes).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date and Time Pickers</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<style>
body {font-family: helvetica;}
</style>
</head>
<body>
<div>
<script>
// still need to figure out how to do this
// $(document).ready(function() { //maybe don't need this
function calculateTime() {
//create date format
var valuestart = $("select[name='timePicker1']"1).val();
var valuestop = $("select[name='timePicker1']"1).val();
//create date format
var timeStart = new Date($("select[name='datePicker1']"1).val() + valuestart);
var timeEnd = new Date($("select[name='datePicker2']"1).val() + valuestart);
var difference = timeEnd - timeStart;
var diff_result = new Date(difference);
var hourDiff = diff_result.getHours();
$("p").html("<b>Hour Difference:</b> " + hourDiff )
}
$("select").change(calculateTime);
calculateTime();
});
</script>
</div>
<div>
<p>Einweisungsdatum</p>
<!---datepicker first date--->
<input id="datePicker1">
<script>
$(document).ready(function(){
$('#datePicker1').kendoDatePicker({
start: 'decade',
depth: 'year'
});
});
</script>
<input id="timePicker1">
<!---timepicker first date--->
<script>
$(document).ready(function(){
$('#timePicker1').kendoTimePicker();
});
</script>
</div>
<div>
<p>Reinigungsdatum</p>
<!---datepicker first date--->
<input id="datePicker2">
<script>
$(document).ready(function(){
$('#datePicker2').kendoDatePicker({
start: 'decade',
depth: 'year'
});
});
</script>
<input id="timePicker2">
<!---timepicker first date--->
<script>
$(document).ready(function(){
$('#timePicker2').kendoTimePicker();
});
</script>
</div>
<p>start</p>
<div>
<p>end</p>
</div>
</body>
</html>
The UI looks good, but somehow the calculation won't work. I thought that datePicker and timePicker would give me date objects, which I could use for a simple calculation. Is this not the case ?
Thanks for the help!
i want to parse this value, but i got error
i want to get URL like this :
http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/2019-01-08/dan/17
but i tried and got like this :
http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/[object%20HTMLLabelElement]/dan/17
i tried with this code :
// var label = $(this).attr("data");
// var label = document.getElementById("data").value = ""+data;
this is my blade view :
<html>
<head><title></title></head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/gijgo#1.9.11/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.11/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<body>
<ul></ul>
<label id="data" name="data" style="display: none;"></label>
<input type="text" id="datepicker" name="datepicker" value="Date"/> <br>
<script>
$('#datepicker').datepicker({
format : 'yyyy-mm-dd'
});
</script>
<button>test</button>
<script src="js/test.js" type="text/javascript"></script>
</body>
</html>
this is my js :
$("button").click( function() {
// var label = $(this).attr("data");
// var label = document.getElementById("data").value = ""+data;
var test = data;
var label = JSON.stringify(test);
//i want get url like this
//http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/2019-01-08/dan/17
$.getJSON( "http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/"+label+"/dan/17", function(obj) {
$.each(obj, function(key, value) {
$("ul").append(value.hariPraktek);
});
});
});
someone can help me? :(
very thanks if someone want to help me :)
What you actually want is the datepicker value using var label = $('#datepicker').datepicker('getDate');
I am trying to dynamically disable date (jquery datepicker) which is already in database. I have done static method in that I am able to achieve goal but not getting success in dynamic approach
<script language="javascript">
$(document).ready(function () {
var getfromdb = #Html.Raw(#ViewBag.bookdate);
var result = '\'' + getfromdb.toString().split(',').join('\',\'') + '\'';
var disableddates = [result];
var newdisableddates = ['17/10/2017','18/10/2017','19/10/2017','22/10/2017','23/10/2017','24/10/2017','25/10/2017']; // Static Approach
$("#txtFromdate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
$("#txtTodate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [disableddates.indexOf(string) == -1];
}
});
And here is my controller code:
List<string> getbookdate = new List<string>();
getbookdate = BookDate(id);
ViewBag.bookdate = JsonConvert.SerializeObject(getbookdate.ToList());
public List<string> BookDate(int? id)
{
DateTime dt = System.DateTime.Now.Date;
var getbookdate = (from x in entity.BookingMasters
join
y in entity.BookingDetails on x.BookingId equals y.BookingId
where x.ProductId == id && y.FromDate > dt && y.ToDate > dt
select new BookingModel { ProductId = x.ProductId.Value, FromDate = y.FromDate.Value, ToDate = y.ToDate.Value }).ToList();
List<string> allDates = new List<string>();
foreach (var r in getbookdate)
{
for (DateTime date = r.FromDate; date <= r.ToDate; date = date.AddDays(1))
{
allDates.Add(Convert.ToString(date.ToShortDateString()));
}
}
return allDates;
}
Disable doesn't work well with date picker. Try my plnkr.
https://embed.plnkr.co/h4RaeIKJVfj9IjyHREqZ/
It gets the datepicker on click and parses through the dates and data set given and if a match is found it removes the click event on it. and repeats on each render please see my plnkr link for html. Hope it helps
<!--Disable doesn't work well with date picker. Try this. Hope it helps-->
<!--Working example https://embed.plnkr.co/h4RaeIKJVfj9IjyHREqZ/ -->
<!--Code-->
<!--HTML PART-->
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="tether#*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link data-require="jqueryui#*" data-semver="1.12.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script data-require="jqueryui#*" data-semver="1.12.1" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
</head>
<body class="container">
<h1>Hello User</h1>
<div class="box">
<div class="box-content">
<div class="row">
<div class="col-md-4">
<label>Date:</label>
<input type="text" id="date-picker-control" />
</div>
</div>
</div>
</div>
<script>
var element = $('#date-picker-control');
element.datepicker();
element.off('click').on('click', function() {
// Setup DatePicker
console.log('Update Date Picker');
// If user changes month or year, update date picker
// based on the date list you have
$("#ui-datepicker-div")
.find("div.ui-datepicker-header")
.find('a.ui-datepicker-next, a.ui-datepicker-prev')
.on('click', function() {
element.click();
});
// Get all available dates in current displayed dates
var availableDates = $("#ui-datepicker-div")
.find("table.ui-datepicker-calendar")
.find('td[data-handler="selectDay"]');
availableDates.filter(function(i) {
var targetDateElement = $(this);
//Get date parts
var year = +targetDateElement.data("year");
var month = targetDateElement.data("month") + 1; //JS fix
var day = +targetDateElement.find('a.ui-state-default').text();
var builtDate = month + '/' + day + '/' + year;
// you can substitute your json data
var targetDates = [
"10/2/2017", "10/6/2017", "10/8/2017"
];
$.each(targetDates, function(i, targetDate) {
// If builtDate match targetdate then turn click event oFF on that date
if (targetDate == builtDate) {
targetDateElement.css({
'border': '1px solid gray',
'background': 'darkgray',
'font-weight': 'bold',
'color': 'gray'
}).off('click');
}
});
});
});
</script>
</body>
</html>
Your original idea is in the right direction, but I think there's probably something weird going on with all the string conversion. I'd just pass through dates and compare with dates rather than all the stringy stuff:
I've written this quick test...
controller:
//Replace with however you get dates
ViewBag.DatesList = new List<DateTime>()
{
new DateTime(2018, 01, 01),
new DateTime(2018, 01, 02),
new DateTime(2018, 01, 03)
};
return View();
View:
<script language="javascript">
$(document).ready(function () {
var disableddates = [];
#foreach (DateTime date in ViewBag.DatesList)
{
//note JS month is zero-based for no good reason at all...
#:disableddates.push(new Date(#date.Year, #date.Month-1, #date.Day))
}
$("#txtFromdate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
$("#txtTodate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
function DisableSpecificDates(date) {
//filter array to find any elements which have the date in.
var filtereddates = disableddates.filter(function (d) {
return d.getTime() === date.getTime();
});
//return array with TRUE as the first (only) element if there are NO
//matching dates - so a matching date in the array will tell calling
//code to disable that day.
return [filtereddates.length == 0];
}
});
</script>
This appears to work for me.
I'm using bootstrap-datepicker and I have attached a listner to changeMonth event.
If I use one of setters listed here (e.g. setStartDate, setDatesDisabled, setDaysOfWeekHighlighted etc.) inside my listner, the picker view does not updates (month is unchanged). Everything works fine, if I do not use any datepicker's setter inside my listner.
Here a live sample showing the issue. In this example I'm trying to update dinamically hightlighted dates when the user changes months.
function getHighlighted(month){
var highlitedDays = [0, 1];
if( month % 2 == 0 ){
highlitedDays = [3, 4];
}
return highlitedDays;
}
$('#datepicker').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
}).on('changeMonth', function(e){
var month = e.date.getMonth();
var highlightedDays = getHighlighted(month);
// I use setDaysOfWeekHighlighted just as example
$('#datepicker').datepicker('setDaysOfWeekHighlighted', highlightedDays);
// Do something else
//...
});
$('#datepicker2').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
}).on('changeMonth', function(e){
console.log("I've just changed month to " + e.date.getMonth());
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<input type="text" class="form-control" id="datepicker">
<input type="text" class="form-control" id="datepicker2">
What am I missing?
I came across this issue when I aswered this question where I used setDatesDisabled inside changeMonth listner.
EDIT (after comments)
I've tried both using $(this) inside 'changeMonth' and assign my datepicker to a variable as shown here:
var dt = $('#datepicker').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
})
dt.on('changeMonth', function(e){
var month = e.date.getMonth();
var highlightedDays = getHighlighted(month);
// Neither using dt nor $(this) works
dt.datepicker('setDaysOfWeekHighlighted', highlightedDays);
// Do something else
//...
});
but the problem is still there.
#VincenzoC Please make sure you're using the latest version (1.7.1), this Fiddle demonstrates that it works https://jsfiddle.net/s35za9dr/
function getHighlighted(month){
var highlitedDays = [0, 1];
if( month % 2 == 0 ){
highlitedDays = [3, 4];
}
return highlitedDays;
}
$('#datepicker').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth()),
updateViewDate: false
}).on('changeMonth', function(e){
var month = e.date.getMonth();
var highlightedDays = getHighlighted(month);
// I use setDaysOfWeekHighlighted just as example
$('#datepicker').datepicker('setDaysOfWeekHighlighted', highlightedDays);
// Do something else
//...
});
$('#datepicker2').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth()),
updateViewDate: false
}).on('changeMonth', function(e){
console.log("I've just changed month to " + e.date.getMonth());
});
EDIT
Using any of the set* methods (e.g. setDatesDisabled) in the changeMonth, changeYear, changeDecade or changeCentury events will trigger an update which will cause the picker to revert back to the month in which the current view date occurs.
To prevent this you simply need to initiate the picker with the updateViewDate option set to false.
Problem: Your method update to current date whenever you change the date.
Solution: Try following code.
Remove your current on change method.
Add document Ready for initialize to current date and other is default.
<!DOCTYPE html>
<html>
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<input type="text" class="form-control" id="datepicker">
<input type="text" class="form-control" id="datepicker2">
<script>
$( document ).ready(function() {
var startDate = $('#datepicker').datepicker('setStartDate', new Date());
});
$('#datepicker').datepicker().on('change', function(e){
// I use setStartDate just as example
var startDate = $('#datepicker').datepicker('setDaysOfWeekHighlighted', ['2016-04-29', '2016-04-30']);
// Do something else
//...
});
$('#datepicker2').datepicker().on('changeMonth', function(e){
console.log("I've just changed month to " + e.date.getMonth());
});
</script>
</head>
<body>
</body>
</html>