having an issue where the min or max time I set is not applied when you first open the window, or anytime I update the config dynamically after it's first created. In this example you can see it's set to be 1:00 PM minTime, but it shows 12:00 PM when toggled open. Closing the picker will correct itself to then show 1:00 PM.
const fp = flatpickr(".date", {
enableTime: true,
noCalendar: true,
minTime: '13:00',
dateFormat: 'h:i K',
});
https://jsfiddle.net/dkgxuw4r/
I noticed it works as expected on the doc site: https://flatpickr.js.org/examples/#time-picker-w-limits, but not when I use those same exact options. So how to achieve this?
You can set the default hour to 13, in this way its already updated on initialization.
To do this you can use the Flatpickr config option defaultHour: 13,.
Example
$(document).ready(function() {
const fp = flatpickr(".date", {
enableTime: true,
noCalendar: true,
defaultHour: 13,
minTime: '13:00',
dateFormat: 'h:i K',
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
<input type="text" placeholder="Select Date.." class=date>
Related
I want to add year option in sharepoint list datepicker column, since it does not allow to pick year except to swap 12 months back can someone suggest somthing?
No option for this, use jQuery Datapicker instead.
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
})
Update:
Insert the script into your list form(new forum/edit form),update the "Time" as your field title.
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function () {
$('input[title="Time"]').datepicker({
changeMonth: true,
changeYear: true
})
$('input[title="Time"]').parent().siblings().hide();
});
</script>
problem descritpion
i try to use the search function of docsifyk, but it seems not working.
steps to reproduce
so i do these steps:
(following the official docsify documentation)
i run 'docsify init' in a directory, so it generate a 'index.html' and a 'README.md'.
i add the code into 'index.html‘.
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
current behavior
the page shows the search button, but whatever i type, it returns 'no result'.
other information
i have tried it on different computers(mac/ubuntu 16), both not working
Did Anybody Ever Have The Same Question?
I encounter the same issue. I Found i was doing few things wrong
Firstly This Link is Worth checking out
Make Sure You have a _sidebar.md File and or a file for side bar Adding a side bar after this just add this script tag
<script>
window.$docsify = {
loadSidebar: true,
subMaxLevel: 6,
search: {
maxAge: 86400000, // Expiration time, the default one day
paths: 'auto',
placeholder: 'Type to search',
noData: 'No Results!',
depth: 6,
hideOtherSidebarContent: true, // whether or not to hide other sidebar content
}
}
</script>
this implementation works for me:
<script>
window.$docsify = {
loadSidebar: true,
subMaxLevel: 3,
name: '',
repo: '',
search: 'auto', // default
// complete configuration parameters
search: {
maxAge: 86400000, // Expiration time, the default one day
paths: 'auto',
placeholder: 'Type to search',
noData: 'No Results!',
// Headline depth, 1 - 6
depth: 6,
hideOtherSidebarContent: false, // whether or not to hide other sidebar content
}
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
check this plugin if you prefer algolia
https://www.npmjs.com/package/docsify-algolia-search-plugin
I have Date Range Picker inside zeppelin %pyspark interpreter like below:
print("""%angular
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type="text" name="datetimes" />
<script>
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
</script>
""")
I don't know how to get the value selected inside daterangepicker in %pyspark interpreter
Like already mentioned in the comments, it works currently only with the spark scala interpreter. I have used your code to get and set the value of your daterangepicker, but I have to admit that it wasn't stable (sometimes it worked and sometimes it didn't). I'm not sure if further changes to your daterangepicker are required to handle initial values, as I have no clue of angluar or if the zeppelin backend angular API is not yet ready for production. Maybe you or someone else can figure this out based on my approch.
One important thing you have to do is to bind the variable and add the ng-model attribute to the tag you want to bind.
z.angularBind("choice", "6/04 03:00 AM - 6/23 11:00 AM")
println("""%angular
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type="text" name="datetimes" ng-model="choice"/>
<script>
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
</script>
""")
You can fetch the values in another %spark paragraph with:
println(z.angular("choice"))
//6/04 03:00 AM - 6/25 12:00 AM
I have run into a dead end trying to get the following HTML to work. I am trying to use the real time gauge chart to display a value coming from a photon. This is the snippet code from the pubnub site.
(I have proven that the published value is arriving in the Javascript using the commented out pubnub code in the Javascript. The value is displayed in the P tag.)
The P tag is displayed on the screen, but no gauge is displayed.
Could you please have a look at my code and guide me on where I have made a mistake. I have not worked with EON before, so I may be making very basic mistake.
<!DOCTYPE html>
<html>
<!-- <script type="text/javascript" src="http://cdn.pubnub.com/pubnub-3.16.1.min.js"></script> -->
<script type="text/javascript" src="//pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<div id="chart"></div>
<script type="text/javascript">
*var pubnub = PUBNUB.init({subscribe_key: 'xxxxxxx'});
/*
pubnub.subscribe ({channel : "datatest", message : function(tempmsg)
{document.getElementById("x").innerHTML = tempmsg.eon.data;}});
*/
var channel 'datatest';
eon.chart({
channel: channel,
generate: {
bindto: '#chart',
data: {
type: 'gauge',
},
gauge: {
min: 0,
max: 100
},
color: {
pattern: ['#FF0000', '#F6C600', '#60B044'],
threshold: {
values: [30, 60, 90]
}
}
}
});
</script>
<body>
<p id ="x"> This is my text that will be replaced by the value from the photon </p>
</body>
</html>
The output from the photon looks like this:
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
There is a missing line of code in the PubNub EON JavaScript embed code for the Gauge Chart.
You must add pubnub: pubnub, to bind the graph instance to the PubNub stream.
I am looking to build a date range picker that's values only consist of January-December of a single year at a time.It will look something like this:
(This is taken from my existing kendo date range picker and poorly photoshopped)
I have built one using the kendo date picker but it seems to require two calendars, one for start date and the other for end date. Being that my range can only span months in a single year, I just need one calendar like below where the user can either click and drag for the desired range, or they can just click two dates. Does anyone know of a date range picker that already functions this way? Or if there is a way to alter the kendo one to do the same?
Thanks.
Edit: Here is my code for my existing date range picker:
var start = $("#StartDate").kendoDatePicker({
value: LastMonthString,
format: "MM/yyyy",
start: 'year',
depth: 'year',
change: startChange,
open: function() {
$('#StartCalendar').append($('#StartDate_dateview'));
},
close: function(e) {
e.preventDefault();
}
}).data("kendoDatePicker");
var end = $("#EndDate").kendoDatePicker({
value: TodaysDateString,
format: "MM/yyyy",
start: 'year',
depth: 'year',
change: endChange,
open: function() {
$('#EndCalendar').append($('#EndDate_dateview'));
},
close: function(e) {
e.preventDefault();
}
}).data("kendoDatePicker");
start.max(end.value());
end.min(start.value());
$("#StartDate").attr("readonly", true);
$("#EndDate").attr("readonly", true);
start.open();
end.open();
This is how I've made it to show years only but you can change the format obviously
$('#sandbox-container').datepicker({
format: "yyyy",
startView: 1,
viewMode: "years",
minViewMode: "years",
minViewMode: "years",
multidate: true,
multidateSeparator: ", ",
autoClose: true,
}).on("changeDate",function(event){
var dates = event.dates, elem = $('#sandbox-container');
if(elem.data("selecteddates") == dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
if(dates.length>2) dates=dates.splice(dates.length-1);
dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()});
elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div id="sandbox-container">
<input type="text" id="date" value="">
</div>