Develop Reference

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));

How to select date from calendar that has readonly property using Playwright?

I am new to the playwright framework came from protractor background and want to know the method for the selector to select a date in the playwright.
selctor.fill(date) //not working

fill is used like this:
page.fill('selector', valueToFillWith)
so if date element is 'id="date"'
page.fill('[id="date"]', '08/21/2022')
https://playwright.dev/python/docs/api/class-page#page-fill

page.fill('[id="date"]', '08/21/2022') // not working
like this：
<input readonly="" placeholder="Select date" class="ant-calendar-picker-input ant-input" value="2022-02-25"\>

After selecting a date and try to console log it it shows undefined

<div class='col-sm-6'>
<input [(ngModel)]="date" id="date" name="date" class="form-control" required/>
</div>
$(function () {
$('#date').datetimepicker({
format: 'DD/MM/YYYY hh:mm'
});
});
I'm using angular js after I choose a date and try to console.log the value it shows Undefined but when I modify it and console.log the value it shows the string inside the input

First of all, [(ngModel)] is used in Angular 2, not AngularJS. In Angular 2 you have to use the command ng-model.
Second, ng-model binds the date to a $scope variable called date. If you want to access the date in a controller, use $scope.date inside of your controller.
Third, you should never use JQuery to get variables from your view. Mixing up JavaScript frameworks like JQuery and AngularJS will might cause problems. It is also very messy code style.

Add jQuery Calendar plugin to gvNIX sample project

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.

How to change the displayed date format in Datepicker?

I use JQuery UI to input dates and use DatePicker for that.
I need to have date displayed like yyyy-mm-dd.
I tried this solution suggested in this answer in the console: how to change dateformat of jquery Datepicker
$( ".date-input" ).datepicker({ dateFormat: 'yy-dd-mm' });
returned in the console:
[<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_TO" title=​"Enter date you plan to go to your destination" placeholder=​"Go to date" type=​"date" value=​"2014-05-08 00:​00:​00" id=​"dp1399632827005">​,
<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_FROM" title=​"Enter the date when you plan to come back" placeholder=​"Come back date" type=​"date" value=​"2014-05-13 00:​00:​00" id=​"dp1399632827006">]
But no changes took effect.
So, how to change the displayed date format in Datepicker ?
Later edit:
If I change the type="date" into type="text" (see:http://jsfiddle.net/Zksv5/) the code works, but I want to make it work for the type date format.
So, how to change the displayed date format in Datepicker when input has the type="date" attribute?

refer this working jsfiddle
<input type="text" value="" class="date-input" id="TxtStrtDate" >
$(".date-input").datepicker({
dateFormat: 'yy-dd-mm'
});

What you are doing is the right way to format the datepicker in jQuery UI.
See here: http://jsfiddle.net/abhitalks/w5YQk/
HTML:
<input id="dated" />
jQuery Code:
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
Update (based on your comment on HTML5 date type):
Without repeating what has already been described here:
Is there any way to change input type="date" format?:
The short answer is that the wire format in specifications is
"yyyy-mm-dd", but the browsers are free to decide on the
presentation. Some browsers (like Chrome) present the date as in
client machine's regional settings, whereas others (like Opera)
present the wire format. So, you can't do much here.
The jQuery UI datepicker will fail when the input is HTML5 date
type. In fact it will work only when the format is set, and that
will convert itself to the wire format of the date type input! So,
again you can't do much here.
Ideally, you should present a jQuery (or any other) datepicker
only if there is no browser support for HTML5 date type. If it is supported, the default browser implementation should be preferred.
So, you have two options here: (a) Use regular text type and attach datepicker to provide common look and feel. (b) Rely on date type and fallback to datepicker only if browser doesn't support HTML5 date type.
You could use any library of your choice to take decisions based on browser feature detection. (e.g. Modernizr etc.)
If you want to do it yourself, then this example will help you (explanation embedded as code comments):
Demo: http://jsfiddle.net/abhitalks/w5YQk/3/
HTML:
<input id="dated" type="text" /> <!-- Regular "text" type input -->
<input id="dated2" type="date" /> <!-- HTML5 "date" type input -->
jQuery Code:
var dtType;
// We know this is text type so attaching datepicker
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
// We check the type of the second element
dtType = document.getElementById("dated2").type;
/*
If the browser supports html5 date type, then it will return "date".
If browser doesn't support, it will default to "text" type.
*/
if (dtType == "text") {
// Attach datepicker only if type is "text"
$("#dated2").datepicker();
}
This takes advantage of the fact that the browsers which do not support the HTML5 date type will default to text and so the element will be of text type in the DOM.
Hope that helps.