When I'm editing an existing record and open the Bootstrap DateTimePicker it shows today's date, instead of the input value date. When I close the calender (without changing the date) and reopen it again, it DOES show the month of the record value.
Can someone tell me how to initially get it to open on the right date?
HTML:
<div class="input-group date" id="datetimepicker5">
<input type="text" class="form-control" value="07-09-2017">
<span class="input-group-addon" for="Date">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
JavaScript DateTimePicker:
$('#datetimepicker5').datetimepicker({
locale: 'nl',
debug: false,
useCurrent: false,
calendarWeeks: true,
allowInputToggle: true,
format: 'DD-MM-YYYY'
});
I had same issue in version 4.7.14, but this works fine in latest version 4.17.47
Related
I am trying to automate a form with Cypress. I managed to get all the input fields except the birth date field.
CSS looks like this:
CSS picture
And my code is:
cy.iframe('#oneid-iframe').find('#InputDOB').type('01011990').should("have.value", "01/01/1990")
Unfortunately Cypress fails to type this value in the field.
Thank you in advance for your help.
Kind regards,
You should look at the devtools to see what's in the DOM.
This problem can happen if the HTML in your screenshot is inside a shadow root, in which case this would be your code
it('tests DOB', {includeShadowDom: true}, () => {
cy.iframe('#oneid-iframe')
.find('#InputDOB')
.type('01011990')
.should("have.value", "01/01/1990")
})
This is just a guess, and the question is why do other input work.
But you should try it in case.
Try this:
cy.get('#oneid-iframe').its('body').find('#InputDOB').click().type('01011990')
Can you try this?
cy.iframe('#oneid-iframe').find('#InputDOB').invoke('removeAttr','type').type('01/01/1990').should("have.value", "01/01/1990");
<label data-testid="InputDOB-wrapper" class="input-text input-DOB displayed" for="InputDOB">
<span data-testid="InputDOB-title" class="field-name">Birth Date</span>
<div data-testid="InputDOB-container" class="input-wrapper field-error"><span class="mask"><span class="birth-date">Birth Date </span>dd/mm/yyyy</span><input type="text" autocapitalize="none" autocomplete="on" autocorrect="off" spellcheck="false" tabindex="0" id="InputDOB" data-testid="InputDOB" inputmode="numeric" aria-label="Birth Date" aria-required="true" aria-invalid="true" aria-describedby="InputDOB-error" value=""></div>
<div class="error-container input-error input-error-text displayed" style="height: 30px;">
<p class="input-error input-error-text displayed" id="InputDOB-error" data-testid="InputDOB-error" role="alert">Your birth date is required.</p>
</div>
Im using angular 12 and ngx-bootstrap 7.1.2
When using the datepicker with timepicker, how can i format the timepicker?
In this case i want to remove the AM/PM from it and allow the user to select the time in the 24h format.
This is the code I'm using
<div class="text">
<input id="dpReview"
name="dpReview"
type="text"
required
#allocationDatepicker
class="form-control"
bsDatepicker
placeholder="Select an assignment date"
[(ngModel)]="allocDate"
[bsConfig]="{withTimepicker: true, dateInputFormat: 'MMMM DD YYYY, HH:mm'}"/>
</div>
Thank you in advance
In my vuejs application I have a modal with a form component(create-app.vue) to add some records to the system.
In that form I have a field to set a starting date.
<div class="w-1/2 mr-2">
<p class="text-certstyle-titles font-bold text-sm mb-1">Start date</p>
<div class="h-12">
<cs-date-picker
id="startDate"
v-model="project.start_date"
:default-selection="true"
:name="`${identifier}-start_at`">
</cs-date-picker>
<validator
:identifier="`${identifier}-validate-project`"
:rules="validations.startDate"
:name="`${identifier}-start_at`"
/>
</div>
</div>
For this field my users should be able to pick up a date, which is today's date or a future date.
I have defined my validation rules in a different vue, called validator.vue.
For the above required date validation I have following rule in my validator.vue.
const dateIsNowOrLater = (value) => {
return !moment(value, 'DD-MM-YYYY').isBefore(moment());
};
And in my create-app component I have the following
startDate: {
required: {
message: 'Project Start date is required.'
},
dateIsNowOrLater: {
message: 'Date must be now or future.'
},
},
This works fine when I pick an old date
But this shows me the error toast even when I select the today's date as well... What changes do I need to make, if I need to accept the today's date?
I'm trying to get the following Bootstrap 3 plugin to work:
http://eonasdan.github.io/bootstrap-datetimepicker/Options/
One of the requirement is Moment.js:
http://momentjs.com/docs/#/customization/
My HTML is:
<div class="container">
<div class='col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
The JS:
<script type="text/javascript" src="/clip-art/static/datepicker/moment.js"></script>
<script type="text/javascript" src="/clip-art/static/datepicker/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/clip-art/static/datepicker/css/bootstrap.min.css" />
<link rel="stylesheet" href="/clip-art/static/datepicker/css/bootstrap-datetimepicker.min.css" />
$(function () {
$('#datetimepicker6').datetimepicker( {
maxDate: moment(),
allowInputToggle: true,
enabledHours : false,
//format: moment().format('YYYY-MM-DD'),
format: moment().format('LLLL'),
locale: "en"
});
$('#datetimepicker7').datetimepicker({
useCurrent: false, //Important! See issue #1075
allowInputToggle: true,
enabledHours : false
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>
I'm a bit confused, as I can't seem to get the format to work. If I use this to set the format:
format: moment().format('LLLL'),
I get a REALLY weird date! (not even sure what language that is??)
If I change it to:
format: moment().format('YYYY-MM-DD'),
The date DOES show correctly, but then the dropdown stops working for me!
Can anyone suggest where I'm going wrong? I've done loads of playing around, googling etc, but I still can't figure it out :(
BTW: The dropdown itself works when I don't try and edit the format of the date:
Ok, well I'm not sure why it didn't like taking a moment().format() value, but after checking the GitHub issues, I came across an issue with the format. It led me to this example:
https://jsfiddle.net/dugujianxiao/ad64awL7/11/
So after tweaking my code to use format: 'YYYY-MM-DD' instead, and this seems to have sorted it:
$('#datetimepicker6').datetimepicker( {
maxDate: moment(),
allowInputToggle: true,
enabledHours : false,
locale: moment().local('en'),
format: 'YYYY-MM-DD'
});
The date is correct, as well as the format.
Hopefully this helps someone else!
As wanted, dialog box for login is opened, but password is already filled in, although I put password field with value=""
<div id="dialog" title="Connexion aux données">
<form>
<fieldset class="ui-helper-reset">
<br>
<div>Nom du foyer</div>
<input type="text" name="foyer" id="foyer" value="" class="ui-widget-content ui-corner-all"><br>
<div>Mot de passe</div>
<input type="password" name="password" id="password" value="" class="ui-widget-content ui-corner-all"><br>
<div style="font-size:0.6em;padding-top:6px;">Afficher les caractères</div>
<input type="checkbox" name="reveal" id="reveal" value="" class="ui-widget-content ui-corner-all" style="width:20px;">
</fieldset>
</form>
</div>
and Jquery code in head part
var $dialog = $( "#dialog" )
.dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
close: function(event,ui) {
$(this).find('form')[0].reset();
}
});
$dialog.dialog('open');
I have also cleaned browser cache but nothing changed.
By clicking on reveal checkbox I saw password is the same I have used in previous dev for testing few months ago.
Why this happens and how to avoid it ?
This happened for me too. After debugging I found out that it was the password that browser had saved and it was loading it onto the password field on page load.
After clearing the saved password, I was able to get the empty password textbox.
This could be the case with you too.