I'm using date-range picker of ngx bootstrap and it is working totally fine. But I want to use it for month-range picker.Is there any way I can customise and use it that way?
I've tried passing property like this [bsConfig]="{ dateInputFormat: 'YYYY-MM' }" and omitting date from it but while selecting I still need to select date.
<input class="form-control" name="dob" placeholder="Date of Birth" type="text" bsDatepicker [(bsValue)]="bsValue" [bsConfig]="{ dateInputFormat: 'YYYY-MM' }">
People who are still struggling with it can set min view mode of datepicker using minMode property
For the month range picker, in this case, minMode is set to 'month'.
Refer to the official docs for working example and explanation.
https://valor-software.com/ngx-bootstrap/#/datepicker#min-mode
Related
Been trying to find the cause of this issue but I have an input field for the Flatpickr date time but it doesn't open the native Iphone date picker.
This only happens when the field is required, on Iphone 11 and below versions no matter if it's Safari or Chrome.
Another strange thing is that we have other environments too and the date picker opens up in those but the HTML for the input is the same.
Here's the input html:
<div class="form__field-group u-full-width dw-mod">
<div class="u-full-width">
<label for="DateOfBirth" class="u-pull--left">Date Of Birth <span class="required dw-mod">*</span></label>
</div>
<input id="DateOfBirth" required="true" name="DateOfBirth" type="hidden" value="2004-01-01" class="u-full-width dw-mod flatpickr-input">
<input class="u-full-width dw-mod flatpickr-input flatpickr-mobile" step="any" tabindex="1" type="date" required="" placeholder="" value="2004-01-01" max="2004-10-03">
</div>
And the Flatpickr script:
document.addEventListener("DOMContentLoaded", function () {
flatpickr("#DateOfBirth", {
mode: 'single',
maxDate: '1/10/2004 10:03:44 AM'
});
});
Video of the issues: screencast.com/t/JOnB4CpZvg
Did anyone had the same issue before? How to solve this bug?
Thanks
Reading the documentation of Flatpickr
You can try to use the config option disableMobile.
disableMobile information:
Set disableMobile to true to always use the non-native picker.
By default, flatpickr utilizes native datetime widgets unless certain options (disable) are used.
I'm working with HTML5 elements on my webpage. By default, on the click of the date picker icon, the current date is highlighted.
<input id="dateField" type="date" name="date-field"/>
How can I configure it to highlight a specific date instead of the current year? say 1st Jan of the current year?
I tried to do this
document.getElementById('dateField').defaultValue = '2021-01-01'
and
<input id="dateField" type="date" name="date-field" value="2021-01-01"/>
but this will not only highlights but also selects the date.
You can use the value attribute like this:
<input id="dateField" type="date" name="date-field" value="2017-06-01"/>
You can learn more about this here.
I'm using tcal JS calendar on my website. I included tcal.css and tcal.js.
<INPUT TYPE="text" Name="DOB" class="tcal" required="yes">
The calendar displays correct, but it doesn't format the date. If I type 08031985, I would like that it automatically format to 08/03/1985. I don't want to have to enter the "/". Is it possible?
Thanks
If I am getting you correctly, you are not supposed to type the date but just pick it from the drop down pop up with the calendar.
I had an input field with type="datetime" where it has min-date condition as todays date.The flow is, if the date is valid,then submit button is enabled or else it will be in disabled state.Its working fine.
But now if the user selects the date which is invalid(old date),the date will be displayed in text box but the button will be disabled.
I want to use ng-change such that if user selects invalid date(old date),on-change event should make the text field as empty and want to display error message..How can we get this ng-change working
Html:
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-date="{{today}}" min-view="date" maxlength="10" format="dd/MM/yyyy"
ng-model="$ctrl.newClient.DateInput" required="true"
ng-change="$ctrl.checkdate">
controller:
$scope.today= new Date().toISOString().split('T')[0];
this.checkdate=function(){
};
Can someone help.Thanks
You can use angular-pikaday, it's easier to manage dates with this lib, so the user can select the date and you can manage it after the selection on a calendar. With pikaday you can set the min selectable date, so you can delete your checkdate function.
Read also How can we make all the past dates in the calendar unselectable? . Maybe it's another solution :)
A more user friendly solution is using datetime-local and min attribute which does not let the user to select a date before that.
Example:
<input type="datetime-local" id="exampleInput" name="input"
ng-model="example.value" min="2017-01-01T00:00:00" />
Working Plunkr
I am trying to add a calender control in knockout editable grid I have added a calender in my needed Column when the grid rendered the first row added was attached with the calender but all the dynamically added rows I add (generated with the same id) not attached with the Calender.
So what should i do ?
<td><input type="text" id="Calender" class='span11 required' data-bind="value: Date" /></td>
i'm using the following example:
http://jsfiddle.net/rniemeyer/7RDc3/
you have to do a date custom binding, if you dont want to write your own, there is a good datepicker here that is ready to work with ko. docs are not very clear but just see source code and you will there is all you need.
this is how you use it:
<input type="text" class="form-control input-sm borderless-control" placeholder="Seleccione Fecha"
data-bind="datepicker: $data.date, datepickerOptions: { format: 'LL' }" />
You will need moment js too wich is a really good library to work with dates
hope it helps!