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
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>
I am currently working on a dropdown form in Vue.js. The user should be able to select from what time period he would like to see the data. I would like to then submit his chosen value and call a function in js that will handle his request appropriately.
i have tried to submit the value by "onchange" but have not managed to find the right solution. I am thankful for any help.
this is the code:
<div>
<div class="stats">
<!--drop menu-->
<form>
<label>Show feeds from <select id="input" name="ddlselect" onchange="submit">
<option>Auswählen</option>
<option value="Today">Today</option>
<option value="ThisWeek">This week</option>
<option value="PrevWeek">Previous Week</option>
</select> </label>
<br>
</form>
<br><br>
<!--data from the api-->
<div id="robot_data" v-for="maschine in userdaten.maschinen" :key="maschine.maschineId">
{{maschine.bezeichnung}}
<div id="feeds" v-for="feed in maschine.feeds" :key="feed.feedsId">
<!--use the var 'today' insted of the date string-->
<div v-if="feed.datum >= '2020-10-03' + ' 00:00:00' && feed.datum <= '2020-10-03' + '23:59:59'">
ID: {{feed.feedsId}} Datum: {{feed.datum}}
</div>
</div>
</div>
</div>
</div>
</template>
You want to add your event to the tag.
Also, the way to use events in Vue is like this v-on:change or #change.
So it should look like this:
<form v-on:change="yourMethod">
Here is more info on Vue events.
Below are my code for 2 input fields in vuejs. The current validation rule is they both need to be numeric. I've read the official document here.
I need to add another rule, that max-amount must be bigger than min-amount. The trick is min-amount is user input, not pre-determined. How should I implement this customize validator?
<div class="min-section">
<label>Min</label>
<input type="text"
class="uk-input"
name="min-amount"
v-validate="'numeric'"
v-model="minAmount" />
</div>
<div class="max-section">
<label>Max</label>
<input type="text"
class="uk-input"
name="max-amount"
v-validate="'numeric'"
v-model="maxAmount"/>
</div>
You could bind min_value in the v-validate rules of the max-amount <input>:
<input name="min-amount" v-model="minAmount">
<input name="max-amount"
v-validate="'numeric|min_value:' + minAmount"
v-model="maxAmount">
demo
Also note if you don't have a specific reason to use a text input, you should consider using <input type="number"> (instead of <input type="text">) so that the user could only enter numeric values.
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
I am working with a typo3 extbase extension and I got stuck with this particular point.
Can we have a typo3 fluid equivalent for
<input type="date" />
I need to have a date picker in my extension. Is it possible with typo3 fluid?
Typo3 8.7 lets you utilise jquery datepicker.
First, add the datepicker module to your extension (ext_localconf.php):
//If you want to use it in the BE, include the If line
if(TYPO3_MODE === 'BE'){
$pageRenderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRenderer::class);
$pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/DateTimePicker','function() { initScript(); }');
}
...then you can use this fluid textfield to initiate the datepicker:
<f:form.textfield type="datetime" property="dateexample" id="dateexample" class="form-control t3js-datetimepicker t3js-clearable" data="{date-type:'datetime',date-offset:'0'}" value="{dateexample->f:format.date(format: 'd/m/Y')}" /><span class="input-group-btn"><label class="btn btn-default" for="dateexample"><span class="fa fa-calendar"></span></label></span>
I recommend you include an external library for this. For example, I have used jquery.datetimepicker, could you find it here .
Modifiy your Typoscript setup.ts and add next lines
page {
includeCSS {
datetimepicker = EXT:your_extension/Resources/Public/Css/jquery.datetimepicker.min.css
}
includeJS {
JqueryUITimepicker = EXT:your_extension/Resources/Public/Js/jquery.datetimepicker.full.min.js
}
}
In your Fluid Template use the next code:
<f:form.textfield type="text" id="datetimepicker" name="PublishDate" />
And in JS file include
$('#datetimepicker').datetimepicker();
The argument in the Controller will be PublishDate but receive it as string you have to convert with PHP in DateTime or the data type that you use.
Update for 10.4:
Add the datepicker module to your extension (ext_localconf.php):
if(TYPO3_MODE === 'BE'){
$pageRenderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRenderer::class);
$pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/DateTimePicker');
}
Then you can use this Fluid in a TYPO3 Backend Module:
<div class="input-group">
<input type="text" id="my-unique-identifier"
class="t3js-datetimepicker form-control t3js-clearable hasDefaultValue" data-date-type="date"
data-formengine-input-name="my-input-field-name"
data-formengine-input-initialized="true">
<span class="input-group-btn">
<label class="btn btn-default" for="my-unique-identifier">
<core:icon identifier="actions-calendar-alternative" size="small" />
</label>
</span>
</div>
The value data-date-type can be set to "date" or "datetime".
Don't forget to add core namespace to your Fluid template for the Icon API:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
data-namespace-typo3-fluid="true">
Fluid is not shipped with a date picker or required a specific one.
In fact you could use any HTML date picker.
<f:form.textfield type="date" additionalAttributes="{min:'{f:format.date(date:\'now\',format:\'Y-m-d\')}'}"
name="{name}" value="{value}"
/>
You need to use modern browsers. It should be work since TYPO3 6.2. (docu)