AngularJS - removing the date value from the UI calendar

I have implemented the AngularJS ui-date feature and included the following html & js code :-

<input id="dob" name="dob" ui-date="dateOptions" class="form-control" ui-date-format="dd-MM-yy" ng-model="user.dob" ng-required="true" readonly>

$scope.dateOptions = {
        startingDay: 1,
        changeMonth: true,
        changeYear: true,
        showAnim: "clip",
        clearBtn: true
    };

However, I am facing an issue with the Datepicker not being editable. How can I clear the value once the user selects a date of birth?

I attempted to use clearBtn but unfortunately it did not work.

javascriptangularjs

Answer №1

I have never worked with ui-date before, but I believe this solution should be effective. Implement a bind and a change event in your code. Afterwards, make sure to clear the bound variable.

<input id="dob" name="dob" ng-change="selectChoice()" ui-date="dateOptions" class="form-control" ui-date-format="dd-MM-yy" ng-model="user.dob" data-ng-bind="user.dob" ng-required="true" readonly>

$scope.user.dob = '';//initialize the date

$scope.dateOptions = {
        startingDay: 1,
        changeMonth: true,
        changeYear: true,
        showAnim: "clip",
        clearBtn: true
    };

$scope.selectChoice = {
        alert($scope.user.dob);
//now reset it
$scope.user.dob = '';
    };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to determine when the context value has been established?

Currently encountering an issue while trying to display a header. To achieve this, I begin by making an API call in InnerList.js and setting a list in context using the data from the API call. Next, in Context.js, I assign the list to a specific data set ...

javascriptreactjsreact-hooksreact-context

Employing the powerful Math.pow() function within the setState() method

In this ReactJS code example, the goal is to update the value of a div element with every click of a button using the Math.pow() method. However, it seems that the method is not working as intended. Can someone explain why? The handlerButton function in ...

javascriptreactjs

Are you planning to print the JSON information?

I've been working on mastering JavaScript and decided to create a script that displays all public Facebook statuses related to a specific keyword. However, things aren't going as planned. You can find a sample URL where the JSON data is located h ...

javascriptjsonfacebook-graph-api

Getting URL parameters dynamically without reloading the page

Here's a particular issue I'm encountering: I've implemented the following function to fetch the GET Parameters from a URL. $(document).ready(function() { function getParam(variable) { var query = window.location.search.sub ...

javascriptjqueryhtmlurl

Click functionality being incorporated into Material UI

I need assistance with incorporating an onClick event handler in a material ui example, but it doesn't seem to be working as expected. <Tooltip title="Filter list"> <IconButton aria-label="Filter list"> <FilterListIcon/> </ ...

javascriptreactjsmaterial-ui

Tips for linking attributes to a function using ES6

I'm currently working on a stateless React.js component called myView. I want to keep the syntax as concise as possible, but I'm having trouble understanding how to export a default function with an attached object. Here's an example in myVi ...

javascriptreactjsecmascript-6

I am interested in altering the color of table rows using either JQuery or CSS

Looking to update row colors based on grouping. For example: Color the TR accordingly for every 5 rows: First 5 rows in green (0-4 Rows), Next five rows in red (5-9 Rows), Following five rows in yellow (10-14 Rows) and repeat the pattern... ...

javascriptjqueryhtmlcss

Error in Vue: Trying to set a property ('message') on an undefined object

As a newcomer to Vue.js, there are some concepts that I may be overlooking. Despite working on it for months, I have been unable to find a solution. My goal is to change the message displayed in a v-alert by using a separate JavaScript script to import the ...

javascriptvue.jsvuetify.jsvue-cli-3

Tips for Showing Certain Slides When the Page Loads

When using jQuery filter effects to organize div slides on a page, I encountered an issue where all the divs containing different slides are displayed on page load instead of just the default chosen ['active'] div. The filter effect itself is fun ...

javascriptjquerycsshtml

Generating grid-style buttons dynamically using jQuery Mobile

I am in need of assistance to create a dynamic grid using jQuery Mobile. The grid should consist of buttons with either 'onclick' or 'href' functionality. The number of buttons should be generated dynamically at runtime. Specifically, I ...

javascriptjquerycsshtmljquery-mobile

Disappearing elements with jQuery onClick event?

I'm currently diving into the world of jQuery and experimenting with adding functionality to one of my websites. I want to create a feature where clicking on a button will change the text and URL of a hyperlink. The problem I'm facing is that whe ...

javascriptjqueryhtml

Creating code for both the PC and mobile website by utilizing the user agent

I need to customize the CSS for my website, and I have a specific question: If a user is accessing my web page via a computer, the CSS should be as follows: <link rel="stylesheet" href="/pc.css" type="text/css" media="all" /> However, if they are ...

javascripthtml

Error encountered when trying to dynamically load jQuery UI - Uncaught TypeError: Unable to read property 'ui' of undefined

I am facing an issue with dynamically loading my jQuery and jQuery UI files. The jQuery file loads successfully, but an error occurs when the jQuery UI file attempts to load. Upon checking the console, I found the following error message: Uncaught TypeErr ...

javascriptjqueryjquery-ui

Unable to upload the file using AJAX

Here is my AJAX request where I am attempting to send form data to a PHP page and display messages accordingly. The problem I'm encountering is that when using serialize() method in AJAX, my file data is not being posted. As a result, the send.php scr ...

javascriptajaxjquery

Can flexbox elements be animated as they scroll?

Wondering if it's feasible to animate flex elements upwards when scrolled? Attempting to replicate this effect: https://codepen.io/Sergiop79/pen/bxjGEe I want to apply this to the elements below (styled in flexbox), either the entire "row" or each i ...

javascriptcssflexboxcss-transitions

Vue is refusing to display information for a certain API call

Within my next component, I have the following structure: <template> <div class="home"> <div class="container" v-if="data" > <Card v-for="result in data" :img="result.links[0]&q ...

javascriptvue.jsvuejs2vue-component

Is it possible to enclose a form inside a Bootstrap popover?

<div class="container"> <div class="row" style="padding-top: 240px;"> <a href="#" class="btn btn-large btn-primary" rel="popover" data-content="<form ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3popover

Converting dynamic text enclosed in asterisks (*) into a hyperlink on a webpage with the use of JavaScript

I'm facing a unique situation where I need to transform specific text on an HTML page into anchor tags using JavaScript/jQuery. The text format is as follows: *www.google.co.uk/Google* *www.stackoverflow.com/StackOverflow* The desired outcome should ...

javascripthtmljqueryhyperlink

Analyzing two arrays and utilizing ng-style to highlight matching entries within the arrays

My list displays words queried from a database, allowing me to click on a word to add it to another list that I can save. This functionality enables me to create multiple word lists. My goal is to visually distinguish the words in my query list that have a ...

javascriptangularjsarraysng-classng-style

Issue with table display within <div> element in React

Recently diving into React, I find myself in a situation where I need to display data in a table once it's ready or show 'Loading' if not. Currently, my render() function looks like this: return ( <div> { this.state.loaded ...

javascriptreactjs