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');
});
Related
I have a third party Bootstrap plugin (probably EOL), which added buttons to the toolbar, which in turn opened a dialog from where I could select Bootstrap elements to add to the content.
It used the following code:
var insertBtn = tinymce.ui.Factory.create({
type: elType,
classes: elClass,
text: bsText['button'],
icon: 'icon-btn',
name: 'insertBtnBtn',
tooltip: bsTip['button'],
onclick: function() {
showDialog('bootstrap-btn.php', 'Add button', 580, 'bsBtn');
}
});
bsItems.push(insertBtn);
But it says that Factory is undefined or that create is a non-existing function. What can I use to make this work, to show the buttons as well as showing the dialog on click? I already updated the following code to view bsItems:
editor.ui.registry.addButton('bootstrap', {
type: 'buttongroup',
classes: 'bs-btn',
items: bsItems
});
And I tried several other possibilities to find the create function:
editor.ui.registry.create()
editor.ui.Factory.create()
editor.ui.create()
tinymce.ui.registry.create()
tinymce.ui.Factory.create()
tinymce.ui.create()
All to no avail
With version 5, TinyMCE uses a new UI framework. Third party plugins written for version 4.x that provided custom UI control elements will likely not work with version 5.
As noted in this GitHub issue thread, tinymce.ui.Factory has been deprecated and will not be re-implemented, so it is no longer possible to create control Factories.
The methods to add UI elements like buttons have also changed from v4 to v5. The official migration guide goes into a fair amount of detail regarding the new locations and configuration signatures of these methods.
tl;dr This particular plugin might not work with v5's new UI framework but there are still ways of customizing the UI using the new system.
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
Im trying to use the Angular Bootstrap Daterange Picker , But every instance overrides the ng model to be textual.
This is the very simple code:
<input class="input-filter form-control" type="daterange" ng-model="test" ranges="ranges" />
{{test}}
Exactly like the 4th example that they provide HERE.
By overriding, I mean that from an object:
{"startDate":"2015-11-28T22:00:00.000Z","endDate":"2015-11-28T22:00:00.000Z"}
It turns to text:
11/11/2015 - 12/14/2015
THIS is a 10 seconds video showing this problem. (hope this helps)
And these are the things I load:
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.11/daterangepicker.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/moment.min.js
http://luisfarzati.github.io/ng-bs-daterangepicker/ng-bs-daterangepicker.js
I fall into the same issue. I think it caused by the mechanism of updating input value, it probably has been changed in the latest version of daterangepicker (i used v2.1.17 while demo is working with 1.3.17). New daterangepicker has an option autoUpdateInput, it might be helpful to set it to false in directive configuration code (https://github.com/luisfarzati/ng-bs-daterangepicker/blob/master/src/ng-bs-daterangepicker.js):
//...
options.locale = $attributes.locale && $parse($attributes.locale)($scope);
options.opens = $attributes.opens || $parse($attributes.opens)($scope);
options.autoUpdateInput = false; // Changed row
if ($attributes.enabletimepicker) {
options.timePicker = true;
angular.extend(options, $parse($attributes.enabletimepicker)($scope));
}
//...
It helps with incorrect model binding, but there is still a bug with rendering -- initial start/end dates do not rendered (input is blank). So in general it looks like someone just needs to move ng-bs-daterangepicker to the latest version of daterangepicker.
Try using this lightweight pure AngularJS DateRangePicker (no jQuery). https://github.com/tawani/taDateRangePicker
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!
I am using bootstrap datepicker.js but after select the date the datepicker not hide.if i click in any other place it will hide?
what is the solution of this problem?
I have also tried this
$(".datepicker").on('changeDate', function(){
$(".datepicker dropdown-menu").css("display","none");
});
but this is also not working and datepicker.js returns an error(that date is not defined).
You need to use . to target class dropdown-menu:
$(".datepicker").on('changeDate', function(){
$(".datepicker .dropdown-menu").css("display","none");
});
It's not clear from the question which datepicker you are using, but if it is #eternicode's datepicker for boostrap, there is an autoclose option that does exactly what you want...