I am using Bootstrap 3 DateTimePicker and I am trying to disable some specific hours in some specific dates. For example, I want to disable 08:00 hour option in 06/27/2018 and 17:00 hour option in 06/30/2018.
I tried to use "disabledHours" option. But this option disables the given hour in all days.
So how can I achieve this?
Here are my codes.
$(".datepicker").datetimepicker({
format: 'MM/DD hh:ii',
datesDisabled: ['2016/08/20'],
autoclose: true,
});
There are no in-built functions to disable specific hours in a specific date. But the case can be achieved by using the onRenderHour method. Store the hours to be disabled in specific dates in the array disabledtimes_mapping. Those will be disabled automatically while rendering the picker.
P.S: This date-picker is deprecated. The same is forked and maintained by AuspeXeu in GitHub.
var disabledtimes_mapping = ["06/27/2018:8", "06/30/2018:17", "06/30/2018:15"];
function formatDate(datestr)
{
var date = new Date(datestr);
var day = date.getDate(); day = day>9?day:"0"+day;
var month = date.getMonth()+1; month = month>9?month:"0"+month;
return month+"/"+day+"/"+date.getFullYear();
}
$(".datepicker").datetimepicker({
format: 'MM/DD hh:ii',
datesDisabled: ['2018-06-20'],
autoclose: true,
onRenderHour:function(date){
if(disabledtimes_mapping.indexOf(formatDate(date)+":"+date.getUTCHours())>-1)
{
return ['disabled'];
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<input class="datepicker" type="text">
Related
I need to show a datepicker allowing customer to choose multiple dates based on below criteria and also based on business logic that number of Orders can delivery per day.
Show T + 5 days only where T is current date and customer can choose only 5dates in datepicker for delivery. Other dates will be de activated
No Sundays
There will be threshold limit for order delivery. If for example no of orders on specific date met the threshold limit, then that date should be disabled from choosing and show next date for customer to choose for delivery.
$(document).ready( function() {
var threshold_orderlimit = 100; // limit for orders to accept
var tdays = 5; // show today + 5 days
var noOfOrdersPlaced = 40; // current order count
if(noOfOrdersPlaced >= threshold) {
tdays = tdays +1; // next 5 days
}
$("#date").datepicker( {
minDate: +tdays,
maxDate: '+5D', // show only 5 days
beforeShowDay: function(date) { // No sundays
var day = date.getDay();
return [(day != 0), ''];
}
});
});
Can some one help me to check if it is achievable in Jquery Date Picker
In case of using the Jquery Datepicker, its not possible to select multiple dates. Need to add a plugin jQuery MultiDatePicker.
var date = new Date();
var threshold_reached_dates = [date.setDate(15), date.setDate(29),date.setDate(18)];
var today = new Date();
var maximumdays_limit = 5;
var pickable_range = 6;
$("#datepicker").multiDatesPicker({
minDate:today,
beforeShowDay : function(date){ return [date.getDay()!=0,'']},
maxPicks : maximumdays_limit,
pickableRange : pickable_range,
adjustRangeToDisabled: true,
addDisabledDates : threshold_reached_dates
});
function getSelectedDates()
{
console.log($("#datepicker").multiDatesPicker("getDates"))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<div id="datepicker">
<button onclick="getSelectedDates()">Get Selected Dates</button>
In case of using the Bootstrap Datepicker
var startdate = new Date();
var enddate = new Date();
var threshold_reached_dates = ["2018-07-05","2018-07-25","2018-07-13","2018-07-17"];
var maximumdays_limit = 5;
enddate.setDate(startdate.getDate()+maximumdays_limit);
var l = threshold_reached_dates.filter(function(d){return new Date(d)>=startdate && new Date(d)<=enddate;}).length;
(l && enddate.setDate(enddate.getDate()+l));
$('#date').datepicker({
format: "yy-mm-dd",
startDate : startdate,
endDate : enddate,
daysOfWeekDisabled : '0',
datesDisabled: threshold_reached_dates,
multidate: true,
multidateSeparator: ",",
}).on("changeDate",function(event){
var dates = event.dates, elem=$('#date');
if(dates.length>maximumdays_limit)
{
dates.pop();
$("#date").datepicker("setDates",dates)
}
});
function getDates()
{
console.log($("#date").datepicker("getUTCDates"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<input type="text" id="date">
<button onclick="getDates()">Get Dates</button>
I have the following data in a Google Spreadsheet:
ColumnA ColumnB
Departament Quantity
01/01/2016 23
02/01/2016 43
04/01/2016 5
06/01/2016 65
10/01/2016 12
11/01/2016 32
13/01/2016 22
15/02/2016 2
And want to draw a linechart using HTML Templates: This is my code so far now
<!DOCTYPE html>
<html>
<head>
<script src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="main"></div>
<script>
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(getSpreadsheetData);
function getSpreadsheetData() {
google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
}
function drawChart(rows) {
var options = {'title':'Example','width':400,'height':300};
var data = google.visualization.arrayToDataTable(rows, false);
var chart = newgoogle.visualization.LineChart(document.getElementById("main"));
chart.draw(data, options)
}
</script>
</body>
</html>
My script to read the sheet:
function getSpreadsheetData() {
var ssID = "12GvIStMKqmRFNBM-C67NCDeb89-c55K7KQtcuEYmJWQ",
sheet = SpreadsheetApp.openById(ssID).getSheets()[0],
data = sheet.getDataRange().getValues();
return data;
}
However i cant draw the plot, this issue dissapear when i change the data to a numeric (i.e. 42370), but thats not what i want!
Question is: what do i have to add in order to change to the right format in x axis?
You can use the hAxis.format configuration option
var options = {'title':'Example','width':400,'height':300,//-->'format':'MM/dd/yyyy'};
The valid format options can be found here...
And if you need to load with a specific locale, see this...
I'm using two DateTimePickers http://tarruda.github.io/bootstrap-datetimepicker/ in my code: one for choosing a date (pickTime disabled) and the other for the time (pickDate disabled).
I've managed to set a startDate for the date, but how can I set a startTime and an endTime, in such a way that the any time before that startTime is disabled?
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false,
startDate: new Date(2013,9,8)
});
});
</script>
<script type="text/javascript">
$(function() {
$('#datetimepicker3').datetimepicker({
pickDate: false,
startTime: ???
});
});
</script>
This question is OLD but thought it might help some one.
JS
$('.time').datetimepicker({
format: 'LT'
}).on("dp.change",function(e){
var date = e.date;//e.date is a moment object
var target = $(e.target).attr('name');
console.log(date.format("HH:mm:ss"))//get time by using format
})
e.date is a moment object thus time can derived by using format("HH:mm:ss")
I am trying to add min and max limits to a Google chart, which I generate using a Perl script from CSV data - by using the interval role for these 2 values.
Unfortunately the I-lines are not displayed at my line chart, even though I've set the min and max limits to the -100 and 100 for the sake of testing.
Only the main data is being displayed:
Can anybody please spot the error, what is wrong with my very simple test case?
Please just save the code below as an HTML-file and open in a browser:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
var data = {"L_B8_ACLR_50_0_QPSK_1_H":{"rows":[
{"c":[{"v":"UTRA_1_DOWN"},{"v":-100},{"v":100},{"v":"-42.46912"}]},
{"c":[{"v":"E-UTRA_1_DOWN"},{"v":-100},{"v":100},{"v":"-39.9545"}]},
{"c":[{"v":"E-UTRA_1_UP"},{"v":-100},{"v":100},{"v":"-48.68408"}]},
{"c":[{"v":"UTRA_1_UP"},{"v":-100},{"v":100},{"v":"-49.45148"}]},
{"c":[{"v":"UTRA_2_UP"},{"v":-100},{"v":100},{"v":"-58.96674"}]}],
"cols":[
{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
{"p":{"role":"interval"},"label":"LSL","type":"number"},
{"p":{"role":"interval"},"label":"USL","type":"number"},
{"p":{"role":"data"},"label":"1142926087","type":"number"}]}};
function drawCharts() {
for (var csv in data) {
var x = new google.visualization.DataTable(data[csv]);
var options = {
title: csv,
width: 800,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById(csv));
chart.draw(x, options);
}
}
$(function() {
google.setOnLoadCallback(drawCharts);
});
</script>
</head>
<body>
<div id="L_B8_ACLR_50_0_QPSK_1_H"></div>
</body>
</html>
(I don't want to use methods like addColumn or addRows. Instead I prepare my data as data structure in my Perl script and then JSON-encode and pass it to DataTable ctr).
You must specify the interval-role column after the data-column. As written in the API :
"All columns except domain columns apply to the nearest left neighbor to which it can be applied"
So if you change the order (and here with some smaller intervals)
var data = {"L_B8_ACLR_50_0_QPSK_1_H":{"rows":[
{"c":[{"v":"UTRA_1_DOWN"},{"v":"-42.46912"},{"v":-50},{"v":-45}]},
{"c":[{"v":"E-UTRA_1_DOWN"},{"v":"-39.9545"},{"v":-50},{"v":-45}]},
{"c":[{"v":"E-UTRA_1_UP"},{"v":"-48.68408"},{"v":-50},{"v":-45}]},
{"c":[{"v":"UTRA_1_UP"},{"v":"-49.45148"},{"v":-50},{"v":-45}]},
{"c":[{"v":"UTRA_2_UP"},{"v":"-58.96674"},{"v":-50},{"v":-45}]}],
"cols":[
{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
{"p":{"role":"data"},"label":"1142926087","type":"number"},
{"p":{"role":"interval"},"label":"LSL","type":"number"},
{"p":{"role":"interval"},"label":"USL","type":"number"}
]}};
..You end up with :
How to disable previous dates while using in ajaxToolkit CalendarExtender
One Option is to use a rangevalidator on the textbox the calenderextender is bound to. Ie if you have the TargetID of the calendar extender set to tb1 add a rangeValidator to flag when the contents of tb1 is before today.
Another option is using javascript and here is a good example:
http://www.dotnetcurry.com/ShowArticle.aspx?ID=149 TIP 6.
Here is my full solution to the calendar date restriction problem: What I like about this solution is that you set the MinimumValue and MaximumValue of a RangeValidator and you do not have to modify any javascript. I never found a full solution that did not require recompiling the AjaxControlToolkit.dll. Thanks to http://www.karpach.com/ajaxtoolkit-calendar-extender-tweaks.htm for giving me the idea of how to override key methods in the calendar.js file without having to recompile the AjaxControlToolkit.dll. Also, I got "AjaxControlToolkit is undefined" javascript errors, so I changed those to Sys.Extended.UI. and it works for me when using the 4.0 version of the toolkit.
<%--//ADD THIS NEW STYLE TO STYLESHEET TO GRAY OUT DATES THAT AREN'T SELECTABLE--%>
<style type="text/css">
.ajax__calendar_inactive {color:#dddddd;}
</style>
Either in Page_Load or Init or wherever, set the min and max values for your range validator:
<script runat="server">
protected override void OnLoad(EventArgs e)
{
//set the validator min and max values
this.valDateMustBeWithinMinMaxRange.MinimumValue = DateTime.Today.Date.ToShortDateString();
this.valDateMustBeWithinMinMaxRange.MaximumValue = DateTime.MaxValue.Date.ToShortDateString();
base.OnLoad(e);
}
</script>
Add this javascript somewhere in your page:
<script type="text/javascript">
<%--// ADD DATE RANGE FEATURE JAVASCRIPT TO OVERRIDE CALENDAR.JS--%>
var minDate = new Date('<%= valDateMustBeWithinMinMaxRange.MinimumValue %>');
var maxDate = new Date('<%= valDateMustBeWithinMinMaxRange.MaximumValue %>');
Sys.Extended.UI.CalendarBehavior.prototype._button_onblur_original = Sys.Extended.UI.CalendarBehavior.prototype._button_onblur;
//override the blur event so calendar doesn't close
Sys.Extended.UI.CalendarBehavior.prototype._button_onblur = function (e) {
if (!this._selectedDateChanging) {
this._button_onblur_original(e);
}
}
Sys.Extended.UI.CalendarBehavior.prototype._cell_onclick_original = Sys.Extended.UI.CalendarBehavior.prototype._cell_onclick;
//override the click event
Sys.Extended.UI.CalendarBehavior.prototype._cell_onclick = function (e) {
var selectedDate = e.target.date;
if (selectedDate < minDate || selectedDate > maxDate ) {
//alert('Do nothing. You can\'t choose that date.');
this._selectedDateChanging = false;
return;
}
this._cell_onclick_original(e);
}
Sys.Extended.UI.CalendarBehavior.prototype._getCssClass_original = Sys.Extended.UI.CalendarBehavior.prototype._getCssClass;
Sys.Extended.UI.CalendarBehavior.prototype._getCssClass = function (date, part) {
var selectedDate = date;
if (selectedDate < minDate || selectedDate > maxDate ) {
return "ajax__calendar_inactive";
}
this._getCssClass_original(date, part);
}
</script>
Add this text box to your asp.net page with CalendarExtenter and RangeValidator:
<asp:TextBox ID="textBoxDate" runat="server" />
<ajaxToolkit:CalendarExtender ID="calendarExtender" runat="server" TargetControlID="textBoxDate" />
<asp:RangeValidator ID="valDateMustBeWithinMinMaxRange" runat="server" ControlToValidate="textBoxDate"
ErrorMessage="The date you chose is not in accepted range" Type="Date" />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
Using the Ajax toolkit Calendar Extender in the html markup:
<asp:TextBox ID="txtDate" runat="server" CssClass="contentfield" Height="16px" MaxLength="12" width="80px" Wrap="False"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender3" runat="server" Enabled="true" StartDate="<%# DateTime.Now %>" EndDate="<%# DateTime.Now.AddDays(1) %>" Format="dd MMM yyyy" PopupButtonID="imgDatePicker" TargetControlID="txtDate">
</asp:CalendarExtender>
<asp:ImageButton ID="imgDatePicker" runat="Server" AlternateText="Click to show calendar" Height="16px" ImageAlign="Middle" ImageUrl="~/images/Calendar_scheduleHS.png" Width="16px" />
Above you will see that the Calendar only allows one to choose between today or tomorrow by setting
StartDate="<%# DateTime.Now %>"
and
EndDate="<%# DateTime.Now.AddDays(1) %>"
This can also be done in the backend using CalendarExtender1.StartDate = DateTime.Now; or CalendarExtender1.EndDate = DateTime.Now.AddDays(1);
Just add an attribute StartDate="<%# DateTime.Now %>" in you ajaxtoolkit calendarextender control
Following link might help you:
Disable dates in CalendarExtender