I'm trying to disable years from my "YearPicker?", it's a DatePicker where you're only able to pick years. I need to disable all years and enable only a range of years (From 2012 to now, for example).
I'm using the JQueryUI DatePicker and it looks like this:
CSS:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
JS:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$('#datepicker').datepicker({
viewMode: 2,
format: 'yyyy',
maxDate: new Date(new Date().getFullYear(), 11, 31),
minDate: new Date(2012, 0, 1)
});
})
</script>
HTML:
<label>Year: <input class="form-control" type="text" id="datepicker"></label>
You can make what you're doing work, yet I think it's a bit more work than is needed. I would suggest maybe consider using Autocomplete instead. Take a look:
$(function() {
$("#datepicker").autocomplete({
minLength: 0,
source: function(req, resp) {
var today = new Date();
var min = today.getFullYear() - 6;
// Adjust above as needed, currently 6 years before this year
var results = [];
for (min; min <= today.getFullYear(); min++) {
results.push(min.toString());
}
resp(results)
}
}).focus(function(e) {
$(e.target).autocomplete("search", "");
});
})
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label>Year: <input class="form-control" type="text" id="datepicker" data-years="6"></label>
Can move this to it's own function if needed too.
var function makeYearList(n){
var today = new Date();
var min = today.getFullYear() - n;
var results = [];
for (min; min <= today.getFullYear(); min++) {
results.push(min.toString());
}
return results;
}
You can also adjust the theming to list them horizontally versus vertically.
Hope that helps.
Solved! I was importing Bootstrap DatePicker and JQueryUI DatePicker, I thought that I was using the second one only, but the app was detecting only the first one, my code now is like this and working:
$('#datepicker').datepicker({
minViewMode: 2,
format: 'yyyy',
startDate: '2012',
endDate: 'y'
});
Thanks all for helping!
You could specify simple strings as well to achieve the desired formatting:
{
format: 'MM/yyyy',
startDate: '01/2022',
endDate: '12/2022',
}
Related
How i can add class to every date under selected day.
Lets say i click on Thursday and all dates under Thursday have some class.
I have service where you can chose frequency, weekly, 2 weeks, 4 weeks, and when user click on some date add select frequency the dates are highlighted on the calendar.
I have try to add css to every nth child from ui-state-default but this is not working.
```
$('#cookdate').datepicker({
numberOfMonths: 2,
altField: '#selectedDatecook',
minDate: 2,
maxPicks: 20,
onSelect: function (date) {
var date = $(this).datepicker('getDate');
var day = date.getUTCDay();
},
});
You will want to use a combination of onSelect and beforeShowDate. For example:
$(function() {
var selected, final;
var days = 7;
$('#cookdate').datepicker({
numberOfMonths: 2,
minDate: 2,
onSelect: function(dStr, obj) {
selected = $.datepicker.parseDate("mm/dd/yy", dStr);
final = new Date(selected);
final.setDate(selected.getDate() + days);
$("#selectdate").val($.datepicker.formatDate("mm/dd/yy", final));
},
beforeShowDay: function(dt) {
$(".highlighted").removeClass("highlighted");
if (dt > selected && dt <= final) {
return [true, "highlighted"];
} else {
return [true, ""];
}
}
});
});
td.highlighted, td.highlighted a.ui-state-default {
background-color: #ccc;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Cook Date: <input type="text" id="cookdate"> Select Date: <input type="text" id="selectdate"></p>
You can change days to be any number of days you want. beforeShowDays will then look for the matching dates and add a class to them, highlighted.
Is there any way to show month input type as number (i.e textbox with up and down arrow) instead of dropdown.
Please help on this. See my demo: https://jsfiddle.net/sharmilashree/VBGKU/1067/
.ui-datepicker-calendar tr {
text-align: center;
padding: 0;
background-color: #F6F6F6
}
This will be a difficult workaround. This is not easily done. Here is what I have so far:
https://jsfiddle.net/Twisty/ge6zh5es/6/
HTML
<p>Date:
<input type="text" id="datepicker" class="Highlighted" />
</p>
JavaScript
$(function() {
var minYear = 2006,
maxYear = new Date().getFullYear();
maxYear++;
var $dp = $("#datepicker").datepicker({
changeYear: true,
dateFormat: "dd-mm-yy",
yearRange: minYear + ':' + maxYear,
});
$dp.datepicker("setDate", "0");
function changeSpinner($dpObj) {
var $yearSpin = $("<input>");
$yearSpin.addClass("ui-datepicker-year");
$yearSpin.attr({
type: "number",
min: minYear,
max: maxYear,
value: new Date().getFullYear()
}).data("handler", "selectYear").data("event", "change");
$yearSpin.on("change", function() {
console.log("Spinner Change Event.");
var pDate = $dpObj.datepicker("getDate");
pDate.setFullYear(parseInt(this.value));
console.log("New Date: " + pDate);
$dpObj.datepicker("setDate", pDate);
});
console.info("Created Spinner: ", $yearSpin);
$dpObj.datepicker("widget").find(".ui-datepicker-year").replaceWith($yearSpin);
}
$("#datepicker").click(function() {
changeSpinner($dp);
}).change(function() {
changeSpinner($db);
});
});
This works the first time only. The datepicker itself does not have any events I can hook into to perform the replacement each time. I also have to add in some functions to get this new element to function properly with the datepicker.
I am considering removing the title bar items and separating them. I will update this answer with more details. Another option is to hide the select element and place a spinner over it. This spinner then changes the select element.
I'm using a Linechart from Google, in which I have drawn a graph from JSON data. There are two problems I'm running into I can't seem to fix.
Even though I have 'pointSize: 6' in my options, I still can't seem to draw any kind of point, anywhere on the graph. They just don't get visible.
I can't seem to edit any tooltip. I've added a new column, and neither "dataTable.setValue(i, 2, 'test')" nor manually adding a new entry in the JSON file with "Tooltip":"Test" seems to work.
Anyone who knows what I'm doing wrong, or who has a better suggestion for perhaps a framework/api to use? I'm trying to visualise a datastory with simple code.
<html>
<head>
<style>
body{
/*overflow: hidden;*/
}
#linechart{
margin-top: 20px;
margin-left: 30px}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
<script src='js/dimple.v2.1.2.js'></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
$(function() {
$.getJSON('data/priceData.json', function(data) {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(1800);
dataTable.addColumn('string', 'Date');
dataTable.addColumn('number', 'Value');
//dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true} });
$.each(data, function(i, object){
dataTable.setValue(i, 0, object.DateY);
dataTable.setValue(i, 1, object.ClosePrice);
dataTable.setValue(i, 2, object.Tooltip);
//dataTable.setValue(i, 2, 'yo');
});
var options = {
colors: ['orange'],
tooltip: {isHtml: true},
chart: {
title: 'The Value of the Bitcoin',
subtitle: 'in dollars (USD)'
},
animation: {
duration: 1000,
easing: 'in',
startup: true
},
width: 1950,
height: 850,
pointSize: 6
};
var chart = new google.charts.Line(document.getElementById('linechart'));
chart.draw(dataTable, options);
});
});
};
</script>
</head>
<body>
<div id="linechart"></div>
</body>
</html>
I got this to work using google.visualization.LineChart instead of google.charts.Line.
It gives me both points and tooltips, see here:
Instead of using
google.load('visualization', '1.1', {packages: ['line']});
Just try including
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
Then instead of:
var chart = new google.charts.Line(document.getElementById('linechart'));
Just try using:
var chart = new google.visualization.LineChart(document.getElementById('linechart'));
That ought to do it. Let me know if you have other problems.
My datepicker textbox is generated in ASP.NET MVC:
#Html.TextBoxFor(model => model.StartDate, new {#class = "form-control datepicker", placeholder = "Pick a date...", data_date_format="mm/dd/yyyy"})
'.datepicker()` is then called:
$().ready(function() {
$('.datepicker').datepicker();
});
It appears there is the format in place, just not in the beginning.
When the page is first loaded, the textbox shows 4/24/2015 12:00:00 AM. But when a date is picked, the format then applies and shows a date without the time stamp.
Is there any option or setting I've missed?
If you wanted the simplicity of handling this all on the client with the native format you've chosen for the datepicker, you can just trigger the formatting by setting the date to itself on page load:
// update and date to trigger formatting
$('#myDate').datepicker('update',$('#myDate').datepicker("getDate"))
Alternatively, here's an extension method you can add that will reformat the date in an control when called:
$.fn.reformatDate = function(settings) {
return this.each(function() {
$this = $(this);
if (!$this.data('datepicker')) return
$this.datepicker('setDate',$this.datepicker("getDate"))
});
};
Then use it like this:
$('#myDate').reformatDate();
Demo in Stack Snippets
$.fn.reformatDate = function(settings) {
return this.each(function() {
$this = $(this);
if (!$this.data('datepicker')) return
$this.datepicker('setDate',$this.datepicker("getDate"))
});
};
$(function() {
// simulate pre-filled date from server
$("#myDate").val(new Date());
// initialize like normal
$('#myDate').datepicker();
// update date to trigger formatting
$('#myDate').reformatDate();
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.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.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<input id="myDate" type="text" class="datepicker" />
http://docs.jquery.com/UI/Datepicker
i want to have a link with the choosen date to click at the datepicker
e.g:
<div type="text" id="datepicker"></div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$("#datepicker").datepicker({ <a href="/controller/view/" /> });
});
After I clicked i want to be at follwing adress: /controller/view/20091212
Is something with datepicker possible?
Thanks!
use the onSelect event:
$("#datepicker").datepicker({onSelect: openday});
function openday(dateText, inst) {
window.location = 'controller/action/' + encodeURIComponent(dateText);
}