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
Related
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,
});
My original web page is using Bootstrap datepicker.
However, for adding an existing old date-picker with jQuery-UI, I need to make these two coexist.
I already read the articles in BootStrap DatePicker NoConflict and jQuery ui datepicker conflict with bootstrap datepicker.
My coding logic is:
Step 1: Load jquery-ui.custom.min.js before bootstrap-datepicker.js, bootstrap.min.js, bootstrap-datepicker.js, and bootstrap-select.js.
Step 2: Add the following scripts:
if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict)
{
var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;
}
$(".DatePickerForjQuery-UI").datepicker({});
$(".DatePickerForBootStrap").bootstrapDP({});
Step 3: Set up each's datepicker parameters
$(".DatePickerForjQuery-UI").datepicker({.........});
$(".DatePickerForBootStrap").datepicker({.........});
The result is: $(".DatePickerForjQuery-UI") works good, but $(".DatePickerForBootStrap") will show Bootstrap and jQueryUI date-picker at the same time when I click it.....
Have any ideas why $(".DatePickerForBootStrap") doesn't show correctly?
In case of conflict between jQuery and bootstarp datepicker you can open your jQuery-ui.js and rename the datepicker() function to datepickerj() or by any other name. Now they are two different method . Can use them by different way without any conflict and without any distortion due to conflicting css class
Finally found the answer.
In step 3, if we need to use Bootstrap date-picker, the syntax is:
$(".DatePickerForBootStrap").bootstrapDP({.........});
Since we already update/give the new definition of Bootstrap in Step 2.
So, all the related Bootstrap date-picker functions will always use "bootstrapDP" to work.
Like,
$('.datepicker-textbox')
.bootstrapDP({
update: $(this).val(),
startDate: '<%= DatePickerStartDate %>',
format: '<%= DateFormatClientSide %>'
})
.on('changeDate', function (ev) {
$(this).bootstrapDP('hide')
})
.on('hide', function (ev) {
$(this).removeClass('opened');
});
i am creating a simple application in rails in which i want a range of date to pick from user side so there any option available to do this i mean any gem is available for that or can we this do with the help of the java script but i try to do this but it wouldn't work can any one have any suggestions for this
can we create a customize datarange picker in html that would pick the date and we can use that value and use can also have the option to select options like last7 days and last month or something
thanks in advance
yes there is option available in rails you can use the bootstrap daterange picker option for this rails also have gem for this caarlos0/bootstrap-daterangepicker-rails you can try this
$( ".datepicker" ).datepicker({
minDate: -20,
maxDate: "+1M +10D"
}
Also you can explore this link
I am not sure how to get around this or if this is a bug in meteor but if I have a template that appears under two different layouts (I use iron router)
This code for datepicker
Template.new_event.rendered = function (){
this.$('.datepicker').datepicker({
dateFormat: "yy-mm-dd"
});
}
does not work. If I land on a page that uses the "new_event" template and it is using a different layout from the one that last used the "new_event" template the datepicker command does not trigger and no errors are posted. Also I have tried using different templates (doing rendered calls on different templates), but once I go to a page that calls "datepicker" and go to another page that calls "datepicker" it does not trigger if the page is a different layout
Any help with this would be greatly appreciated
Just try removing this from your code:
Template.new_event.rendered = function (){
$('.datepicker').datepicker({
dateFormat: "yy-mm-dd"
});
}
The idea is that whatever this is referring to might not be where when you use a different layout.
First of all you need to download the meteor Datetimepicker package.
meteor add ryanswapp:datetime-picker
this could would solve ur problem I suppose:
Template.templateName.onRendered(function() {
$('#datetimepicker').datetimepicker({
format: 'Y-m-d',
timepicker: false
})
});
Your HTML should look like this
<input class="form-control" type="text" id="datetimepicker" placeholder="Enter the time">
Hope this helps!
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>