cant seem to get modal and datepicker in Vue.js. I tried simply what is found in the documentation and I tried already many solutions but I cant get them to work. Is there any proper way of adding materialize components to vue.js that requires jquery initialization.
tried inserting this into my template
<input type="text" class="datepicker">
then I included a js file in my index.html
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year,
today: 'Today',
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
});
Related
At present I am working above mentioned datetimepickers. jQuery datetime picker fights with bootstrap datetimepicker.
Jquery datetimer pciker sample code:
$('#start-date').datetimepicker({
onShow: function(ct){
this.setOptions({
minDate: new Date()
});
},
timepicker: true,
)};
Bootstrap datetimer pciker sample code:
$('#end-date').datetimepicker({
)};
Here The problem is They use the same function called datetimepcker(). so that They have a fight each other. please help me overcome this problem.
You can write the codes in different files and include the respective files in the respective html.
e.g you can write the jquery datetime picker in jquery_datetime_picker.js and bootstrap in bootstrap_datetime_picker.js and include these files in the respective html files using java_script_include_tag
also include bootstrap in bootstrap_datetime_picker.js file
I'm trying to use materialize date picker (http://materializecss.com/forms.html). With that, I want to popup the date picker when I click on an icon. I have implemented two implementations where the only difference between the two is putting an alert('clicked') with the code.
without the alert('clicked'): http://jsfiddle.net/1bnnkhbw/
with the alert('clicked'): http://jsfiddle.net/1bnnkhbw/1/
The second one works while the first one doesn't.. (in chrome)!!!
Anybody knows the reason for this behavior?
And a way to make the 1st one work?
I think I found a solution for you man check this out:
<i id="icon">click</i>
<input class="datepicker" style="display:none;" value="click"></input>
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15
});
$('#icon').click(function(event){
event.stopPropagation();
$(".datepicker").first().pickadate("picker").open();
console.log("test1");
});
Fiddle: http://jsfiddle.net/k2qtzp7p/1/
Code taken from here and here
I have jQuery UI datepicker running with some highlighted dates with custom titles. What I want to do is to display these titles with jQuery UI tooltip. Simplified code (all days higlighted for simplicity):
jQuery('.seminars__calendar').datepicker({
beforeShowDay: function(date) {
return [true, 'highlight', 'The custom title'];
},
});
jQuery('.seminars__calendar .highlight a').tooltip();
This doesnt work. I suppose that is because the calendar is created dynamically and tooltip is not attached to these dynamically created links. If I change the last line to jQuery('.seminars__calendar').tooltip(); It works fine but tooltips are also shown on "next", "prev" links in calendar and I dont want that. I want tooltip on highlighted days only. Is it possible?
Jsfiddle: http://jsfiddle.net/yfjo5a0g/ (It is working at first but if you switch to the next month in datepicker it stops)
you could just use the JQuery tooltip's option content like this:
$('.seminars__calendar').datepicker({
beforeShowDay: function(date) {
return [true, 'highlight', 'The custom title'];
},
});
$('.seminars__calendar .highlight a').tooltip({content:"this is a test"});
But it will overwrite your The custome title.
--EDIT--
Working fiddle here: http://jsfiddle.net/oe5kjwga/
And doc here: http://api.jqueryui.com/tooltip/#option-content
Ok I have solved this. It is needed to reattach .tooltip() after datepicker redraws itself after month/year change. I have tried to add it to onChangeMonthYear datepicker event but no luck (callback is called before datepicker is redrawn).
This works for me (adding toolip everytime you enter calendar with a cursor):
$('.seminars__calendar').on('mouseenter', ".ui-datepicker-calendar", function() {
$(this).tooltip();
});
I'm using bootstrap 3 in a meteor project and would like to disable most of the days of the week in a datetime picker.
The other options I set seem to be working, but daysOfWeekDisabled won't disable any days.
I found this answer here Limit bootstrap-datepicker to weekdays only? that suggests it should work (and it does in the twiddle) but I can't get my code to work.
The options I'm setting are
Template.requestLayout.rendered = function(){
$('.datetimepicker').datetimepicker({
pickTime: false,
startDate: moment().day(12),
defaultDate: moment().day(12),
daysOfWeekDisabled: [0,1,2,3,6],
autoclose: true
});
}
Any ideas why it might not be working?
try changing to this
daysOfWeekDisabled: "0,1,2,3,6"
Trent Richardson's great Jquery Timepicker plugin instead of the Jquery UI datepicker, but I can't seem to display the datetimepicker or timepicker inline, like you can with the datepicker in Jquery UI.
This should be all the code that's needed, at least it's how it works with the Jquery UI datepicker:
<div class="timepicker"></div>
<script>
$(function() {
$('.timepicker').timepicker({
ampm: true
});
});
</script>
Using the datepicker in that same way would result in an inline calendar that always appears, no need to click an input field.
How can I display an inline time picker using datetimepicker or another Jquery plugin?
I think you need to call timepicker from an input text element not a div element.
<input type="text" name="time" class="timepicker"/>
Check out the Fiddle
Turns out this is a known issue and it's in fact fixed in the latest dev branch for Timepicker. Using the dev branch the inline feature works and I've had no problems.
this is from working code for static jquery datetimepicker view :
$('#datetimepicker').datetimepicker({
inline: true,
lang:'uz',
// disabled: true,
format:'d.m.Y H:i',
//
});
and in html:
<div id="datetimepicker"></div>