I am using combodate and moment.js to have a dropdown DD-MM-YYYY. It's perfectly functional and inserts data into my tables but only shows as unstyled small dropdown boxes unlike the demo.
I have tried styling it in bootstrap and css but it changes nothing and only seems to create issues. I've tried on multiple browsers with the same result and no errors. I have tested my jQuery and its working fine. I am running this locally, My code is below:
$(document).ready(function() {
$(function() {
$('#date').combodate();
});
});
<script src="./js/combodate.js"></script>
<script src="./js/moment.min.js"></script>
<input type="btn btn-drowpdown" method="post" name="date" id="date" data-format="YYYY-MM-DD" data-template="D-MMM-YYYY" value="09-01-2013">
I am still new to coding especially javascript/jQuery and its probably something very small I've overlooked. Any help is greatly appreciated.
I have got it working, but had to come up with a different approach.
I copied the sample code on JSFiddle from Combodate Github's page and altered it a bit.
<h3>Combodate</h3>
<div class="form-inline">
<div style="margin: 50px;" class="input-group">
<input type="text" id="date" data-format="DD-MM-YYYY" data-template="D MMM YYYY" />
</div>
</div>
I added a <div> layer to accommodate form-inline and input-group style classes for this component, otherwise the three generated combos would be shown on separate lines.
$(function(){
$('#date').combodate({
value: new Date(),
minYear: 2012,
maxYear: moment().format('YYYY'),
customClass: 'form-control'
});
});
And then I added customClass to Combodate's init properties to style all three combos accordingly.
I don't know what OP is expecting as result, then I tried to guess it.
Hope it helps.
The sample is published in JSFiddle: https://jsfiddle.net/flaviocysne/4g5p46zd/
Related
I have implemented a Spectrum color Picker, it works perfectly, except for the showInput option which makes the text input not editable, it is not even selectable, it does not even focus on itself. If I select the color, however, the hexadecimal value appears in the input, so it works halfway. But I can't select it to manually set the hex value I want it to have.
This is the Jquery code :
$("#divPickerColor").spectrum({
showInput : true ,
preferredFormat: "hex",
showButtons: false,
allowEmpty:true
});
this is the html code :
<script id="configurazioni-inserimento-modifica-stato-avanzamento" type="text/template">
<div>
<form id="formAddStatoAvanzamento" role="form" action="/" method="POST"
data-parsley-validate>
<div class="form-group">
<div class="row">
<div id="colorazione" class="col-lg-12">
<input type="text" id="divPickerColor" />
</div>
</div>
</div>
</form>
</div>
</script>
This script is called by a function to display it on a modal.
The tour is complex and I can't post all the code to you, I tried to put the main nodes in it. What I can say further is that I have looked at the CSS properties of the input, it has no disabling properties. I also tried to forcibly put them with JQuery in the console but nothing changed. The input generated by Spectrum is not editable and has no focus on itself.
I add that I have tried the same code in an html page outside my application, everything works perfectly. I think it's something related to the fact that this portion of html is included in a script. Does anyone know why and how to fix it?
As #BugCatcherJoe wrote at the question comment, the answer is at the next link:
https://github.com/bgrins/spectrum/issues/161
The solution that works for me was removing 'tabindex=-1' from the modal attributes.
I am currently trying to integrate the bootstrap datepicker, but for some reason it is not working at all. The datepicker is simply not showing like it should.
I have created a jsfiddle here: http://jsfiddle.net/4hmuff8x/
It contains the js code of both the datepicker and bootstrap as well as the css for these.
To explain what I am doing, the following html code is the input where I want the datepicker:
<div class="col-md-10 col-md-offset-1 spacer-below-20">
<label>The date</label>
<div class="input-group">
<input class="datepicker" type="text" name="date">
</div>
</div>
Of course I have written a bit of js, which should "link" the input tag to the datepicker:
<script>
$(function(){
$('.datepicker').datepicker({
format: 'dd.mm.yyyy'
});
});
</script>
I really can't figure out why it is not working. I hope some of you can help me out.
Any help will be greatly appreciated.
In the given fiddle , you are calling the below function before loading the js file into DOM.
$('.datepicker').datepicker({
format: 'dd.mm.yyyy'
});
call the script after loading the script or on
$(document).ready(function(){
//code to call
})
https://jsfiddle.net/santoshj/4hmuff8x/2/
I've built a form in which I use at some point Datepicker :
<div class="col-lg-5">
<div class="form-group">
<label class="control-label" for="datepicker" style="padding-bottom:10px;">Deadline pour l'étudiant</label>
<div class="controls with-icon-over-input">
<div class="input-group">
<input class="form-control hasdatepicker" id="datepicker" name="offer[end_date]" placeholder="31/12/2020" style="border-radius:5px" type="text">
</div>
</div>
</div>
</div>
On the CSS part, I've downloaded bootstrap-datetimepicker.js, version 4.0.0.
My problem is : every time I start using Datepicker on my footer_application.js file, all the jQuery features stop functioning.
I mean, as soon as I write on my footer_application.js file:
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
The Javascript effect that shows "Sans expliciter le nom, présentez votre entreprise (...)" stops functioning.
And the Datepicker doesn't seem to apply neither. I'm new to Javascript and jQuery so any help or clue is more than welcome.
And if you need any more information, I'll be more than pleased to add it to this post.
Good afternoon,
I don't know what language that is, but I'm not familiar with it so I don't know what error you are getting. However, I can tell you that typically this sort of stuff happens when you are doing something syntactically wrong, or that completely breaks the JavaScript. Once this line is attempted to be executed (and, again, this line of code is probably not correct for its purpose), JavaScript stops executing and everything after it does not get ran. I'd recommend double-checking the syntax for exactly what you are trying to do.
Regards,
I am using the following bootstrap 3 datepicker.
http://eonasdan.github.io/bootstrap-datetimepicker/
it works fine but there is an issue . during the change event
the output thrown out is a js object. i want a string. is taht possible.
there is another question asked along the same lines. but current version of datepicker has been updated and the old code does not run in jsfiddle.
html code is as follows:
<div class="form-group">
<div class='input-group date' id='datetimepicker5' data-date-format="YYYY/MM/DD">
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
my jquery code is as follows ;
$(function () {
$('#datetimepicker5').datetimepicker({
pickTime: false,
useCurrent: true,
showToday: true,
language : 'en'
});
$('#datetimepicker5').data('DateTimePicker').show();
});
//.... on change event
$('#datetimepicker5').on('dp.change', function() {
var t3= $('#datetimepicker5').data("DateTimePicker").getDate();
alert (t3.format('YYYY-MM-DD)); // this is the new change and works perfect
});
any help is really appreciated
If I interpret the installation instruction correctly, Eonasdan already has moment.js as a dependency. This answer from a related question provides some sample code on using moment.js to format a date in JavaScript.
If for some reason moment.js is not available, you can fall back to the native JavaScript functions. See this answer from the same question as I previously referred to.
I am trying out the dialog from jquery UI. All the online demos use flora.css.
I can't get the dialog to display correctly with the css file generated by the themeroller application.
Am I missing something? Should these things work out of the box?
Update: Thanks Brock. When I cleaned up my code to make a sample, I realized that the HTML in demo.html (that comes with the themeroller.zip) is a little too verbose.
All I needed to do was give the dialog div the attribute class="ui-dialog" like this:
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
I'll accept your answer. Thanks for your time.
I think it is because you have the classes different.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (custom)
Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.
I've done modals before and I've never even defined a class in the tag. jQueryUI should take care of that for you.
Try getting rid of the class attribute or using the ui-dialog class.