Add jQuery Calendar plugin to gvNIX sample project - javascript

I am trying to add a jQuery calendar plugin, located at http://keith-wood.name/calendarsPicker.html
to the gvNIX project sample which uses a datePicker (I just wanted to see how it works).
My goal is to replace this datePicker with the plugin provided by K.Wood. to have calendars other than gregorian.
Unfortunately i did not succeed in doing so.
Here is the file i think i should modify from the gvNIX project
http://pastebin.com/5uvuDzfg
I am not a Javascript developer, so i do not know where to call the new calendar to make it work.
Thank you for your time.

If someone need it i write what i have done.
I implemented the Jquery plugin but to replace the current date picker i changed for dojo, because Roo using it.
https://dojotoolkit.org/reference-guide/1.9/dojox/date/umalqura.html I change the load-script to load the desired dojo.js files and create a copy of the datetime tag to modify it with my new picker. ( For being able to set a new tag you need to recompile the project once ). My datePicker is working well. It stored the date in gregorian any way.
In the load-script
<spring:url value="/dojox/date/umalqura.js" var="umalqura_url" />
<spring:url value="/dojox/date/umalqura/Date.js" var="umalqura_date_url" />
<spring:url value="/dojox/date/umalqura/locale.js" var="umalqura_locale_url" />
...
<script>dojoConfig = {parseOnLoad: true}</script>
...
<script language="JavaScript" type="text/javascript">dojo.require("dijit.form.DateTextBox");</script>
And in the new datetime.tagx
<input id="_${sec_field}_id" name="${sec_field}" data-dojo-type="dijit.form.DateTextBox" datePackage = "dojox.date.umalqura" constraints="{datePattern:'EEEE dd MMMM yyyy'}" />
I did not figure a way to convert back the date when displaying because it's in gregorian in database.
I tried the same with a input to only register the string, but even then dojo convert it in gregorian.

Related

Detect changes in django-bootstrap-datepicker-plus with JQuery

I am using django-bootstrap-datepicker-plus package, and I am trying to display an alert when the date is changed. However, jquery does not seem to detect any changes to the date.
Following this question Detect change to selected date with bootstrap-datepicker only works when I add the JQuery UI CDN to my code, which causes a problem as two datepickers appear. Is there a way to get JQuery to detect a change in django-bootstrap-datepicker without adding JQuery UI code?
forms.py
from django import forms
from bootstrap_datepicker_plus.widgets import DatePickerInput
class ExampleForm(forms.Form):
DOB = forms.DateField(required=False, label="Date of Birth",
input_formats=['%d/%m/%Y'],
widget=DatePickerInput(format='%d/%m/%Y')
)
Html
<div class="col-12 col-md-6 mb-0 p-1">
{{ form.DOB|as_crispy_field }}
</div>
Rendered HTML
There is a lot of JS packages with similar [date,time]picker functionality. django-bootstrap-datepicker-plus uses eonasdan picker, according to the docs. They use different event names. Eonasdan implementation prefixes all events with dp. namespace, as stated here, so the following should work:
$('#id_DOB').on('dp.change', ev => myHandler(ev));

Month Date Range Picker - Vue.js

I'm looking for a library like bootstrap date-picker for Vue.js .
But I need one where I can make some configuration like this one I'm using in a bootstrap daterange-picker
$('.input-daterange').datepicker({
format: "mm/yyyy",
language: "es",
autoclose: true,
startView: 1,
minViewMode: 1
});
I have some example code here https://stackblitz.com/edit/js-jcldh8
I'm having some trouble using Vue js with this library so I hope someone can help me.
Thanks.
I`m using element ui for Vue.js.
https://element.eleme.io/#/en-US/component/date-picker
<el-date-picker
v-model="birthdate"
type="date"
placeholder="Pick a Date"
format="mm/yyyy"
value-format="yyyy-MM-dd">
</el-date-picker>
There are so many libraries for Vue js that you can use easily like Element Ui, Vuetify etc.
but you can use Element UI that is very easy to use and it has so many nice features like bootstrap.
you can install it by npm or use by cdn, see documentation here
and components date picker
Calling Element Ui date picker:
<el-date-picker
v-model="value2"
type="date"
placeholder="Pick a day"
:picker-options="pickerOptions1">
</el-date-picker>
For Vuetify you can go here, it also can install in npm node or use cdn.
Vuetify date picker:
<v-date-picker
v-model="picker"
:landscape="landscape"
:reactive="reactive">
</v-date-picker>

Using a CSS class, but can't find where it is defined

I have been searching for an easy way to make a month/year picker for an ASP.NET Core application I'm making. I found this fantastic one on jsfiddle. It uses the following resources:
bootstrap-datepicker.min.js
datepicker.min.css
bootstrap.min.js
bootstrap.min.css
Here is the code:
var startDate = new Date();
var fechaFin = new Date();
var FromEndDate = new Date();
var ToEndDate = new Date();
$('.from').datepicker({
autoclose: true,
minViewMode: 1,
format: 'mm/yyyy'
}).on('changeDate', function(selected) {
startDate = new Date(selected.date.valueOf());
startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
$('.to').datepicker('setStartDate', startDate);
});
$('.to').datepicker({
autoclose: true,
minViewMode: 1,
format: 'mm/yyyy'
}).on('changeDate', function(selected) {
FromEndDate = new Date(selected.date.valueOf());
FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
$('.from').datepicker('setEndDate', FromEndDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<div class="form-group">
<label>First check in:</label>
<input type="text" class="form-control form-control-1 input-sm from" placeholder="CheckIn">
</div>
<div class="form-group">
<label>First check out:</label>
<input type="text" class="form-control form-control-2 input-sm to" placeholder="CheckOut">
</div>
<br/>
<div class="form-group">
<label>Second check in:</label>
<input type="text" class="form-control form-control-1 input-sm from" placeholder="CheckIn">
</div>
<div class="form-group">
<label>Second check out:</label>
<input type="text" class="form-control form-control-2 input-sm to" placeholder="CheckOut">
</div>
I have made this work in my project in Visual Studio, however, it doesn't seem to be able to find the classes "form-control-1" (and 2) and "from" and so it gives me a little squiggly line indicating so.
I started looking through all the css files included and I cannot find a reference to those classes in any file. If I remove them, the month selector does not work. Can someone help me understand where that functionality is coming from? Does anyone know where those classes are defined?
The from and to are not being used for styling, they are being used in the code that you posted. $('.from').datepicker() $('.to').datepicker().
You can safely delete the form-control-1 and form-control-2 classes.
Those classes can be fuctional classes, not attached to any styling but used to select or manipulate the elements.
Thats probably why you wont find anything. Search through the js files and you will find something.
Since removing the class breaks the functionality, it's probably being referenced from JS. It may be that the JS is calculating the name of the class, something like "form-control " + i for example.
Your best bet to see where this is defined is to use the browser inspector. For example, in Chrome, right-click the page and choose "inspect" to get this UI, which shows you each css class and where they are declared or re-declared in the css hierarchy.
When using Javascript it can be very useful to use CSS classes which are not attached to any styling, but are instead used as semantic references for jQuery selectors to use later.
This can be very useful when trying to attach multiple semantic meanings to an element. You can have one element can have many semantic tags. I use this in complex components to be able to dynamically tag elements that I can later manipulate or check the class name. This is especially useful if you are generating elements from a server-side language and trying to tag them semantically so that they can be manipulated later from Javascript/jQuery. It think it is much easier to add a dynamic class string from the server side than to put in data attributes.
One example of this that I use is for validation information to be attached to an element. I generate the elements in a server-side class (including what type of validation it should have) which outputs a CSS class string, then when I submit the form in Javascript, I get all elements with specific classnames and check if their contents match the validation type.
The code sample you posted does a similar thing, where it wants to use a jQuery plugin on all elements with a certain class. Instead of direct styling, it uses them as semantic markers that those elements should be transformed in a certain way to be datepickers (which are documented here: https://jqueryui.com/datepicker/). Code for jQueryUI uses this a lot to be able to simplify which elements should be used-- and it can be easier to add new elements that are datepickers, since you simply add a class to the new one instead of having to add a new jQuery reference to it (especially if you don't know exactly how many of them there will be on the page when you write the Javscipt code).
If you are ever in a similar instance and looking for a different way to store data on elements without inadvertent effects and it is pure Javascript without server side rendering, data-* attributes in HTML5 are a way to do it (and a simple library could be developed to add them to elements from a server side language). Just use jQuery selectors with jQuery("[data-mytagname=someValue]") to select.
A word of caution that if you use classes like this as semantic tags, I would be careful to avoid commonly used class names, since you could inadvertently get extra styling when a co-worker (or yourself) decides to use that in an element. ;)

How to obtain the Date value from a p:calendar component in JavaScript?

I don't know how to obtain the Date value of a <p:calendar> in PrimeFaces component using JavaScript
This is my component
<p:calendar id="calendarInicio"
widgetVar="horaInicioSpin"
value="#{hbean.horaInicial}" timeOnly="true"
pattern="HH:mm" required="true"/>
I need to obtain the hour value of the component because I'm gonna send that value into other <p:calendar> component, using JavaScript.
Can anyone give me an idea? Thanks in advance...
PrimeFaces provides a powerful client side API. Make use of it!
Add a widgetName to your calendar. This way it is way easier to handle to component on the client side
<p:calendar widgetVar="mycalendar" ... />
write your custom JS, using the PrimeFaces client side API
<h:form>
<p:calendar widgetVar="mycal1" timeOnly="true" />
<p:calendar widgetVar="mycal2" timeOnly="true" />
<p:commandButton
onclick="var d = PF('mycal1').getDate(); d.setHours(d.getHours() + 1); PF('mycal2').setDate(d);" />
</h:form>
Inside JS, you are able to modify the returned date according to your requirements and afterwards use the .setDate() function to set your date in the other calendar.

How can I pass options to AngularStrap timepicker?

I'm new to AngularJs and after some serious effort, I finally got the AngularStrap DatePicker and TimePicker to work.
Now I'd like to pass some options to the TimePicker to e.g. use 24-hour format (showMeridian = false). Whereas the DatePicker can be configured with HTML5 data attributes (e.g. data-date-format="dd.mm.yyyy" data-date-weekstart="1"), this seems not to work with the TimePicker.
How can I pass options to the TimePicker?
Configuration options for both plugins can be set with the use of data attributes.
<div class="bootstrap-timepicker"/>
<input id="timepicker" data-template="modal" data-minute-step="1" data-modal-backdrop="true" type="text"/>
</div>

Categories

Resources