How to change unix time OR long time to date time
and
date time to unix time OR long time.
in PHP and html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Long Time Convertor - Unix</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/>
<!-- ***** Time Library ***** -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css"/>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" >
<br><br>
<div>
<span class="label-input100">Select Date :- </span>
<input type="text" name="date_picker" id="date_picker" placeholder="01/01/2000">
<span class="focus-input100"></span>
</div>
<br><br>
<div>
<span class="label-input100">Select Time :- </span>
<input type="text" name="time_picker" id="time_picker" placeholder="00 00 AM">
<span class="focus-input100"></span>
</div>
<br><br>---- OR ----<br><br>
<div>
<span class="label-input100">Enter Long Date or Unix time :- </span>
<input type="text" name="unix_time" id="unix_time" placeholder="1234567890" minlength="10" maxlength="10" >
<span class="focus-input100"></span>
</div>
<input type="text" name="post_done" id="post_done" hidden=hidden >
<br><br><br><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<script type="text/javascript">
$( "#date_picker" ).datepicker({
// showOn: "button",
// buttonImage: "datepicker.png",
// buttonText: "Date Picker",
// buttonImageOnly: true,
defaultDate: "01/01/2020",
// minDate: new Date(1930, 1 - 1, 1), // it will show first date in middle of range year
// minDate: new Date(1930, 1),
// maxDate:'-18Y',
// maxDate: '0',
yearRange: '1922:2030',
// yearRange: '1922:',
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
});
</script>
<script type="text/javascript">
$( "#time_picker").timepicker({
timeFormat: 'h:mm p',
interval: 1,
// minTime: '5',
// maxTime: '10:00pm',
defaultTime: '5',
startTime: '5:00',
dynamic: false,
dropdown: true,
scrollbar: true
});
</script>
<?php
error_reporting(0);
if (isset ($_POST["post_done"])) {
if (isset ($_POST["date_picker"])) {$date_picker = $_POST["date_picker"];}
// echo "<br>".$date_picker;
// Changing to mm/dd/yyyy format
if (!($date_picker == "")) {
$org_type_date = explode("/", $date_picker);
$date_picker = $org_type_date[1]."/".$org_type_date[0]."/".$org_type_date[2];
}
if (isset ($_POST["time_picker"])) {$time_picker = $_POST["time_picker"];}
if (isset ($_POST["unix_time"])) {$unix_time = $_POST["unix_time"];}
// changing am/pm time to 24 hrs
$time_picker_new = date("G:i", strtotime($time_picker));
// echo "<br>".$date_picker;
// echo "<br>".$time_picker;
// echo "<br>".$time_picker_new;
// echo "<br>".$unix_time;
// Checking any selected or not
if ((($date_picker == "") && ($unix_time == ""))) {
echo"<script type='text/javascript'>\n";
echo"alert('Date - OR - Long date not selected !');\n";
// echo"(location.href='time.html');\n";
echo"</script>";
exit;
}
// Checking if both selected
if ((!($date_picker == "")) && (!($unix_time == ""))) {
echo"<script type='text/javascript'>\n";
echo"alert('Select any one :- Date - OR - Long date !');\n";
// echo"(location.href='time.html');\n";
echo"</script>";
exit;
}
// Processing date to unix or long time
if (!($date_picker == "")) {
// only date
$date_picker_new = strtotime($date_picker);
echo "<br>"."The only Date Value at 5:00 AM is - ".$date_picker_new;
echo "<br>";
// date with time
$date_picker_new_n = strtotime($date_picker." ".$time_picker_new);
echo "<br>"."The Date Value with selected Time is - ".$date_picker_new_n;
}
// Processing unix or long time to Date
if (!($unix_time == "")) {
$unix_time_value = date("d/m/Y h:i:s A",$unix_time);
echo "<br>"."The Date is (dd/mm/yyyy) - ".$unix_time_value;
}
// Converting Date to unix timestamp
$timestamp = time(); // or your current date
$milliseconds = round(microtime(true) * 1000); // or your current date with seconds
// Converting unix timestamp to Date
$timestamp_to_date = gmdate("Y-m-d\ H:i:s\ ", $timestamp);
$Pre_milliseconds_to_date = $milliseconds / 1000;
$milliseconds_to_date = gmdate("Y-m-d\ H:i:s\ ", $Pre_milliseconds_to_date);
// echo "<br>".$timestamp;
// echo "<br>".$milliseconds;
// echo "<br>".$timestamp_to_date;
// echo "<br>".$milliseconds_to_date;
// *** Date difference Checker between given date and now ***
$your_date = strtotime("2010-01-31");
$datediff = $timestamp - $your_date;
// echo "<br>"."Days Difference =".round($datediff / (60 * 60 * 24));
// *** Date difference Checker between two given ***
$earlier = new DateTime("2011-07-06");
$later = new DateTime("2012-07-09");
$diff = $later->diff($earlier)->format("%a");
// echo "<br>"."Days Difference =".$diff;
// *** sstrotime to date ***
$unixtime = 1307595105;
// echo $time = date("m/d/Y h:i:s A T",$unixtime);
}
?>
<!--
**** Notes ****
----------------
10 digit figure for date time
13 digit figure with seconds
1-1-1970 5.30 0000000000000
1 day = 0000086400000
1 hr = 0000003600000
1 min = 0000000060000
1 sec = 0000000001000
Days to 1-1-2020 = 18262
864 X 18262 X 100000 = 1577836800000
Days to 1-1-2021 = 18628
864 X 18628 X 100000 = 1609459200000
Days to 1-1-2022 = 18993
864 X 18993 X 100000 = 1640995200000
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Long Time Convertor - Unix</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/>
<!-- ***** Time Library ***** -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css"/>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" >
<br><br>
<div>
<span class="label-input100">Select Date :- </span>
<input type="text" name="date_picker" id="date_picker" placeholder="01/01/2000">
<span class="focus-input100"></span>
</div>
<br><br>
<div>
<span class="label-input100">Select Time :- </span>
<input type="text" name="time_picker" id="time_picker" placeholder="00 00 AM">
<span class="focus-input100"></span>
</div>
<br><br>---- OR ----<br><br>
<div>
<span class="label-input100">Enter Long Date or Unix time :- </span>
<input type="text" name="unix_time" id="unix_time" placeholder="1234567890" minlength="10" maxlength="10" >
<span class="focus-input100"></span>
</div>
<input type="text" name="post_done" id="post_done" hidden=hidden >
<br><br><br><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<script type="text/javascript">
$( "#date_picker" ).datepicker({
// showOn: "button",
// buttonImage: "datepicker.png",
// buttonText: "Date Picker",
// buttonImageOnly: true,
defaultDate: "01/01/2020",
// minDate: new Date(1930, 1 - 1, 1), // it will show first date in middle of range year
// minDate: new Date(1930, 1),
// maxDate:'-18Y',
// maxDate: '0',
yearRange: '1922:2030',
// yearRange: '1922:',
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
});
</script>
<script type="text/javascript">
$( "#time_picker").timepicker({
timeFormat: 'h:mm p',
interval: 1,
// minTime: '5',
// maxTime: '10:00pm',
defaultTime: '5',
startTime: '5:00',
dynamic: false,
dropdown: true,
scrollbar: true
});
</script>
<?php
error_reporting(0);
if (isset ($_POST["post_done"])) {
if (isset ($_POST["date_picker"])) {$date_picker = $_POST["date_picker"];}
// echo "<br>".$date_picker;
// Changing to mm/dd/yyyy format
if (!($date_picker == "")) {
$org_type_date = explode("/", $date_picker);
$date_picker = $org_type_date[1]."/".$org_type_date[0]."/".$org_type_date[2];
}
if (isset ($_POST["time_picker"])) {$time_picker = $_POST["time_picker"];}
if (isset ($_POST["unix_time"])) {$unix_time = $_POST["unix_time"];}
// changing am/pm time to 24 hrs
$time_picker_new = date("G:i", strtotime($time_picker));
// echo "<br>".$date_picker;
// echo "<br>".$time_picker;
// echo "<br>".$time_picker_new;
// echo "<br>".$unix_time;
// Checking any selected or not
if ((($date_picker == "") && ($unix_time == ""))) {
echo"<script type='text/javascript'>\n";
echo"alert('Date - OR - Long date not selected !');\n";
// echo"(location.href='time.html');\n";
echo"</script>";
exit;
}
// Checking if both selected
if ((!($date_picker == "")) && (!($unix_time == ""))) {
echo"<script type='text/javascript'>\n";
echo"alert('Select any one :- Date - OR - Long date !');\n";
// echo"(location.href='time.html');\n";
echo"</script>";
exit;
}
// Processing date to unix or long time
if (!($date_picker == "")) {
// only date
$date_picker_new = strtotime($date_picker);
echo "<br>"."The only Date Value at 5:00 AM is - ".$date_picker_new;
echo "<br>";
// date with time
$date_picker_new_n = strtotime($date_picker." ".$time_picker_new);
echo "<br>"."The Date Value with selected Time is - ".$date_picker_new_n;
}
// Processing unix or long time to Date
if (!($unix_time == "")) {
$unix_time_value = date("d/m/Y h:i:s A",$unix_time);
echo "<br>"."The Date is (dd/mm/yyyy) - ".$unix_time_value;
}
}
?>
$("#myDate").datetimepicker({
timepicker: false,
format: 'Y-m-d',
scrollInput: false,
value: new Date(),
onChangeDateTime: function (dp, $input) {
LoadBasedOnDate();
}
,
highlightedDates: [
dateArray[0]
]
});
dateArray contains a set of dates as array for example [ "2020-03-17" "2020-03-18","2020-03-20"]
Here dateArray[0] , "2020-03-17" is highlighted .
How can highlight every date from dateArray in datepicker? jquery datetimepicker full plugin is
used
Here is the answer to your question. You need to use beforeShowDay function in the jquery ui datepicker. In that you can compare all dates with your dateArray. Add css-class-to-highlight this class if match is found.
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/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.0/jquery-ui.js"></script>
<script>
$(function () {
var dateArray = [ "2020-03-17", "2020-03-18","2020-03-20"];
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd',
beforeShowDay: function (date) {
// First convert all values in dateArray to date Object and compare with current date
var dateFound = dateArray.find(function(item) {
var formattedDate = new Date(item);
return date.toLocaleDateString() === formattedDate.toLocaleDateString();
})
// check if date is in your array of dates
if(dateFound) {
// if it is return the following.
return [true, 'css-class-to-highlight', 'tooltip text'];
} else {
// default
return [true, '', ''];
}
}
});
});
</script>
<style type="text/css">
.css-class-to-highlight a{
background-color: blue !important;
color: #fff !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="NonBusinessDays" />
<div id="datepicker"></div>
</div>
</form>
</body>
</html>
please find my code to have google column chart is here:
<html>
<head>
<title>Test</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&display=swap' rel='stylesheet'>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
</head>
<body>
<!-- detail section start -->
<section class='section-padding'>
<div class='container'>
<div class='row'>
<div class='col-12'>
<div>
<h2 class='text-blue main-title'>Current v/s Previous year selling</h2>
</div>
</div>
</div>
<div class='row'>
<div class='col-lg-12'>
<!-- start:: Chart card -->
<div class='card-blk chart-card d-flex flex-column'>
<div class='card flex-grow-3'>
<div class='card-title'>
<h6 class='text-center'>
Customers
</h6>
</div>
<div class='card-content text-center'>
<div id='chartElement3'>
<script type='text/javascript'>
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawElement3Dashboard);
function drawElement3Dashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','customer_profile_value');
data.addColumn('number','Current Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number','Last year Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addRows([['A+',19.9, '19.9%', 18.2, '18.2%'],['A',5.5, '5.5%', 5.4, '5.4%'],['B',2.4, '2.4%', 2.3, '2.3%'],['C',1.0, '1.0%', 1.0, '1.0%'],['C-',0.3, '0.3%', 0.3, '0.3%']]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});
var colChart = new google.visualization.ChartWrapper({'chartType': 'ColumnChart','containerId': 'chart_div_3',
'options': {
'height': 150,
'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
'enableInteractivity' :'true',
'forceIFrame' :'false',
'reverseCategories' :'false',
'tooltip' :'',
'slices' :'10',
'animation': { 'duration' :'2000',
'easing' :'linear',
'startup' :'true',
'alwaysOutside' :'',},
'bar': { 'groupWidth' :'61.8%',},
'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
'isStacked' :'false',
'orientation' :'horizontal',
'vAxis': { 'direction' :'1','format' :'#,###%','gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
}});
dashboard.bind(controller, colChart);
dashboard.draw(data);
}
</script>
<div id='dashboard_div_3'>
<div id='filter_div_3' style='display: none;'></div>
<div id='chart_div_3'>
</div>
</div>
</div>
</div>
</div>
<h6 class='card-subtitle'>
User: Company name
</h6>
</div>
<!-- end:: Chart card -->
</div>
</div>
<!-- Start:: Copyright and page text -->
<div class='row mt-auto pt-3'>
<div class='col-12'>
<div class='copyright-text d-flex justify-content-between'>
<span>Company Name</span>
<span>Page 1</span>
</div>
</div>
</div>
<!-- End:: Copyright and page text -->
</div>
</section>
<!-- detail section end -->
</body>
</html>
my working HTML chart is here
I want to display labels on vAxis as 0%, 5%, 10% up to 20%. So as per Google visualization documentation, I specified vAxis:{format:'#,###%'}
but now it started showing labels like 0%, 500%, 1000%, 1500% and 2000% as you can see in my code above.
Can anyone suggest me the correct way?
the format option assumes the number is already a percent
19.9 = 1,990%
if you want to use the format option,
the values will need to be divided by 100
0.199 = 19.9%
otherwise, you can use custom ticks for the y-axis.
we can provide the value and the formatted value of the tick using object notation.
{v: 20, f: '20%'}
we can also build them dynamically, using data table method --> getColumnRange(colIndex)
// build y-axis ticks
var formatPercent = new google.visualization.NumberFormat({
pattern: '#,##0%'
});
var range = data.getColumnRange(1);
var ticks = [];
for (var i = Math.floor(range.min); i <= Math.ceil(range.max); i = i + 5) {
addTick(i);
}
function addTick(y) {
ticks.push({v: y, f: formatPercent.formatValue(y / 100)});
}
see following working snippet...
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawElement3Dashboard);
function drawElement3Dashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','customer_profile_value');
data.addColumn('number','Current Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number','Last year Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addRows([['A+',19.9, '19.9%', 18.2, '18.2%'],['A',5.5, '5.5%', 5.4, '5.4%'],['B',2.4, '2.4%', 2.3, '2.3%'],['C',1.0, '1.0%', 1.0, '1.0%'],['C-',0.3, '0.3%', 0.3, '0.3%']]);
// build y-axis ticks
var formatPercent = new google.visualization.NumberFormat({
pattern: '#,##0%'
});
var range = data.getColumnRange(1);
var ticks = [];
for (var i = Math.floor(range.min); i <= Math.ceil(range.max); i = i + 5) {
addTick(i);
}
function addTick(y) {
ticks.push({v: y, f: formatPercent.formatValue(y / 100)});
}
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});
var colChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div_3',
'options': {
'height': 150,
'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
'enableInteractivity' :'true',
'forceIFrame' :'false',
'reverseCategories' :'false',
'tooltip' :'',
'slices' :'10',
'animation': { 'duration' :'2000',
'easing' :'linear',
'startup' :'true',
'alwaysOutside' :'',},
'bar': { 'groupWidth' :'61.8%',},
'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
'isStacked' :'false',
'orientation' :'horizontal',
'vAxis': { 'direction' :'1','ticks' :ticks,'gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
}});
dashboard.bind(controller, colChart);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div_3">
<div id="filter_div_3"></div>
<div id="chart_div_3"></div>
</div>
Hi I have Date picker on select Date Month & Year it will show all Date in that Moth it working Fine
Now I want to add a Slider On that so that i used Owl Curasol after adding Curasol Date picker Stopped Working.
My Full code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.css">
<script type="text/javascript">
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
html='';
for(i=1;i<=$d;i++){
console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
console.log(d);
n = weekday[d.getDay()];
html += '<div class="datediv">div-'+i+'<br>'+n+'</div>';
}
$('#datecontent').html(html);
}
});
$(document).ready(function() {
$(document).live('click', '.datediv', function() { alert("hello"); });});
});
</script>
Html Code
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent" id="owl-demo">
</div>
Owl Script
<script src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/assets/js/jquery-1.9.1.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
</script>
I got This error TypeError: $(...).datepicker is not a function
How to fix this issue. I think because of Jquery Conflict Only
How to over come on this??
Hope this helps!
You should use the add method in carousel to append items inside carousel.Also use refresh to run the slider after appending.
owl.trigger('add.owl.carousel', ['<div class="datediv">div-'+i+'<br>'+n+'</div>']).trigger('refresh.owl.carousel');
use remove method to remove items from carousel before appending new items.
for (var i =0; i< $('.owl-item').length; i++) {
owl.trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel');
}
$(document).ready(function() {
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
for (var i =0; i< $('.owl-item').length; i++) {
owl.trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel');
}
for(i=1;i<=$d;i++){
console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
console.log(d);
n = weekday[d.getDay()];
owl
.trigger('add.owl.carousel', ['<div class="datediv">div-'+i+'<br>'+n+'</div>'])
.trigger('refresh.owl.carousel');
}
}
});
$(document).on('click', '.datediv', function() { alert("hello"); });
var owl = $(".owl-demo");
owl.owlCarousel({
margin: 20,
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
.owl-item {
-webkit-tap-highlight-color: transparent;
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent" class="owl-demo">
</div>
I am using Angular UI Bootstrap datepicker directive in my project. I have this specific need like I need to enable only 5 days from current day. In case of weekend, I need to disable them and enable the remaining days. for eg, If current day in Friday, I need to enable fri, mon, tue, web, thurs. I am using dateDisabled property to achieve this. Problem is all past month dates are also getting enabled. Also I think the solution I came up is not elegant. Below is my markup and code. Kindly help me. Thank you in advance.
<input show-weeks="false" ng-click="vm.openDate()" name="quotedate" type="text" class="form-control" ng-model-options="{timezone:'UTC'}" uib-datepicker-popup="dd/MM/yyyy" ng-model="vm.quote.date" is-open="vm.quotedate.opened" datepicker-options="vm.dateOptions" required close-text="Close" readonly="true"/>
vm.dateOptions = {
dateDisabled: disabled,
minDate: today
};
function disabled(data) {
var date = data.date,
mode = data.mode;
if (today.getDay() === 0 || today.getDay() === 6) {
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 5 );
}else if (today.getDay() === 1) {
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 4 );
}else {
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 6 );
}
}
What you are looking for are the min-date, max-date, and date-disabled attributes, as described in the docs. The date-disabled function in this example is pulled directly from the docs, and in order to confine the available date range, simply set the min-date attribute to the current datetime:
vm.dt = new Date();
vm.minDate = angular.copy(vm.dt);
...and the max-date to five days from now:
var fiveDaysFromNow = angular.copy(vm.dt);
fiveDaysFromNow.setDate(fiveDaysFromNow.getDate() + 5);
vm.maxDate = fiveDaysFromNow;
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
var vm = this;
function today() {
vm.dt = new Date();
}
today();
vm.opened = false;
vm.openDatePopup = function() {
vm.opened = true;
};
// Disable weekend selection
vm.disabled = function(date, mode) {
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
};
vm.minDate = angular.copy(vm.dt);
var fiveWeekdaysFromNow = angular.copy(vm.dt);
fiveWeekdaysFromNow.setDate(fiveWeekdaysFromNow.getDate() + 7);
vm.maxDate = fiveWeekdaysFromNow;
vm.dateOptions = {
formatYear: 'yy',
startingDay: 0
};
vm.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
vm.format = vm.formats[0];
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style>
<div ng-controller="DatepickerDemoCtrl as demo">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<p class="input-group">
<input type="text"
class="form-control"
uib-datepicker-popup="{{demo.format}}"
ng-model="demo.dt"
show-weeks="false"
is-open="demo.opened"
min-date="demo.minDate"
max-date="demo.maxDate"
datepicker-options="demo.dateOptions"
date-disabled="demo.disabled(date, mode)"
ng-required="true"
close-text="Close"/>
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
ng-click="demo.openDatePopup()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</div>
</div>
</body>
</html>
Hope this helps!