How to set option ngx-mydatepicker get MM/yyyy - html

I don't known how to set the option ngx-mydatepicker to get MM/yyyy. Please help me.
Thank you.
<input class="form-control" style="float:none" placeholder="mm/yyyy" ngx-mydatepicker name="mydate"
model="buyDate" [options]="myDatePickerOptions" #dp="ngx-mydatepicker" [(ngModel)]="date" [ngModelOptions]="{standalone: true}"/>
private myDatePickerOptions: INgxMyDpOptions = {
dateFormat: 'dd/mm/yyyy'
};

Looking at the code for formatting Link to code, the module does not allow you to have dates in that format. You will need to a custom formatting. Take a look at Angular2-moment
What is the initial format of your dates?

Related

How to set datatime today now for search?

I want to refine my value today but i cant set. Can help me!
<input type="date" name="start" value="2022-12-25"/>
<input type="date" name="end" value="2022-12-25"/>
I want to refine my value today but i cant set. Can help me!
You can try to set the default date with js:
<input type="date" name="start" />
<input type="date" name="end" />
#section Scripts{
<script>
$(function(){
document.getElementsByName('start')[0].valueAsDate = new Date();
document.getElementsByName('end')[0].valueAsDate = new Date();
})
</script>
}
result:
the information you provided is not sufficient. Provide which language/technology you are working, i figured it out that you are looking for help in Microsoft technology stack.
Coming to the point you want to print/show Current Datetime value, for that, According to me Create variable storage Current Datetime and bind it to the Html
for Ex.
var CurrentDateTime = DateTime.now;
this will set Current date time to the variable and in HTML MVC if you are using razor view / pages
you just need to bind that value to it.
there are multiple ways for that.
but here i would like to GO with ViewBag approach
you can do like following
ViewBag.CurrentDatetime = DateTime.Now;
And in your UI cshtml file
retrieve that stored value from ViewBag like following
#{
var CurrentDatetime = ViewBag.CurrentDatetime;
}
<input type="date" name="end" value=#CurrentDatetime/>
Note: If you not find this answer Helpful, i am requesting you to Provide some Detailed and precise Explanation regarding what you exactly looking for.
Thanks.

HTML 5 Input type='date' disable keyboard input

I am working on a Chrome Packaged App so my code should only work in Chrome.
I have the following input
<input type="date" />
https://jsfiddle.net/jhbo4q2k/
On Chrome this automatically adds a DatePicker. I would like to only keep this Datepicker and disable the input by keyboard.
Is this possible?
EDIT:
The accepted answer works. Just be wary of this
https://developer.chrome.com/extensions/tut_migration_to_manifest_v2#inline_scripts
You cant use inline scripts in a packaged app.
You can use onkeydown and prevent user from entering the value.
<input type="date" onkeydown="return false" />
For ReactJS above solutions don't work
I had to do:
<input type="date" onKeyDown={(e) => e.preventDefault()} .... />
Hi you can prevent keyboard popup by using onfocus="blur()". Since when the element has the focus we will remove the focus out of it(native keyboards won't show) however with onclick we can continue with our operations.
<input type="date" class="form-control" onfocus="blur()" onclick="dosomework()" name="some-name" id="some-id" >
<script>
function dosomework(){
alert('hi');
}
<script>
If using django forms;
datetime = forms.DateTimeField(widget=forms.DateTimeInput(attrs={
'onkeydown': 'return false' # If you want to disable the keyboard
"onfocus": 'blur()' # If you also want to disable virtual keyboard(on smartphones).
}))
OR
document.getElementById('id_datetime').onkeydown = (e) => {
e.preventDefault();
}
document.getElementById('id_datetime').setAttribute('onfocus', 'blur()');
Django simply adds 'id' in front of the input field name and sets that as its id. Here the input field name is datetime, so the id will be id_datetime.
Easy Way To Enable & Disable Input Date:
Step 1: create input date.
<input type="date" id="dateEnd">
Step 2: create enable and disable button
<button onclick="disableBtn()">Disable Date Field</button>
<button onclick="undisableBtn()">Undisable Date Field</button>
Step 3: Javascript for enabling and disabling
<script>
function disableBtn() {
document.getElementById("dateEnd").disabled = true;
}
function undisableBtn() {
document.getElementById("dateEnd").disabled = false;
}
</script>
Hope, this may help you.
e.preventDefault() will do the job...
const inputDate = document.querySelector("input");
inputDate.addEventListener("keydown", function (e) {
e.preventDefault();
});
<input type="date">
Disabling keyboard input is a great way to make your application less accessible to people with disabilities and make it less user friendly in general, in my opinion keyboard input is much easier to use than date pickers, especially if the expected format is clear. You'd be better off doing some basic field validation to ensure that the input is sensible before letting it be submitted, the HTML date field already has strong validation on it by default on Chrome Firefox and Edge.

adding custom filter in yii2 grid

I have created a yii2 grid with crud. In the date column I want a filter which has two inputs, one is from date and another is to date, and it filters the data between those two dates.
All has been done.
For your knowledge I am putting this answer.
<form action="http://localhost/singla_cons/backend/web/attendenceview" method ="get">
From:<input type="date" class="fdate" name="AttendenceviewSearch[from_date]" >
To:<input type="date" class="fdate" name="AttendenceviewSearch[to_date]">
<input type="submit" val ue="Get">
</form>
Use this in your view function.
after that in your model function
public $from_date;
public $to_date;
->andFilterWhere(['>=','date',$this->from_date])
->andFilterWhere(['<=','date',$this->to_date]);
and all is done.

HTML - How to check an answer field if it has some specific words

I wan to make a webpage with some questions where you have to answer, for example there is this:
How many money do i earn?
The answer can be anything but it has to have "money" in his answer, for example
I earn 10 money.
How can i check the text that the user puts in the answer field and check if it has some specific words in it?
I hope you understand me and that you could help me.
If you don't understand, please ask me.
You can do this using JavaScript. more specifically you can match the string entered with something you provide using the match function.
var myString = "I earn money";
var matches = string.match(/money/g);
Returns an array with the matches... if a count of the array elements is greater than 0, you have a match.
Javascript match
You can use .search() : input.value.search("money").
search returns the number of matches so you can just check input.value.search("money") > -1
while .match() returns an array of matches
Example:
in HTML
<head>
...
include jquery library
...
</head>
...
<input name="answer" type="text"/>
in a .js file
$(document).ready(function(){
$("input").change(function(){
if($(this).val().search("money") >= 0) ... ok
else...
});
});
You can do this via PHP preg_match(pattern, subject);
http://php.net/manual/en/function.preg-match.php
For example you can make HTML form, get value from it via $_POST, and then check for "money":
$value=$_POST['text'];
if (preg_match("/money/", $value)) {
//do something
}
echo <<<_END
<form method="post" action="">
<input type="text" name="text" value="$value"
<input type="submit" value="Submit"/>
</form>
_END;
Enjoy!

How to restrict entering old date in angular 6?

My code as follows,
ngOnInit() {
let now = new Date();
this.date = formatDate(now, "dd/mm/yyyy",'en-US');
console.log("dateFormat :",this.date);
}
My html:
<input type="date" [min]={{date}} id="App_Date" class="form-control" formControlName="App_Date">
So here Im getting the current date & trying to assign for min. But it is not working. Could somebody please help me with this?
I need to restrict the user to stop entering old dates. How can I achieve this?
Need to remove the timezone properties from the date object using split
ngOnInit() {
let now = new Date();
this.date = new Date().toJSON().split('T')[0];
console.log("dateFormat :",this.date);
}
And remove the curly brackets from the template
<input type="date" [min]="date" id="App_Date" class="form-control" formControlName="App_Date">
Use direct [min]="date" instead of [min]={{date}} in view.
<input type="date" [min]="date" id="App_Date" class="form-control" formControlName="App_Date">